Jump to content
GreenSock

dev-ram

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

Go to solution Solved by Rodrigo,

Recommended Posts

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 

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
Link to comment
Share on other sites

@Rodrigo

Thank you so much for helping and correcting me :) 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×