A Fun Experiment with Swirling Text

I’ve had, for awhile, various ideas for doing the animation of text. Imagine (if you will), your user clicks on something on the page, and this cool animation of swirling letters happens, and the letters come together to for some paragraphs of text.

Then your user clicks a DONE button, let’s say, and those same paragraphs explode into a swirl of letters which now fly apart and disappear off the edge of the screen.

A few months back I started working on some code to do this. What I got done was JavaScript code that takes the text in the paragraphs and puts a special SPAN tag around each character in these paragraphs, gives them a special class name, and a unique id.

That is as far as I got.

Well yesterday, I decided to pick up this little project again and I surprisingly got a working example! Usually stuff like this takes a bit of debugging before it starts to cooperate with me!

Below, embedded on this blog post is the Pen that I created in Code Pen to do this.

It is just an experiment. But I think a successful one! Try clicking the buttons in it to see it in action. I designed it on my iMac and made no attempt to make it work perfectly on a mobile device. Again, it is just an experiment.

Anyways, enjoy!

See the Pen Formatting a Paragraph for Text Animation by Orville Chomer (@orvilleChomer) on CodePen.

Note that the DIV with the red border has overflow set to hidden. This is to keep crazy scroll bars from appearing while letters are flying around.