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.
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.
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.
@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!
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
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.
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
@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.