Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Luis Pizarro

2 animations on same page, second one loading first causing issues.

Go to solution Solved by ZachSaucier,

Recommended Posts

I have 2 components on the same page using ScrollTrigger.matchMedia().
The problem is that sometimes the second component loads first than the first one, so the animation of the second one is messed up, it doesnt take into consideration that it has above it other animation component.

 

On the stackblitz example I added a timeout just to simulate the issue, on real life it is that we are loading assets and the first one is loading slower than the first one. 

I tried using refresh() but didnt work.

 

https://stackblitz.com/edit/react-3ir25l?file=src/Component2.js

Link to comment
Share on other sites

Hey Luis. This sounds like a situation where you should set the refreshPriority of the relevant ScrollTrigger(s). Set a higher refreshPriority to ScrollTriggers that are earlier on in the page. 

Link to comment
Share on other sites

how does that work? I should put refreshPriority:0 to the first one and refreshPriority:1 to the second one. And I need to call ScrollTrigger.refresh()?

Link to comment
Share on other sites

You should put a higher refreshPriority on the one that comes first in the page scroll. And yes, you still need to call .refresh() when your components load (if they are not finished loading by the time the page loads).

Link to comment
Share on other sites

For the record, a higher refreshPriority means it will happen sooner than one with a lower refreshPriority. So you’d want those to be descending as you go further down the page in general. 

  • Like 1
Link to comment
Share on other sites

Yes I set it like this
Component 1(first on the page): refreshPriority:2
Component2: refreshPriority:1

Link to comment
Share on other sites

Awesome I just try it with the .create() and its working perfect. Thank you for the quick and accurate response 👌

Link to comment
Share on other sites

2 hours ago, ZachSaucier said:

Hey Luis. It looks like you found a minor bug with refreshPriority in timelines. We'll get that fixed right away. 

Sorry about any confusion there. Should be fixed in the latest beta: https://assets.codepen.io/16327/ScrollTrigger.min.js 👍

  • Like 1
Link to comment
Share on other sites

I was trying to implement this workaround on our real project but have some other questions
The timeline has:

.addLabel()
.fromTo()
.call()

Those are throwing me errors when using ScrollTrigger.create(), so are this functions available on the .create()?

Just in case there is no way, I was looking into the beta version but on npm https://www.npmjs.com/package/gsap I dont see the 3.6.0 beta,
is it a way to include it on my project?

image.png

Link to comment
Share on other sites

So long as you load GSAP and ScrollTrigger before you load your code and you make sure to register ScrollTrigger inside of your module you could use the above version. But @GreenSock can probably get you a copy of the modules version with the fix in it.

Link to comment
Share on other sites

You can get the beta here: https://assets.codepen.io/16327/gsap-beta.tgz

 

But you don't even really need that - all you need to do in the current version is delay your ScrollTrigger.refresh() call by one tick, like: 

gsap.delayedCall(0.001, ScrollTrigger.refresh);

 

  • Like 2
Link to comment
Share on other sites

Thank you so much, I just try this delayedCall on the original version and it worked

  • 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.
×