Any way that Webflow can replicate the slide listing as in this website?
Hey!
Yeah you can do it, but not using the standard webflow “slider” block. It’ll need a fair amount of messing with interactions and placement…
In essence, If you’re going to do it like the example site (fullscreen slider only on front page), i’d do it something like this:
- use divs to create your individual slides & content (position: fixed, height: 100vh etc)
- leave your first slide untouched, but style the other slides with transform (move right: 100%), and set display to none
Then you can create the interactions for your slides:
So slide 1 will have a text link to slide 2 (as in the example). Therefore clicking on this link should make slide 1 move to the left and off the screen, whilst bringing slide 2 into view from the right.
The interaction would look somethings like this (call your interaction “slide 1 link” or something so you can keep track of things!):
ON CLICK:
Slide 1:
Move-left: 100%, time: 500ms (or whatever time you decide)
then display:none, time: 0ms
Slide 2:
display: block, time: 0ms
then move-left: 100%, time: 500ms
Next, slide 2 will also have a text link to slide 3 so we would apply the same principle to this interaction. Create a new interactions (“slide 2 link” or something similar!):
ON CLICK:
Slide 2:
move left 100%. 500ms
then display: none, time: 0ms
Slide 3:
display: block, time: 0ms
the move left 100%, 500ms
Apply the same principle to slide 3,4,5,6 etc etc and you’ll get there! It ain’t simple, but it’ll do the job!
1 Like
That’s a really good in-debth explanation. Thank you.
I actually did it on my own yesterday. I’ve become a little rusty on CSS, so I made a simpler version, with fade in/fade out. Here is the end result: http://pixelinspired.webflow.io
As a general note, there are, however, some weird glitches that I notice every time whenever I animate something with Interactions. Just before the next slide settles in, after the link is clicked, the fonts appear thinner for a slight moment, and then get back to normal. Also, that thin 1px border above the link gets dashes instead of solid. But that’s something not connected with the original topic. 
Nice!
Looks good with fade-in / fade-out
I get the same behaviour, also with zoom in/zoom out interactions…I always thought it was just me!!
I have the feeling this behaviour is something that Webflow should take a look, because it happens on all my interactions too. So it might be on a Webflow level, in a way that JavaScript is integrated into the system.
1 Like
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.