May 21, 2020
Back to all Elements
Using the native Webflow interactions to move the text elements up and out of the "mask".
To create a "mask" simply wrap all the changing text elements with a div and give it overflow: hidden.
The interaction is a "Page load" interaction, which means that when you copy the elements it will not copy along. To solve this you can apply the interaction temporarily as a "Click interaction" to the element you copy, and after you copy, replace the click interaction with a "Page load" interaction.
.png)
Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...
A 3d slider with video items, plays and pauses on click & slide change.
.png)
A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.
.png)
.png)