GSAP scroll trigger not working

[khoaoaoao]

I want my animation to play when the scroll matches the start mark and when I leave, it reverses, the same for OnEnterback and OnLeaveback, why does my code just not behave like it's supposed to be :<?

See the Pen yLQweeL by -Trng-Khoa (@-Trng-Khoa) on CodePen

[GreenSock]

That's because you set the start and end to exactly the same thing and you've got it playing onEnter and reversing onLeave, thus it immediately plays and then reverses at exactly the same time, so it doesn't go anywhere. I assume you wanted to set the end to something later, like when the bottom of the element hits the top of the viewport(?)

 

Are you trying to do this?: 

See the Pen QWJoNBM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If so, there's really no need for you to create that loop at all since you're animating all those elements at the same time, so you can just use a single tween: 

See the Pen poQYyZp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps. 

[khoaoaoao]

Thank you for the solution, but what if I want to animate each separate element, like adding a little bit of stagger between them, do I need to use a timeline or something like that?

[GreenSock]

Yeah, that's super easy - just add a stagger on the tween: 

See the Pen ExOMQpd?editors=0010 by GreenSock (@GreenSock) on CodePen

[khoaoaoao]

yes, thanks a lot for your help 🤗

[khoaoaoao]

@GreenSock Actually I'm coding this in React, and unfortunately, it doesn't work as I expected, Can you point out where I am wrong?

https://codesandbox.io/s/compassionate-marco-rpntdy?file=/src/styles.css

[Rodrigo]

Hi,

 

There are several errors in your useEffectLayout and GSAP Context:

  useLayoutEffect(() => {
    let ctx = gsap.context(
      gsap.from(".Services__func", {
        scrollTrigger: {
          trigger: ".Services__funcContainer",
          toggleActions: "play reverse restart reverse",
          start: "top center",
          end: "bottom center",
          markers: true
        },
        opacity: 0,
        yPercent: 10,
        duration: 0.5,
        stagger: 0.02
      }),
      scrollSelector
    );
    return ctx.revert();
  }, []);

The gsap.context() method takes a callback or function as first parameter, right now you are just passing a gsap.to() instance, that is not going to work. Also the cleanup phase of the useEffect and useLayoutEffect hooks also takes a callback, right now you are immediately invoking ctx.revert() a few milliseconds after creating the GSAP Context instance.

 

GSAP Context:

// Bad
const ctx = gsap.context(gsap.to(...), scope);

// Good
const ctx = gsap.context(() => {
  gsap.to(...);
}, scope);

 

React useEfefct/useLayoutEffect

// Bad
useLayoutEffect(() => {
  const ctx = gsap.context(() => {}, scope);
  return ctx.revert();
}, []);

// Good
useLayoutEffect(() => {
  const ctx = gsap.context(() => {}, scope);
  return () => ctx.revert();
}, []);

This seems to work in the way you intend:

useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    gsap.from(".Services__func", {
      yPercent: 10,
      opacity: 0,
      duration: 0.5,
      stagger: 0.05,
      scrollTrigger: {
        trigger: scrollSelector.current,
        start: "top center",
        end: "bottom center",
        toggleActions: "play reverse restart reverse",
        markers: true,
      },
    });
  }, scrollSelector);
  return () => ctx.revert();
}, []);

Here is a fork of your sandbox:

https://stackblitz.com/edit/vitejs-vite-gnrf5o

 

Finally I strongly recommend you to check the resources in this page:

 

Hopefully this helps.

Happy Tweening!