On-Scroll Expanding Image Animation within Typography

An animation experiment where we expand an image within some typographic element on scroll.

Today I’d like to share a little effect with you that got inspired by this video of a billboard ad:

A video expands and pushes some text away. I thought this would be fun to experiment with and try out different typographic layouts to push things around, on scroll.

So here’s my attempt (highly experimental). Of course, these kind of effects and layouts are kind of bound to how big the words are. Every layout is unique and depends on this context, so probably this would be interesting for big type that we can control with relative sizing. Responsiveness is quite tricky here.

Hope you like this little demo and draw some inspiration from it!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.