Gsap Slinky animation

[DD77 8 Likes (Newbie)]

I need to create a animation, I made a slinky demo in css that suit perfectly but is not a gsap build and I need it animated. 
I'm trying to replicate the same but I'm a bit far away.

Could anyone help me to create this slinky animation?  It should open up.

 

See the Pen NXrqMw by davide77 (@davide77) on CodePen

See the Pen GyqJem by davide77 (@davide77) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi @DD77 

 

pls check these out : 

See the Pen YYWwxR by MAW (@MAW) on CodePen

 

and the second one:

See the Pen baeExE by MAW (@MAW) on CodePen

 

are these what you looking for?

[lennco 35 Likes (Newbie)]

Diaco beat me to it

 

Anyways, here's what I came up with:

 

Edit: movement triggers when hovering.

Edit2: Made the flow feel more natural.

 

See the Pen mpEVGZ by lennco (@lennco) on CodePen

 

Added a slight rotation to see it from the side. If you want to see it from the top, just remove the rotation from the stage class.

[DD77 8 Likes (Newbie)]

I'm trying to animate it with scrollMagic, and I'm struggle at the moment... 

[Carl 9,066 Likes (Superhero)]

Great work Diaco and lennco! you make it look so easy 

[DD77 8 Likes (Newbie)]

Yes, Great work Diaco and lennco! I managed to use it and I managed to make it working with ScrollMagic:-) 

[DD77 8 Likes (Newbie)]

@Diaco hi Diaco, I managed to make a video of what I need, would it be possible to make it in gsap this slinky animation? 

- starts from standing and after one roll stops.

Would it be possible?

slinky.m4v