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:

browser mockup
Share:
Heart icon

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...

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
Blue arrow iconWhite Arrow icon

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
Blue arrow iconWhite 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
Blue arrow iconWhite Arrow icon