CSS Trailing Title Effect was originally published on Jun 18, 2019 and has recently been updated on Aug 6, 2020 to reflect emerging trends.
Codrop’s CSS Trailing Title Effect
The text trail layout is made by using a flexbox container that will make the height of each text container shrink so that all fit into the viewport (height). Some of the texts will be visible in full height (we set them specifically to flex: none). Using blend modes and rotations also creates an interesting look.
Text Trail Effect by Codrops
This effect is possible thanks to modern CSS properties like
flexbox, viewport sizing and the TweenMax JS library. It’s important to keep in mind this effect will only work on modern browsers. It uses highly experimental modern CSS properties that older browsers like IE might have issues with — but really, who uses IE now-days?!
Modern CSS Properties for the Win!
Check out some of these other cool CSS effects using modern techniques:
- Modern cursor trails that are completely customizable with CSS (also see, Sparkle Trail and Dust Cursor)
- Great article on using multi-step animations and transitions
Did you find this useful?
It’s a really cool effect — no doubt. With all fancy UI things, I ask myself is it useful? Does it provide a benefit to the end user, help convey information in an interesting and informative way? Maybe. The answer depends on the project. I’d love to hear how others have used the CSS trailing title effect in their projects or what they think about it in the comments below.