Jump to content


Gsap Slinky animation

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 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

Link to comment
Share on other sites

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.

  • Like 6
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 5 weeks later...

@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?


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.