Scroll trigger issue

[yashc]

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';

 

gsap.registerPlugin(ScrollTrigger);

 

const Slider = () => {

    const Imagediv = useRef()

    const Covera = useRef()

    const Container = useRef()

 

    useEffect(() => {

        console.log(Imagediv)

        const Section = gsap.utils.toArray(Imagediv.current.children)

        const t1 = gsap.timeline({

             

        })

 

           

        t1.fromTo([Imagediv.current,Imagediv.current.children],{

            x: 500,

            opacity: 0,

            stagger: .1,

            duration:2.5

        },{ x: 350,

            opacity: 1,

            stagger: .1,

            duration: 2

       

        })

         

       

        gsap.to(Section,{

            xPercent: -100*(Section.length-1),

             ease: "none",

            duration: 6,

            scrollTrigger: {

                trigger: Imagediv.current,

                start: "top top",

                 pin: true,

                scrub:true,

                 markers:true,

                end: `+=3000`

            },

            onUpdate: () => {

               console.log("Imagediv.current",Imagediv.current)

               console.log("Container.current",Container.current)

            }

 

        })

           

       

 

    }, [])

  return (

    <Cover ref={Covera}>

       <div ref={Container}>

       

        <Imagecontainer ref={Imagediv}>

            <Imageelement>

                <img src={cafe} alt="" />

            </Imageelement>

            <Imageelement>

                <img src={cafe} alt="" />

            </Imageelement>

            <Imageelement>

                <img src={cafe} alt="" />

            </Imageelement>

        </Imagecontainer>

       </div>

    </Cover>

  )

}

 

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;

    gap:1rem;

`

const Imageelement = styled.div`

    width: 30rem;

    img{

        width:100%;

    }

`


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

[Rodrigo]

Hi,

 

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:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

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!

[yashc]

That helped  thanks