Keep overlay text over horizontal scrollTrigger

[GSAP Fan]

Hi,

first of all, please apologize my bad English.

I'm new to gsap, so i'm learning this great tool

 

I have created a horizontal ScrollTrigger, which shows images by scrolling side by side. This works great so far, but the overlay text "Beach" is scrolling also. The text should not scroll and should stay "fixed" and visible on the left, so its always visible.

 

Can you help me? Thank you

 

Greetings

Jay

 

 

See the Pen RwKzbmK by oi-developer (@oi-developer) on CodePen

[mikel]

Hey @GSAP Fan,

 

Welcome to the GreenSock Forum.

 

You could use a timeline and move both elements.

 

gsap.timeline({
  scrollTrigger: {
    trigger: galleryContainer,
    invalidateOnRefresh: true,
    pin: true,
    scrub: 1,
    end: () => "+=" + galleryContainer.offsetWidth
  }
})
  .to(galleryContainer, {
    x: () => -(galleryContainer.scrollWidth - document.documentElement.clientWidth) + "px",
    ease: "none",
  })
.to('.text', {
    x: () => (galleryContainer.scrollWidth - document.documentElement.clientWidth) + "px",
    ease: "none",
  },0)

 

Happy scrolling ...

Mikel

[GSAP Fan]

Hey mikel.

THANK YOU VERY VERY MUCH!!!!!!!!