Image slider with fading content

Hey community!

LONG time browser, first time poster. Absolutely loving Webflow and the possibilities are nedless however I’ve hit a roadblock. When I do, it usually takes me a couple of days to solve the problem from online tutorials or browsing this forum however not this time! :frowning:

I’m building a folio page for a client similar to this one:

At the moment, I’ve developed a 100vh/vw slider with a header that stays the same even when sliding. However what I can’t figure out is how to have the text change per project (in the footer, which I have inside the slider, the Project Name and 1:15) upon slide change like in the example above.

I’ve been trying to play with an element trigger on slider change but with absolutely no luck.

I have attached a screenshot from Webflow with a dummy image below:

Love to hear back from anyone who can help!

Here is my public share link: LINK
(how to access public share link)

Spent the night trying to work out interactions with slider changes. I can get the text to fade in but not out, and I can’t get it to fade in every time the slide comes in.

Ugh! Feel like I’m getting close…! Any help would be greatly appreciated! I’ll buy you a beer!

Hey man! You are using the “Slider change” function right? I mean, with that, it should be really easy.

Hey, thanks for the reply! I am, here’s my site… I can’t get it to work well at all. I know there’s one small error I’m probably making somewhere, but I can’t work it out!

So can you describe exactly what it is you wanna do? Do you want the text to be fixed and change like that? Is that it?

Hey Tore,

Yep, that’s pretty much it. I was thinking of having the text fade in and out once the slide transitioned to achieve a lesser version of the effect shown in the example I provided…

Hello @James_Fazzino,

Hey I took a look at your designer and I couldn’t click on the section for left and right arrows so I changed the z index for both right and left arrows to 999 and it was sliding, I think they way you want it, now with that taken care of you can modify you animation to what you want. I’m not sure if that is what you were looking for, but based on your example is what I thought you needed. Anyway, I hope this helps. Take care.

Hey Pablo,

Really appreciate you taking a look. I just had them hidden for the time being as I was going to try and promote clicking and dragging.

The main thing I’m after is the project name and the number (1:15) at the bottom to fade/go away when the slide transitions and for the new information (project name and the 2:15 for example) to fade in once the slide has settled. I’ve tried the slide transition interaction however can’t get it to work (especially get it to work when you revisit the slide).

So the naming of the project and having it transition like in the example above is what I’m after.

Thanks again for taking a look. :slight_smile:

Hey @James_Fazzino,

So I think I got it to work the way you want it. So you have to select the slides as the element trigger and select as the slider change. Then you have to create two timed animations one for when slide into view and another one for when slide out of view and set both of them on loop. look at the pictures below. Let me know if you have any questions. I hope this helps.

Wow, that actually worked. I was adding two states on the ‘slide out’ animation and not one.

However that kind of lead me to another problem of not having the text at the bottom of the slide move at all when say the first four images in the carousel are part of the same project (the project name and title wouldn’t change at all) but say on the fifth-seventh slides it needs to say something else (I would then use this interaction here) like in the example link up top.

I actually don’t think it’s possible without custom code to make that happen and unfortunately I’m probably not at that level yet. :frowning:

Thanks so much for your help! :slight_smile:

1 Like

If anyone does have any further tips on how I can get this to work though (where the description stays the same for four slides and changes when a new slide comes in), please let me know. :slight_smile: