Tag Archives: codePen

A Fun Experiment with Swirling Text

Share this:  

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.0

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.

Entity Render Experiment in CodePen

Share this:  

Here is a little something that I’ve been messing around with in @CodePen. It renders the block diagram of a “data model.”  If you’ve ever used a modeling tool like Erwin this will look familiar…

Screen Shot of Model Render Demo

This is an experiment in rendering a lot of UI elements (entities) without having poor performance. In that, it will only render to the DOM entities that can currently be seen in the view port.

Right now, by default, it generates 200 entities. Try 2000 or 20000, or any other positive integer value, and see how it performs!

There are still a few bugs in it (its rendering too many entities at a time for example), but I think it proves its certainly possible.

You can try it yourself on CodePen here:     https://codepen.io/orvilleChomer/pen/NyXppd

Let me know what you think.