Jump to content
GreenSock

MiraNoir

Animation doesn't work on refresh

Go to solution Solved by OSUblake,

Recommended Posts

Hi, I'm loving the platform and I am an old web designer getting back into the field 20+ years later. I'm not quite good at JS yet but working on it as I REadvance. However I'm hitting a snag, every time I refresh the page, all animations stop working, it's like that on my IIS/Flask webserver and on my codepen and for the life of me I don't understand why it just suddenly stops working on refresh. Its pretty basic animations made multiple time only, 3 come from the left side on page 2, and I have 15 popping in from the right on page 3.

 

Any help would be greatly appreciated. 

See the Pen zYPyNBy by MiraNoir (@MiraNoir) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums @MiraNoir

 

There is a known regression with .from() animations that will be fixed in the next release. In the meantime, try adding lazy: false to your animations to see if that fixes the problem.

 

See the Pen wvPRJyR by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

It worked 🤪

 

Thank you so much, made my day!

  • Like 1
Link to comment
Share on other sites

  • 2 months later...
On 3/2/2022 at 2:40 PM, OSUblake said:

Welcome to the forums @MiraNoir

 

There is a known regression with .from() animations that will be fixed in the next release. In the meantime, try adding lazy: false to your animations to see if that fixes the problem.

 

 

 

Hello Miranoir, 

I'm wondering if you have an update on this fix please?  I have come across this exact problem.  I am tweeting from random values so trying to reengineer this to a .to tween is not possible unless I remove the randomness, and who wants that ! lol.  I have tried the lazy: false but that did not fix the issue in Safari and Firefox on Mac.

 

many thanks!

Link to comment
Share on other sites

@Justin N that fix is already out in the current release. Are you using at least 3.10.4? If so, please provide a minimal demo and we'd be happy to take a peek. 

 

Are you using React 18+? They introduced a very odd behavior where it calls the useEffect() TWICE in strict mode (which is the default). It has absolutely nothing to do with GSAP, but logically if you call a .from() twice, the logic would dictate that it stay in the .from() spot. Again, it's not a bug in GSAP at all. There's a workaround but I'll spare you the explanation unless you confirm that you're using React 18+

Link to comment
Share on other sites

No, I'm not using React. However, I am using Bootstrap which I assume adds a layer of complexity.  

 

Thank you !

Justin

Link to comment
Share on other sites

Bootstrap is purely presentational so won't get in the way of JavaScript logic at all. What GSAP version are you using? Is it at least 3.10.4?

 

Do you have a minimal demo by any chance? It would be really helpful for us to see what's happening

 

Thanks!

 

 

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