May 21, 2020
White Arrow icon
Back to all Elements

Changing Text

Change text in a sentence/headline with Webflow's interactions

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.

Preview:

Share:

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

Might also interest you:

3d Video Slider (swiper.js)

Cloneable
CMS
JavaScript

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

Read more
White Arrow icon

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
White Arrow icon

Dynamic Height

Code
Tricks
JavaScript

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

Read more
White Arrow icon