Jump to content
Search Community

How to have a scrollTrigger animation smoothly interrupt a page load animation if the page is scrolled before the first animation finishes

BlueModus test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Okay just to make this simple, I am going to give my element positions and animations some shorthand names/definitions:

Tween-A: The first animation to run on page load, moving from Position-A to Position-B.

Tween-B: The animation with an attached/scrubbed scrollTrigger that animates from Position-B to Position-C as the page is scrolled down (and reverse on scroll up)

 

Position-A: the natural (hidden) starting position of the text, set in the CSS.

Position-B: the base visible position of the the text; the ending position of Tween-A, and the starting position of Tween-B.

Position-C: the final hidden position of the text; the ending position of Tween-B

----------------------

What I currently have working (potentially poorly) is taking some text from Position-A, then on page load running Tween-A to animate to Position-B. Then, as the user scrolls the page, running Tween-B, to animate from Position-B to Position-C. This is what my demo shows.

 

However, what I cannot for the life of me figure out (I have tried timelines, standalone scrollTriggers, and a whole other list of properties I am probably using wrong) is how to have the lines enter in from Position-A, but if the page is scrolled before Tween-A finishes, smoothly transition from where ever they they happen to be based on the progress of Tween-A, to wherever they should based on the progress of Tween-B. Finally, if the page is scrolled back up, animate with Tween-B back to Position-B.

 

If you look at the demo, and start scrolling before Tween-A finishes, you will see first, the lines just continue to finish their animation from Tween-A, and then second, an abrupt jump from Position-B to where ever they are supposed to be based on the progress Tween-B. This is the part I am trying to smooth out. 

 

The demo doesn't make an attempt to do this part at all, because I have tried so many different ways to make it happen, and honestly I have no idea what I'm doing. 

See the Pen XWxVmrB by chadd (@chadd) on CodePen

Link to comment
Share on other sites

I figured out a way to accomplish this. I definitely can't say if its the best way, or even a good way - so if anyone has any suggestions I would be happy to hear them, but I figured I'd just put the updated version here in case it can help anyone else out. 

 

See the Pen wvYpYmv by chadd (@chadd) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

I think a cleaner solution would be to just wrap the lines in container elements so you can animate them independently. So you'd wire up the containers to the ScrollTrigger, but then just do the stagger-in animation with a normal staggered tween: 

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

 

Does that help? 

  • Like 2
Link to comment
Share on other sites

On 5/6/2023 at 2:03 PM, GreenSock said:

Does that help? 

Yes. Yes it does. And its brilliant and simple, and now that I see it, Im mad I didn't think of it myself haha. Regardless, thank you so much for the help, I really appreciate it!

  • Like 1
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...