ScrollTrigger not working as expected, triggers right after the page is loaded not at the time when I scroll to the assigned useRef

[AnthonyZhang220]

I put an <a> tag for project on the navbar, as I click "project" it will scroll me to the section by its id. I wonder if this function conflicts with scrolltrigger function causing the issue or not.

 

I have a few React components on the top of this project component.

import "./Project.scss"
import ProjectList from "./ProjectList/ProjectList"
import { projectdata } from "./ProjectData.js"
import { useEffect, useRef } from "react";
import { gsap } from "gsap/all";
import { ScrollTrigger } from "gsap/ScrollTrigger"

export default function Project() {

    gsap.registerPlugin(ScrollTrigger);
    const listRef = useRef(null);

    useEffect(() => {
        gsap.fromTo(listRef.current, {
            y: "100%", opacity: 0
        }, {
            y: "0%", opacity: 1, duration: 2,
            scrollTrigger: {
                trigger: listRef.current,
                markers: true,
            },
        });
    })

    return (
        <div className='project' id='project'>
            <h1>Project</h1>
            <ul>
                {projectdata.map((project, index) => (
                    <ProjectList {...project} key={index} ref={listRef} />
                ))}
            </ul>
        </div>
    )
}

 

See the Pen PoJPMoE by anthonyzhang220 (@anthonyzhang220) on CodePen.

Edited December 5, 2021 by AnthonyZhang220
add code

[OSUblake]

Welcome to the forums @AnthonyZhang220

 

It's hard to tell what's supposed to happening from your code. Can you make a minimal demo on CodeSandbox?

 

I would also suggest checking out our React Guide. It looks like you are a missing the array dependency from your effect, and you I'm assuming you would need to create your ScrollTriggers in a loop, but you would need an array of targets first. Check out the useArrayRef hook here.