FlippingText.js: Create a Ticking Intro Animation for Your Typography

by in Tutorials on 28th Jan 2014 · 0 Comment

I love flat design. It allows us designers and developers to be able to focus on content and typography instead of spending our time aligning pixels for elements with no utility. Today, I have decided to write a plugin called Flipping Text that will create a ticking intro animation for your typography for your website.

I believe typography will play a big role this year, and this will be another option for you to spice up your website's typography. Let’s look into all the features and technical problems I faced during the development.

Note: This plugin has been tested on Chrome, Firefox, Safari, both on desktop and mobile. This has not been tested on IE.

FlippingText.js: Create a Ticking Intro Animation for Your Typography


How to Create a Ticking Intro Text

How does this work?

The concept is extremely simple so how hard could it be to develop this. Turns out, it was pretty problematic. The concept is to count the number of characters in the container, append random characters for a certain amount of time and then show the real text and move to the next one.

The problem I encountered was that I was unable to reliably execute each JavaScript function in sequence. Since I let users control the speed and the number of ticks, the execution needs to be extremely precise down to the millisecond. If you have read my previous tutorials, I have discovered that I can execute function in sequence using setTimeout function provided by the JavaScript library, but as it turns out, setTimeout is too unreliable to use without any workaround. The random text sometimes ended up replacing the real text causing the content to be unreadable. Also, browsers tend to stack up all recurrent executions and fire them all at once when the user returns to the page causing the timer to go crazy and break the sequence.

In order to solve this, I had to rely less on the timer and store the real text using the data attribute instead so that no matter how screwed the timer is I can always replace anything with the real text stored inside the character’s data attribute when each loop ends. This allows you to control how fast the ticker goes, down to the millisecond without destroying the timer.

How-Tos

Firstly, make sure the latest jQuery library, available here, and jQuery.flipping_text.js, found here are included in to your document’s <head>.

Once that is done, follow the HTML markup shown below:

HTML

<body>
  ..
  <h1 class="intro">...</h1>
  ..
</body>

Now, all you have to do is call the function as follows:

JS

$(".intro").flipping_text({
    tickerTime: 10,
    customRandomChar: false,
    tickerCount: 10,
    opacityEffect: true,
    resetOnChange: false
  });

The plugin will automatically count the characters in the container and apply the effect automatically. Let’s check out all the options available:

  • tickerTime: You can define how fast the ticker changes characters in milliseconds here. The default time is 10 milliseconds until another character switches in.
  • customRandomChar: With the default settings, characters within the “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789” string are used to create a randomize effect. To set your own, you can define them here.
  • tickerCount: This option will let you control how many times the characters are replaced until the real text is displayed. The default value is 10.
  • opacityEffect: By default, the plugin will add a fade-in effect to the ticking character. To turn it off, toggle this option to false.
  • resetOnChange: This is a fallback function when you want the text to stop animating and fallback to displaying the text normally. The reset will happen when the user changes tabs. The default value is false.

Animating each text in sequence

With this plugin, you can animate each text in sequence by simply using the data-delay attribute to define the time between each animation:

data-delay
In order to make things easy for you, the plugin will automatically calculate how long until the next animation starts without you having to sum the previous time up. Here’s an example:

HTML

<body>
  ..
  <h1 class="intro">...</h1>
<h1 class="intro" data-delay="1000">...</h1>
<h1 class="intro" data-delay="1000">...</h1>
  ..
</body>

Imagine you have the markup as follows and you want each header to animate in sequence every 1 second. With the code above, the first intro will animate immediately, the second intro will animate 1 second later and the last one will animate 1 second later after the SECOND animation is completed, so 1000ms delay will keep on stacking as you define them in order.

Conclusion

Now you will have a beautiful ticking animation on your website. Once again, I hope you enjoyed this tutorial, and thank you for tuning in. If you have something to show, suggestions or questions, please don’t hesitate to comment. Stay tuned for more tutorials in the future.

Pete is a Bangkok entrepreneur, a UI designer, and a Ruby on Rails developer. He is the founder of Bucketlistly.com and MyColorscreen.com. Other than his businesses, design and development, he also loves astronomy, indie music, and blogging.