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

Question

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

what i want to achieve is, the lines (li) should come in one by one as i scroll down. and it should go out as i 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 have create a codesandbox here I am not able to figure out the issue in my script.

Thanks!

Answer 1

Well I'm not sure if maybe its something to do with the way reacts useEffect loads but for some reason I think gsap is not able to get the css values that the element starts with. It works fine if you use fromTo() instead of just from() so you can just use that. Also I think you want the animation to start when the top of the element hits 10% from the bottom of the screen right? If that is the case then you would do start: 'top 90%' because otherwise you are not going to start your animation until the top of your trigger hits 10% from the top of the viewport and you would miss the animations on the top. If not just keep is as you had it. Anyway here is those changes you can try it out and I think this is the result that you are looking for.

const animation = gsap
  .timeline({
    scrollTrigger: {
      trigger: '.hearedListing',
      scrub: true,
      start: 'top 90%',
      end: 'bottom top',
      markers: false
    }
  })
  .fromTo(
    '.hearedListing li',
    {
      x: 300,
      autoAlpha: 0
    },
    {
      x: 0,
      autoAlpha: 1,
      duration: 4,
      stagger: 2,
      ease: Power1.out
    }
  )