React JS - gsap scrollTrigger doesn't working on scroll down but working fine on scrollup

[dev-ram 2 Likes (Newbie)]

I am trying to implement timeline animation where each element will be coming up (from right to left) one by one on scroll down and reverse on scroll up

At my end its not working on scroll down but working fine with scroll up

I have tried the following.

 

import { useEffect, useRef } from 'react';
import { gsap, Power1 } from 'gsap';
import {ScrollTrigger} from 'gsap/ScrollTrigger';

function WeHeard(props) {
    
    gsap.registerPlugin(ScrollTrigger);
    useEffect(() => {
        const animation = gsap.timeline({
            scrollTrigger: {
                trigger: ".hearedListing",
                scrub: true,
                start: "top 10%",
                end: "bottom top",
                markers:false
            }
        }).from('.hearedListing li', {
            x:300,
            autoAlpha:0,
            duration:4,
            stagger:2,
            ease: Power1.out
        });
    }, []);

    return <>
    <section className="heared-listing hearedListing" >
        <div className="container">
            <div className="row">
                <div className="col-md-12 text-center">
                <h2 className="animate-heading">We heard</h2>
                    <ul className="list-unstyled primary-text-color h4 mt-5">
                        <li >Here is my line one</li>
                        <li >Here is my line two</li>
                        <li >Here is my line three</li>
                        <li >Here is my line four</li>
                        <li >Here is my line five</li>
                        <li >Here is my line six</li>
                        <li >Here is my line seven</li>
                        <li >Here is my line eight</li>
                        <li >Here is my line Ten</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    </>
}
export default WeHeard;

I am created a codesandbox here 

[Rodrigo 5,038 Likes (Superhero)]

Hi @dev-ram and welcome to the GreenSock forums!

 

This is related to React 18 strict mode and GSAP from instances. You can read more about it here:

Since version 3.11 GSAP has Context to help with this:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

This seems to work as you expect:

import { useEffect, } from "react";
import { gsap, Power1 } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

function WeHeard(props) {
  useEffect(() => {
    const ctx = gsap.context(() => {
      const animation = gsap
      .timeline({
        scrollTrigger: {
          trigger: ".hearedListing",
          scrub: true,
          start: "top 10%",
          end: "bottom top",
          markers: true,
        }
      })
      .from(".hearedListing li", {
        x: 300,
        autoAlpha: 0,
        duration: 4,
        stagger: 2,
        ease: Power1.out
      });
    }); 
    return () => ctx.revert()
  }, []);

  return (/*...*/);
}
export default WeHeard;

Finally there is no need to import eases any more, it works but you can just use a string:

https://greensock.com/docs/v3/Eases

 

Happy Tweening!

[dev-ram 2 Likes (Newbie)]

@Rodrigo

Thank you so much for helping and correcting me