Hiding, retreating, breaking, swaying, blinking, tumbling text animation

Worried about licensing?

Do you have right license for your templates and fonts?

Head over to our partner Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

  • 50+ Million Assets with Unlimited Downloads
  • Templates, Addons, Fonts, Footage, Photos, Brushes, Presets & More
  • Full Commercial licensing for client work

Get ultimate peace of mind!

Get Started Now
animation Splitting.js text animation
Image: Hiding, retreating, breaking, swaying, blinking, tumbling text animation GIF

Here are a bunch of text animation that tries to imitate these actions. These animations were created by Ryan Mulligan using Splitting.js

  • hiding – the two tittles on top i is seen peeking from a line and then all the text rises up.
  • retreating – the text zooms out trying to show that the text is running away.
  • breaking – the text feels like its dropped and then it shatters into multiple pieces.
  • swaying – feels like the text is swinging to and fro.
  • blinking – a simple left to right blinking effect for the text.
  • tumbling – pretty much what you would expect to see when you put clothes into a washing machine, that effect is applied to all the letters in the word.

If you are having trouble with the pen, try the archived copy on GitHub

Text Actions Animation Snippet

See the Pen Animated Verbs III by Ryan Mulligan (@hexagoncircle) on CodePen.0

Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.