https://github.com/omkushwaha9/gsap-svg_animations
This project showcases a dynamic line animation that separates two pages, mimicking a guitar string's motion. The line magnetically follows the cursor when close and bounces back when the cursor moves away, creating an engaging visual effect.
https://github.com/omkushwaha9/gsap-svg_animations
gsap-animation html-css-javascript
Last synced: 3 months ago
JSON representation
This project showcases a dynamic line animation that separates two pages, mimicking a guitar string's motion. The line magnetically follows the cursor when close and bounces back when the cursor moves away, creating an engaging visual effect.
- Host: GitHub
- URL: https://github.com/omkushwaha9/gsap-svg_animations
- Owner: omkushwaha9
- Created: 2024-07-17T12:01:05.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-17T12:21:26.000Z (11 months ago)
- Last Synced: 2025-01-23T18:44:56.291Z (5 months ago)
- Topics: gsap-animation, html-css-javascript
- Language: HTML
- Homepage:
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# GSAP SVG Animation
What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines graphics in XML format
Each element and attribute in SVG files can be animated
SVG is a W3C recommendation
SVG integrates with other standards, such as CSS, DOM, XSL and JavaScript
About this project
This project features an innovative animation of a line designed to separate two pages. The line behaves dynamically, akin to a guitar string. When the cursor approaches the line, it is magnetically attracted towards the cursor. Conversely, as the cursor moves away, the line automatically returns to its original position with a bouncing animation, resembling the motion of a guitar string. This interactive element adds a visually appealing and engaging effect to the user interface.
by OM KUSHWAHA