Jump to content
Search Community

Scroll trigger issue

yashc test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

import React,{useEffect,useState,useRef} from 'react'
import styled from 'styled-components'
import cafe from '../../Images/bb201a3393c4dd27d8c758e2bf7c.jpg.webp'
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger';

const Slider = () => {
    const Imagediv = useRef()
    const Covera = useRef()
    const Container = useRef()
    useEffect(() => {
        const Section = gsap.utils.toArray(Imagediv.current.children)
        const t1 = gsap.timeline({
            x: 500,
            opacity: 0,
            stagger: .1,
        },{ x: 350,
            opacity: 1,
            stagger: .1,
            duration: 2
            xPercent: -100*(Section.length-1),
             ease: "none",
            duration: 6,
            scrollTrigger: {
                trigger: Imagediv.current,
                start: "top top",
                 pin: true,
                end: `+=3000`
            onUpdate: () => {
    }, [])
  return (
    <Cover ref={Covera}>
       <div ref={Container}>
        <Imagecontainer ref={Imagediv}>
                <img src={cafe} alt="" />
                <img src={cafe} alt="" />
                <img src={cafe} alt="" />
export default Slider
const Cover = styled.div`
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
const Imagecontainer  = styled.div`
height: 100vh;
    display: flex;
const Imageelement = styled.div`
    width: 30rem;

So this is my react component but the element kind of just jumps or when it comes into start portion of the scroll trigger, it basically just disappears, when I tried consolelog it says it has a translate of y applied of 6k, I am not sure what I am doing wrong, been trying to debug for 4 hours watching countless videos idk maybe I m just dum, could someone explain what this trigger and scroll trigger is cause idk more videos I watch more confusing it becomes
Link to comment
Share on other sites

  • Solution



Is really hard for us to debug or find issues without a minimal demo. We have a collection of React starter templates in Stackblitz, feel free to fork any of them in order to illustrate the problem you're having right now:



On top of that I see that you're not using GSAP Context in your effect hook. When working with React GSAP Context is your best friend since it allows you to prevent issues with useEffect and useLayoutEffect double calls in Strict Mode (since React 18), which most likely is the source of the issue you're having. Please check the resources in this page to learn more:


Hopefully this helps.

Happy Tweening!

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.
  • Create New...