Vertical Image Slider with changing Text

[MikelTheSaiyan]

Hello everyone,
This is my first time writing in this forum and I have only recently started using GSAP.

I have a requirement in a project and am stuck. I hope you can help me.

 

Similar to the codpen example below, I have a vertical image slider. Each image also has a text, which can be of different lengths.
 

As in the example mentioned, I would like the text to be displayed or exchanged for the corresponding image. In addition, however, the image should run across the entire width of the screen and the text should be positioned centrally above it.

 

So that the text can always be read, it should also have a white background, which should be fixed in the middle.

 

Do you have any ideas on how I can implement this with GSAP?

See the Pen 34482ffeae2fb5872d117934fcff705c by akapowl (@akapowl) on CodePen

[GSAP Helper]

Hi @MikelTheSaiyan and welcome to the GSAP forums!

 

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[GreenSock]

That demo uses very old versions of the tools - here's an updated one that you can fork: 

See the Pen mdoKXZd?editors=0110 by GreenSock (@GreenSock) on CodePen

 

I wasn't quite sure what GSAP-related question you were asking. It sounds like maybe you just want to restructure the CSS and/or HTML to make the images full-screen, right? We're happy to answer any GSAP-specific questions here (please read the forum guidelines) - do you have any of those? Maybe start by removing GSAP/ScrollTrigger completely from the equation and just focus on adjusting the CSS/HTML to get the look that you want, and THEN start trying to do the snapping/animating and if you get stuck, feel free to post back here with GSAP-related questions. 

[MikelTheSaiyan]

Thank you very much for the answer and the updated demo.

Basically, that's what I'm looking for. As you have already noticed, I still have HTML/CSS problems that I have to solve somehow.
Another problem I notice with the demo is that the text disappears if the scroll position is outside the section with the "container" class.
Is it possible not to hide the last active text as soon as I leave the section, whether above or below?
The text should only update when I switch from one image to the next.

[GreenSock]

26 minutes ago, MikelTheSaiyan said:

Is it possible not to hide the last active text as soon as I leave the section, whether above or below?
The text should only update when I switch from one image to the next.

You can pretty much do anything with ScrollTrigger/GSAP, sure. I'd recommend giving it a try and then instead of listing a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow), just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 🙂

 

Before you know it, things will fall into place one at a time.

[MikelTheSaiyan]

Sure, I've updated the codpen:

See the Pen zYbaaNd by MikelTheSaiyan (@MikelTheSaiyan) on CodePen

 

As you can see, the text only appears when scrolling as soon as I reach the container.
I would like the 1st text to remain visible even if I scroll out of the area.

 

[GreenSock]

1 hour ago, MikelTheSaiyan said:

As you can see, the text only appears when scrolling as soon as I reach the container.
I would like the 1st text to remain visible even if I scroll out of the area.

Sorry, I don't understand - you want only the very first block of text to remain ALWAYS, but the 2nd, 3rd, 4th, etc. would fade in/out? So you'd end up seeing the 1st text on top of the other text? I must be misunderstanding because that seems like it'd be quite unreadable. 

 

Please be very specific about what your GSAP question is and we'll do our best. Keep in mind that these forums aren't really for creating custom tutorials or accepting a list of requirements and then building it for you, but we're happy to do our best to answer GSAP-specific questions for sure. What have you tried so far? 

[MikelTheSaiyan]

No, I'm sorry, I worded that wrong. As soon as I scroll within the container, the text should be replaced by fade in/out, as it already happens correctly in the example.

However, if I am above the container, the last active element should remain visible. In this case, the text of the 1st element.

It currently disappears when I scroll out of the container.

[GreenSock]

You can use conditional logic to do whatever you want. For example, if you don't want the animation to happen to the last item when scrolling past it downward, or to the first item when you scroll all the way back up, you can do this: 

See the Pen zYbabjb by GreenSock (@GreenSock) on CodePen

 

Please give it a try, and then if you get stuck and still need help, share an updated CodePen with a very specific question and we'll do our best to help.