ScrollTrigger tween target using TweenFromTo

[Jake Snellin]

https://stackblitz.com/edit/stackblitz-starters-abtcvv?file=app%2Fpage.tsx

 

Hi gsap team 🙂 

 

Hope you're well. 

 

Is the approach used in my demo efficient for animating menu items on scroll? Is there anything I should be doing differently? I'm still relatively new to gsap and could do with a little feedback. 

 

Look forward to hearing from you. 

 

Thanks for all your help with my project so far, Jake. 

[Jake Snellin]

There seems to be a logic error. It's working ok in the demo, however when I try and incorporate it into my react project, passing the first trigger causes the timeline to play once from beginning to end. I'm not really sure why it's happening. I'm now using xPercent for the tween which wasn't the case in the demo. I suspect it's something to do with the loop and the tweens creation? Here's the code from my react project. 

 

    mm.add("(min-width: 1300px)", () => {

      tl.current = gsap.timeline({ paused: true });

 

      for (let i = 0; i < btns.length; i++) {

        if (i === 0) {

          continue;

        } else {

          tl.current.to(".target", {

            xPercent: "+=109.71",

            duration: 1,

          });

 

          ScrollTrigger.create({

            trigger: sections[i],

            start: () => "top " + navHeight.current,

            end: () => "bottom " + navHeight.current,

            animation: tl.current,

            onEnter: () => tl.current.tweenFromTo(i - 1, i),

            onLeaveBack: () => tl.current.tweenFromTo(i, i - 1),

          });

        }

      }

    });

 

[Jake Snellin]

 When I disable reacts strict mode it behaves as expected. 🤨 How can I improve the code to have it work correctly when strict mode is true? Thanks! Jake.

[Cassie]

Hey there!

 

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

We also have an npm package with a useGSAP hook - very recent and unannounced - which helps abstract this away a little for you.

Hope this helps!

https://github.com/greensock/react