White Arrow icon
Back to all Elements

Swapping Text on Scroll

Swapping a sticky element on sections scroll.

Left side - Photos, or any other static element.

Right side - Swapping Text, Headline, Button or any other element.

You can clone this project and replace the text elements inside the 'swapping-div' with anything you want.

Preview:

browser mockup
Share:
Heart icon

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:

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

Desktop Grid, Mobile Slider

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.

Read more
Blue arrow iconWhite Arrow icon