Jump to content

Kevin Pasnik

Bend a div with bounce

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I need to animate a div to simulate a guitar string being plucked.  Attached is graphical example of the string with buttons.  I need each button clickable with the div animation to bend and bounce at the button location.  I have experimented with TweenMax and cubic beziers and quadratic beziers but I have not been able to create the effect I'm looking for.  I have attempted to use various anchors and control points with no luck.


I'm sure there is a simple method to bend or warp the contents of a div but I can't seem to figure it out.


Thanks in advance for your help.




Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Not an easy task at all. As far as I know with just DOM elements it would be very complex, you have to consider that when any elastic object, such as a guitar string, is streched it becomes longer and the vibrations(going back and forth) are the actual liberation of the energy given to that element while it goes to it's normal size.


First you need to make the element longer, then animate between different bezier states, making the element shorter on each bezier until it goes back to it's normal size and position. If you ask me I'd try SVG for this, in the mean time maybe this little experiment I made some time ago might help you:


See the Pen Aydqu by rhernando (@rhernando) on CodePen


Basically takes a bunch of objects and animates them from one bezier to another, but the complicated thing here would be simulating the string, in that phase you can add SVG to the mix.



  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.