Jump to content
Search Community

Animation doesn't work on refresh

MiraNoir test
Moderator Tag

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

  • 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

  • 2 months later...

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

  • 1 year later...

I'm also having the same issue. when I use 'gsap.to() method it is working. But when I use 'gsap.from()' method it is also working but when I reload the browser page, it is stuck. This issue is not coming in the codepen. can anyone help to solve this problem?

See the Pen oNmZorr by Dharani-Kumar-the-flexboxer (@Dharani-Kumar-the-flexboxer) on CodePen

   This is the code, that is not working in browser while refreshing.

Link to comment
Share on other sites

Perhaps the problem is that React 18 runs in "strict" mode locally by default which causes your useEffect() to get called TWICE! Very annoying. It has caused a lot of headaches for a lot of people outside the GSAP community too.

 

.from() tweens use the CURRENT value as the destination and it renders immediately the value you set in the tween, so when it's called the first time it'd work great but if you call it twice, it ends up animating from the from value (no animation). It's not a GSAP bug - it's a logic thing.

 

For example, let's say el.x is 0 and you do this: 

useEffect(() => {
  // what happens if this gets called twice?
  gsap.from(el, {x: 100})
}, []);

 

The first time makes el.x jump immediately to 100 and start animating backwards toward the current value which is 0 (so 100 --> 0). But the second time, it would jump to 100 (same) and animate back to the current value which is now 100 (100 --> 100)!  See the issue?

 

In GSAP 3.11, we introduced a new gsap.context() feature that solves all of this for you. All you need to do is wrap your code in a context call, and then return a cleanup function that reverts things: 

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

 

One of the React team members chimed in here if you'd like more background.

 

We strongly recommend reading the React article at https://greensock.com/react

 

Happy tweening!

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