Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Gsap Slinky animation

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 post
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 post
Share on other sites

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

Link to post
Share on other sites

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

  • Like 2
Link to post
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 post
Share on other sites

@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 post
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.