02.Mar.17

Pantaley Stoyanov

Pantaley Stoyanov

CSS animations triggered when elements are visible on-screen

There are great ideas and examples on the internet for CSS animations, but not so many explain how to make loading page elements appear smoothly and not before they are visible/scrolled

It’s amazing how the following simple tricks can turn a page from boring and dull to a champion.

The goal is to create a way to implement or test CSS Animations on pages by people that are not developers, such as UX designers and even regular users.

In our case we are using CSS library Animate.css which will add a bunch of predefined animations like “Fade In”, “Slide In”, etc., but you are free to use others or do your own using @keyframes. We will need jQuery for simplicity, but everything can be implemented in pure JavaScript.

Adding the Animate.css, gives you a way to trigger animations with adding two HTML classes without having CSS knowledge – “animated” and “animation name”. The first class triggers the animation and the second - the animation type. The unfortunate issue here is that they all start as soon as the page is loaded. So, we are at the point of having a cool and powerful tool, but somehow yet unpractical.

We need the option to easily control the animation’s timing (delay) and to execute it only when the element is visible on the screen, as we don’t need animations that cannot be seen.

How to control animations and delays easily

To do that instead of adding classes like in the Animate.css library we will add custom attributes, for example:

Instead of:

<p class=”fadeIn animated”>

We will add:

<p nvs-animation-delay="250" nvs-animation-type="fadeIn">

Now, with these custom attributes we have the needed control and anyone with basic HTML knowledge can use and be creative.

How to use custom attributes for configuration

First, we will add styles. In our case, I wrote LESS, but it can be easily converted to pure CSS or even to Sass. After that we will add JavaScript functionality where needed.

The LESS code

I’ve decided that it’s pointless to use JavaScript for the delay functionality as no one will need perfection of a millisecond.

As a result I decided to create an array of time steps @animation-ms. First, in every 50ms and then in 100ms until 2000ms (2 seconds). The idea is that the designer will create animations with delay in some patterns and won’t need countless variations, but still be flexible if there is a need.

After that we need to add styles to all nvs-animation-delay attributes. In our case we use loop to iterate through the @animation-ms array. If you've never used CSS pre-processor, this can be a little bit overwhelming, but if you convert to CSS you will see that we are doing it just to minimize redundancy and it’s not black magic.

To create the actual CSS, we need to initialize the loop (line 18).

The styles below hide the elements before the beginning of the animation and disable the animation for small devices.

The JavaScript code

We need to write the JavaScript code that finds nvs-animation-type’s values and adds them as classes when the element is visible on the screen.

The function nvsAddAnimation() adds the needed classes, while nvsOnScreen() checks if the element is on the screen.

Conclusion

Adding animations will breathe life into every page. Everything can be changed or extend to fit your needs. Just make sure not to overuse it, because it is considered bad practice.

Happy animating!


Need consulting on this topic?

Yes No

Thank You! We will be in touch.