Slider change interactions - is it possible to recreate this?

Hey Webflowers,

In an effort to improve my webflow interaction skills, I decided to try to recreate a slider similar to this one I found on the InVision instagram:

I’ve been tinkering away with the native slider component in Webflow to try and get the foundations working, but I’ve hit a roadblock.

Are there any WF interaction experts that might be able to see where I’m going wrong?

Project share link:

Where exactly? I have done a similar slider, minus the hover “filling and zoom” effect, which I’m sure I can add easily, with IX Legacy, some years ago. I’m sure it’s even more doable with IX2.

Check this slider:



You’ll find links to clone the site in the page.

In a nutshell, you first need to alter the mask element so that you can see other slides than the active, then alter the size of slides, then use the special trigger for sliders.

Thanks @vincent
Specifically, the ‘hover filling zoom’ is the thing I’m trying to replicate.
I’ve tried it a few different ways now, and altering the mask element as you suggested has got me a step closer (I think?!) but I just can’t wrap my head around how to get the slides leaving the frame on the right to shrink from position absolute bottom right, but then also enter on the left from absolute bottom left which is what gives the smooth growing/shrinking effect.
It is also entirely possible I’ve overcomplicated something that is actually quite simple!
I’m pretty new to using interactions, and it’s the first time I’ve attempted using them with the slider component, so maybe my approach isn’t the correct one.

Hi @MissGilly - did you end up figuring out how to add the interactions on slide transitions?