Custom Nav for slider with disappearing element

Hello, i’m trying to build a custom slider and i’m no coder (Using chatgpt to help me haha) but i’m a bit stuck. I’ve built this Slider Test (Webflow - Creature Media) which has the interaction i want with the “we” section at the start of each word appearing and disappearing (Although i’d like it to animate a bit nicer but beggars cant be choosers) but where i’m struggling is getting the active line to work as a slider nav and effect the slider that is shown. So I cant link them. the code i’ve been using is supposed to work using some index system but it’s not really working unfortunately.

Any help would be amazing! and I know i’ve probably explained this badly so any questions fire away!

this is the code that i’ve been using to create the interactions

.slider-line { display: flex; } { display: flex; } .slider-link { opacity: 0.5; cursor: pointer; } { opacity: 1; } .slider-we { display: none; } .slider-we { display: flex; }

You can actually achieve this without any custom code. And with only 2-3 lines of custom CSS you can animate the “WE” text block :wink:

I made a quick technical prototype of your case:
Read-only Link
Live preview

The tabs element automatically connects the tab-link-list with the corresponding elements below. When you click on a tab link it changes the content below. You can even animate the fadeIn/fadeOut of the images by selecting a tab link, then going to the interactions panel and select “Tab change” as trigger.

Animated “WE” text
I also animated the “WE” text. If its not clear to you how I did it by looking at the prototype, feel free to ask.

ahhhh thats epic! thanks so much man! there was 1 other thing i was hoping to achieve with this which was having it auto cycle through the different tabs (like the slider does). Do you know if this is possible?

1 Like

Managed to work it out and get it fully working! thanks so much for the help!