Problem with Text disappearing (React, Tailwind, Gsap, ScrollTrigger)

[jck13mad]

Hello all,

I am trying a pretty simple technique with gsap.from using scrollTrigger.  The text appears fine without gsap. I have tried using the `id` and useRef in the parameters, but both give the same result. To explain the problem, the test is supposed to come from 0 opacity and -20 pixels to where it is asked to be in the Tailwind specified lower. The text does not show up on the screen while scrolling down, until I am scrolling back up, and it will appear for a split second and then disappear. I have a `ScrollTrigger.refresh()` below my useEffect(). Any and all help is appreciated. Thanks, and have a good one!

[GSAP Helper]

It's tough to say for sure without a minimal demo, but I bet 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?

 

So you can either turn off strict mode in React or you can add some conditional logic to your useEffect() call so that it only runs ONCE. Sorta like:

const didAnimate = useRef(false);

useEffect(() => {
  // if we already ran this once, skip!
  if (didAnimate.current) { return; }
  // otherwise, record that we're running it now and continue...
  didAnimate.current = true;
  gsap.from(el, {x: 100});
}, []);

 

Or you could just use .fromTo() tweens so that you define both the start and end values.

 

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

[jck13mad]

Wow, that is some awesome insight my friend. I was not aware of that React 18 feature. I implemented that didAnimate hook you used in your response and it worked perfectly. Everything shows up when it needs to now. 

Another question if you don't mind: you were exactly right that I was using this locally, but will I need this solution if I am to host it through Vercel, for example? Or is this solution only to get a visual in testing locally?

I appreciate all the help!

[GreenSock]

I'm definitely not a React guy, but my understanding is that it's only in strict mode which is on by default locally(?)

 

It's not as if the fix would hurt anything if you left it in outside of strict mode, so I'd say just use it