Bend a div with bounce

[Kevin Pasnik]

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.

 

 

[Rodrigo]

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.

 

Rodrigo.