Has anyone created a slider (vertical) using TRIGGERS?

Hello everyone!

I need a slider, and a very unusual one. It’s not just “moving pictures” - it’s the structure of the page. And so the usual element of “slider” does not suit me. To be honest: it’s terrible (sorry webflow). I would like to create a slider the way I need it. That is, using triggers. Tell me is it possible? What triggers should I use? How to do?

And please don’t tell me that it’s impossible to create a slider with triggers. That would be terrible news…


I forgot to say something important: a slider that scrolls by scrolling the mouse wheel. DO NOT TOUCH! Scroll the mouse wheel. Is it possible to implement this in webflow? Use interactions 2.0 (new). Let’s forget about the old.

Its really hard to help you. Do you have any reference? (codepen or Site).

You talk about this trick?

-or- her you have a lot of examples:

-or her-

Share the one is ± close to your idea

Hello, @Siton_Systems !

I’m talking about something like this: https://varagon.com/

Yes this is all possible. You would need to set your divs to 100vh to get it to fill the screen and then use page trigger affect. so that when you are scrolling you get the similar effect. To be honest, it would be a lot of trial and error, but doable.

It is not a slider, but a transition effect between divs.

1 Like

Hey, @QA_Brandon

I knew it wasn’t a slider, but I didn’t know how to describe it. Thank you very much, I will try it later :wink:

@QA_Brandon Still, I am sure that in the future I will have to create sliders. And I’d like to ask you if this can be done with webflow interactions (without third-party code)?

Yes. The backgrounds of each div is probably a 2-3 image slider with 100 or 90vh setup for them. That way they fit within the 100vh parent div. You just have padding setup for the interactions menu when you scroll over each section.

I don’t see any need for 3rd party code.

1 Like

@QA_Brandon Thanks so much. In theory, I understand everything, but practice is needed. Then I’ll go practice and try. And the transition between sections try to do. Thank you again :metal:

1 Like

You r very welcome.

Go have fun!

hello :slight_smile:

I’m on the same way, I need to reproduce this effect: https://fueled.com/ (scroll to the 3rd section in home )

i have 3/4 div that each one overlap the previeous scrolled div.

How can I achieve this goal? div2 that overlap div1 in the way that fueld.com do?

Thanks in advice!

@QA_Brandon You were right. It was very easy to do. But you’d be wrong. No need to use page trigger, then (slider) will not scroll up, only down. You must use the “scroll into view” trigger for each Div separately. And it will!) Once again I am convinced that Webflow is an extremely powerful tool. Thanks again!

hi @lebonWeb

If I understand you correctly, it is enough to put a higher z-index for the subsequent section. For example, the first section has z index 0 and the second has 2. Respectively have 3 of z-index equals 3 or 4

1 Like

@Bogette I am glad I could help. Happy to see it all worked out.

@Bogette: Here is a replica of Varagon.com, built in Webflow using Fullpage.js - https://webflow.com/website/fullpage-showcase

1 Like

Hi @Bogette, Glad I could help! It took awhile to get right but I basically looked at the original code on Varagon.com and replicated their page structure (more or less). Each section has ‘slide-out-holders’ which are used for the scroll transitions and then there is a global ‘slide-out-holders’ div which is fixed for the hover interaction. I also found that using ‘scale’ for the ‘slide-out-holders’ was extremely buggy on Firefox which is why it’s using ‘move’ instead’…

Lastly, I noticed that when I clone my original project (the project showcased in a clone), the third section doesn’t respond properly when scrolling from section 4 to section 3. I haven’t spent time trying to debug this but I’m sure it’s a relatively simple fix. Let me know if you have any other questions.

Hi @Bogette,

@Cjh solution with fullpage.js is the way to go for this type of effect.

Just for future reference if you need to make a custom slider (or someone else) you can have a look to these video tutorials I made recently.

It gives you a bit more flexibility but it still needs some improvements.

2 Likes

Hi again, @Cjh

It’s really simple solution. I created a much more complex solution inspired by Varagon, but I had to remove It because of the difficulty of creating a reverse scroll (I’m not friends with the code). And yet I still need your help.

I copied your sample (sorry, but I want to see if this will actually work. Your sample is the basis for me). But faced a problem. There is no ScrollIntoView animation. When you have free time, could you please see what the error was? This page is completely copied your sample.

Look at the page itself. I climbed in all the elements, all the elements rechecked, their animations, but I do not understand what the problem is… http://warth.webflow.io

https://preview.webflow.com/preview/warth?preview=d9d9b5c7bced48eb6111d7abd4b3b089
If you find some free time, I would be very grateful.

1 Like

Hi @Bogette,

I’ve showcased a much cleaner version without the 3rd slide bug: https://webflow.com/website/Advanced-Slider-with-Fullpagejs?s=advanced-slider

I also removed unused interactions, styles, etc.

It should now be very easy to understand but do let me know if anything isnt clear.

@Cjh Hey, I got in touch with you again to tell you that I was able to recreate that slider. Of course, I still don’t understand how to implement reverse scrolling, but I just copied everything exactly and it worked. It doesn’t matter that I don’t understand how it works, it’s important that it works.

But I’m contacting you on a slightly different matter. I recently subscribed to your profile in the Showcase. You create amazing works, and you’re a code guru, that’s a priori. And I would like you to give me the right direction to implement text animation, because I do not understand the code, all my knowledge ends with the definition of the body tag. If you could help me, that would be amazing.

Remember the text animation of titles on varagon? Once I created a sample and share it with you: http://just-text.webflow.io/

You see, I need this text to be editable. By “edit” I mean add an unlimited number of spans visually, in the Editor.

I need this animation for a website on Wordpress. And it is important that the user can edit and add these spans. Any number. Maybe… a thousand. Visually

Surely there is some script that helps in this? I just need your opinion.

That is, now the user is limited in the number of spans. It can’t add out visually. If I created 10 spans (words) and the user adds 11 then this eleventh word has no animation.

It is necessary that each new, visually created word is automatically formed in the span with the same animation.

It’s difficult to explain. If you don’t understand me, please let me know

Is this for Wordpress or Webflow? To clarify, you’re using Webflow generated code for animations on a Wordpress site, correct? If so, where will the actual editing take place by your client?

PS - So not to bother everyone subscribed to this thread, send me a PM here on the Forums.