Sequential Morph with ScrollTrigger

[josephjcox]

As you scroll down to the second morph (angry face) you'll see it resets the positions of all the elements before morphing. I can't seem to get it to:

 

Morph from original -> Worried -> Angry

Instead it insists on Original -> Worried -> Original -> Angry

 

How do I fix this?

 

 

See the Pen qBLmoKq by Joseph-Cox (@Joseph-Cox) on CodePen

[GreenSock]

By default, ScrollTriggered animations get immediately rendered so that they are ready to go super-fast when the scrolling gets to that spot. So since you've got several tweens animating the SAME element(s), they're all using the same initial state as the "start". 

 

Solution: just set immediateRender: false on the subsequent tweens of the same element(s) so they user the ending state of the previous one when they first render. 

 

See the Pen ExGmBva?editors=0010 by GreenSock (@GreenSock) on CodePen

 

- OR -

 

You could use .fromTo() tweens that define the starting and ending states (so they're not dependent at all on other tweens).

 

- OR - 

 

You could put them all into a timeline. 

 

Lots of options

 

Happy tweening!

[josephjcox]

Man I feel dumb. I've been banging my head on this and I had gotten to the point where I realized it was a render timing issue but I was trying to sneak around it by only doing my calls when triggers were hit. I tried the fromto but couldn't get it to fire right and I tried using callbacks to signal the morphs on events. 

 

A simple flag solves it all!