Jump to content
Search Community

Sequential Morph with ScrollTrigger

josephjcox test
Moderator Tag

Recommended Posts

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!

  • Like 1
Link to comment
Share on other sites

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!

  • Like 2
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.
  • Create New...