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