Any pointers?
Much appreciated!
Anyone?
Just need help with
(a) making the boxes loop
(b) creating the interactions for pushing the boxes up each time a box leaves
That’s an interesting concept! But I love a challenge.
I’m not sure that you’ll find this functionality within the built-in Webflow sliders, but I wouldn’t go as far as to say that you couldn’t recreate it yourself. Also, there’s probably a javascript slider plugin somewhere on the internet that would let you create something similar, but where’s the fun in that?
This might be a rather unconventional way (more of a hack) to get it working, but this is what I’d do.
- Create your master container and set your fixed height, with overflow to “hidden”. Set the container as a flex-box aligned vertically and centered.
- Add your tiles with all their content inside of the master container, preferably as link blocks so they have functionality. Set the width of each box to 100%. Set the origin points of each content box to the top (this will be important when animating the scale later). Also, make sure the tiles have different class-names (maybe “tile” for each box but assigned a unique combo class of “1”, “2”, “3”, and so on…)
- Create a “page load” interaction so the animation starts right away. Start with the first box, animate the Opacity from 100 to 0. Then add a “Scale” transform from 1 on the Y-axis to 0. Then add a “Show/Hide” keyframe to hide the box. If I’m right that should fade then move the following box to the top.
- In the same interaction, create the same keyframes for each box that you have inside of your container. Here’s where it gets a little… unconventional…
- Create a duplicate copy of each content box inside the container. 4 boxes? Then there should be 8 tiles. Essentially you’re duplicating all of your content again. When combined with your interaction, as the tiles will fade from the top, you’ll see the same tiles appear at the bottom again. But what the user doesn’t realize is that they’re not the same, but rather duplicate boxes.
- Once you get to the same spot that you started, use a “show/hide” interaction to immediately hide all the duplicate elements, while also revealing the initial elements, essentially bringing you back to the beginning of your animation. You’ve made a full cycle.
- Set the animation to Loop and assign it as a class-based interaction.
While I haven’t attempted this (yet), I believe this to be the proper logic required to get your slider working as intended. Lemme know if this works for you, I’d love to see the finished product!
Best,
Hunter
@Hunter_Reynolds…thank you so much for taking the time, mate!
I’m giving that a go right now.
Much appreciated.
OK so I’m 95% of the way there I think.
I tried your step 6 to hide the duplicate elements but that didn’t seem to work. Instead I just immediately re-displayed the original elements.
Almost there, but I can’t get the start of the 2nd loop to run smoothly.
Any hints?
Take a look at this:
You were really close. I think it simply had to do with the order of the key-frames in your animation, as well as your delay inside some of your elements which might have caused some problems.
ahh mate. thank you 
i owe you a beer 