Slideshow Mask "active" Styling

Design help General
1

Hey guys,

I’ve created a slider in webflow and have styled it accordingly so the mask overflow is visible.

Is it possible to target the overflown content and drop it’s opacity similar to this screenshot?

Slider_screenshot
Slider_screenshot3338×1922 2.15 MB

Any suggestions would be a huge help. Many Thanks!

https://preview.webflow.com/preview/slideshow-382501?preview=11c83e3c054410b6871bb6e6cd8874e6

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Yes. By using Interaction with a trigger dedicated to Slider elements’ content.

Look on this page http://sab.webflow.io/interactive-elements and search for this element:

http://vincent.polenordstudio.fr/snap/iujm8.jpg

(You can clone this site, follow the links on the top)

To make this slider I used the slider trigger in IX Legacy (1.0). But such a trigger exists in IX2 too. Select a slide, then create an interaction, when you’ll be ask for what kind of IX you want to make, select the slider one:

http://vincent.polenordstudio.fr/snap/9hg4g.jpg

…then you will create animations for when the slide slides in, and when the slide slides out.

–

Here with IX1 I had selected the slide content and made an interaction with the slider trigger:

http://vincent.polenordstudio.fr/snap/ddsd2.jpg

… and had defined an initial apparence with an opacity turned down, a rotation and a scale

http://vincent.polenordstudio.fr/snap/zoeb8.jpg

And the interaction consist in turning those parameters to default when the slide comes in, and revert them when is goes out

http://vincent.polenordstudio.fr/snap/pi8pr.jpg

3

Wow, this is a really great resource.

Thanks so much for sharing this with me Vincent.

That effect is exactly what I was looking for!

Cheers,
Kane

4

@vincent is there a way to change the box-shadow on the current slide?

5

Shadow is not an option in IX, so the only way is to design an element to carry the box shadow, and use the visibility Action to control its visibility depending on the current status.

6

Any chance you can record a loom or reupload the images? I really need this but can’t follow through the tutorial you posted above because the images are gone. Please help

7

Those images are L O S T.
Can you tell me about what you’re aiming for, give me an example of the design and a read only link, and I’ll for sure help you with it.