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:
https://www.instagram.com/p/Bz1AGoSFYI7/?utm_source=ig_web_copy_link
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?
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:
Here:
http://sab.webflow.io/interactive-elements
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?
Hi Vincent! I have a question about this slider. I cloned the project to look at the interactions but to my surprise I could not find any! Where is this animation defined in the cloneable? I’d greatly appreciate it. Thanks in advance!
Hahaha Oh well, they were IX1 at the time… You should remake it with IX 2 and the slider trigger.
But anyway to answer, on this element:
You have to activate IX Legacy first. Go to the IX panel and at the very bottom you can turn this on:
Then scroll to this:
And here’s a UI you may have never seen:
