Jump to content


Falling rotating box 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'm currently playing around with an animation, I'm trying to get a square to animate down and rotate.

The finished position should be a a diamond / rotated 45 degrees. 


I have 3 squares and I want to show the progress, it's kind of hard to explain but i've nearly got it working just feels laggy. I was 1 box to stop and the next to keep animating from that point. 


I feel i'm going about it all wrong as there is a lot of duplicate code. Any help would be appreciated. 

See the Pen Bqpvpj by craig_codes (@craig_codes) on CodePen

Link to comment
Share on other sites

Thanks for providing the demo. 

I think an issue is that the rotations are doing some weird stuff. I noticed the rotations are kind of odd at the beginning and then appear to fix themselves.

This has to do with how immediateRender works on from() and fromTo() tweens. In short if you have a tween that tweens from rotation 20 to rotation 45 scheduled to run a 5 seconds into the animation... the starting value of 20 will be set immediately. This is explained in the video below



I think it looks better, and probably closer to what you want if you set immediateRender to false on those rotation tweens.


See the Pen QZdozj?editors=0010 by anon (@anon) on CodePen


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.