Custom Slider

A small upgrade to the normal behaviour of the Webflow Slider Widget.

Cloneable

Design

Tricks

Using the Slide-In and Slide-Out interactions, and changing the Mask original size, I upgraded each slides behaviour to grow and shrink.

You can clone this project and copy the slider for any use...

Try avoiding using "Transition: All". It is heavy on the browser's engine.

Cloneable

JavaScript

CMS

A clonable for creating an Alphabetical glossary

Code

Tricks

JavaScript

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Cloneable

Tricks

Layout

Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.