[Left text scrolling right image pin]

I recently figured it out. Thanks for helping though! I will definitely use the minimal demo in the future. For anyone wondering, the problem was that gsap was trying to read the variables before they had a value.

 

[Left text scrolling right image pin]

I am trying to create a image animation pinning effect, it's hard to explain but heres a working demo deveb.co like this:

 

 

 

 

 

 

 

 

 

I'm using next js 14.1.2 and the scrolling effect on the images dosn't work. Any ideas?

 

 

 

function ScrollingSection() {

 

  const details = gsap.utils.toArray("#details:not(:first-child)")

  const photos = gsap.utils.toArray("#photo:not(:first-child)")

 

  let allPhotos = gsap.utils.toArray('#photos')

 

  const trigger = useRef()

  const pin = useRef()

 

  useGSAP( () => {

    ScrollTrigger.create({

      trigger: trigger.current,

      start: "top top",

      end: "bottom bottom",

      pin: pin.current

    })

 

    gsap.set(photos, { yPercent: 101 })

 

    details.forEach((detail, index) => {

      const animation = gsap.timeline()

        .to(photos[index], { yPercent: 0 })

        .set(allPhotos[index], { autoAlpha: 0 })

      ScrollTrigger({

        trigger: `.hd-${index}`,

        start: "top 80%",

        end: "top 50%",

        animation: animation,

        scrub: 1,

        markers: true

      })

    })

  }, [])

 

  return (

    <>

      <div className="w-full flex">

        <div ref={trigger} className="w-1/2">

          {

            list.map((item, index) => {

              return (

                <TextBox title={item.title} index={index} desc={item.desc} key={index} />

              )

            })

          }

        </div>

        <div ref={pin} className="w-1/2">

          <div className="w-full h-screen flex justify-center items-center">

            <div className="w-[40vw] relative aspect-square shadow-2xl rounded-lg overflow-hidden">

              {

                list.map((item, index) => {

                  return (

                    <>

                      <div id="photo" key={index} className={`w-full h-full absolute ${item.color}`}></div>

                    </>

                  )

                })

              }

            </div>

          </div>

        </div>

      </div>

    </>

  )

}

 

function TextBox({ title, desc, index }) {

  return (

    <>

      <div id="details" className="h-[100vh] flex flex-col items-center justify-center gap-8">

        <h2 className={`headline hd-${index} text-5xl`}>{title}</h2>

        <p className="text-center w-1/2">

          {desc}

        </p>

        <Button>Explore</Button>

      </div>

    </>

  )

}

See the Pen vYVBPJq by snorkltv (@snorkltv) on CodePen