Problem of photo fade out with transform

[CalvinKwan]

The images crashed after i scrolling the page.

 

the code is below:

 

 

let tl = gsap.timeline({ repeat: -1, repeatDelay: 1 });

 

  useEffect(() => {

    tl.to(slideRef1.current, {

      duration: 1,

      ease: "linear",

      opacity: 1,

      delay: 0,

      x: -20,

    })

      .to(slideRef1.current, {

        duration: 3,

        ease: "linear",

        delay: 0,

        x: -100,

      })

      .to(slideRef1.current, {

        duration: 1,

        ease: "linear",

        opacity: 0,

        delay: 0,

        x: -120,

        display: "none",

        zIndex: -1,

      })

      .to(slideRef2.current, {

        duration: 1,

        ease: "linear",

        opacity: 1,

        delay: 0,

        x: -20,

      })

      .to(slideRef2.current, {

        duration: 3,

        ease: "linear",

        delay: 0,

        x: -100,

      })

      .to(slideRef2.current, {

        duration: 1,

        ease: "linear",

        opacity: 0,

        delay: 0,

        x: -120,

        display: "none",

        zIndex: -1,

      })

 

 

 

[Cassie]

Hi there! It's hard to debug without seeing a minimal demo.

 

Often the issue is with the element being animated and not the GSAP code itself. I can't see anything strange in your code at all.

Could you possibly pop a demo together on codeSandbox? Thanks.

 

https://codesandbox.io/s/gsap-bonus-plugins-starter-m26x0

[OSUblake]

You should also check out our React Guide as you are making a bunch of different mistakes, like creating a timeline outside of an effect and not having an empty array for the effect dependency.