Jump to content
Search Community

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

Luis Pizarro test
Moderator Tag

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

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

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