Falling rotating box animation

[craigib]

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

[Carl]

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