ScrollTrigger | Carousel with image captions in fixed position?

[KenW]

Hi all!

 

I've made a carousel where you can scroll through a series slides, each with its own image + captions. For each slide, I set up two captions (one on top and another at the bottom) and set them in a fixed position so that the captions remain in place as you scroll through the carousel. However, even though the captions stay in place, all the text is overlapped on top of each other, and I can't figure out how I can get the fixed captions to update when changing slides. I'd be eternally grateful if someone out there can help me out!

I've included a link to a codepen I've been racking with for a while now.

 

Thanks all!

See the Pen zYMEJbe by kenhimself (@kenhimself) on CodePen

[GSAP Helper]

Hello Ken, welcome to the GSAP forum.

It looks like you forgot to add your JS code in the codepen example. We can not really give any solid advice without seeing what it is you have tried.

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Rodrigo]

Hi @KenW and welcome to the GreenSock forums!

 

You might want to check these threads:

 

Finally check the solution by @PointC and the video @Carl made about it:

 

Hopefully this helps.

Happy Tweening!