Dec 21, 2019

Sliding Tabs Menu

A sliding background element placed behind the tabs menu. No custom code, only IX.2

A simple No-Code solution to a sliding tabs menu animation.

Using Interactions and positioning the sliding element absolutely behind the tabs menu, we can create an effect of sliding background.

Important points:

The wrapping tabs element must have any positioning bside 'Static' (so the moving background wrap element will position relative to it)
The sliding background element must have a constant width, which is equal to the menu link width.

The videos Kurzgesagt channel creates are so beautifully animated, that I almost forget that I learn so much while watching them!

Cloneable

CMS

JavaScript

A 3d slider with video items, plays and pauses on click & slide change.

Cloneable

JavaScript

CMS

A clonable for creating an Alphabetical glossary

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.