Jump to content
GreenSock

AnthonyZhang220

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

Recommended Posts

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.

2011657278_Screenshot2021-12-05081004.thumb.png.f622b3613e335fef4f345ed1e40196ac.png

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 by AnthonyZhang220
add code
Link to comment
Share on other sites

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.

 

 

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.
×