Animations to Take Your Basic HTML Template to the Next Level

Animations to Take Your Basic HTML Template to the Next Level

Animations can lift your website presentation to the next level. The right animation will have a positive impact on your site’s UX, reinforcing each interaction and creating a memorable experience. On the other hand, poorly chosen animation can ruin the experience, confuse users, and potentially dampen performance too.

In this article I will share with you some practical animation examples and techniques to make your basic HTML web page shine like a star.

Categorizing Animations

To make it easier to work with animation, I first like to classify and organize the different facets. Each animation will have five parameters, with a range of potential values:

1. Type: single, group, related
2. Sequence: sequential, random, simultaneous
3. Event: load, scroll, click, hover, resize, etc.
4. Size: small, medium, large
5. Repeat: no-repeat, repeat

Note: this is not a W3C standard, this is my personal system to keep things clear.

Keeping these parameters in mind will help us make better animations. We’ll walk through each of these five things one by one. After that I will show you how to animate anything on the web using jQuery in combination with animate.css.

1. Type

There are situations when you’ll need to animate one single thing.

Then there’ll be times when you’ll need to animate grouped elements–siblings–for example: icons, images in a gallery, columns in a single row etc.

Or you might need to animate related elements; ones which are related to one another without being direct siblings.

 2. Sequence

The sequence of your animations can be controlled by animation delay. The delay might time things so that your animations happen sequentially. You might want things to happen randomly, or perhaps you want two or more elements to animate simultaneously. 

3. Event

Animation can take place on any known event in the web world: on page scroll, page load, click, hover, resize and so on. The event type doesn’t matter, as long as each animation is planned and executed on the correct one. In the demo we’ll walk through in a moment, we’ll be using page scroll, triggering animations on elements when they enter the viewport.

4. Size

Size is a relative term. The “size” of an animation can be interpreted as being related to its duration, its physical dimensions, or the value of its movement. The speed at which you animate a small element will likely be different from the speed at which you animate a larger element. It’s all down to interpretation, but “size” is important to consider for the end result.  

5. Repeat

When planning animation you should also plan the animation cycle; how many times it should be repeated per event.

Adding Animation to a Basic HTML Page

We’re going to apply a range of animations to various elements on a (long) page. We’ll write some jQuery to calculate when an element enters the viewport, then we’ll use that code to add a class of animated to the element or elements in question. This will trigger the animate.css library, executing whichever animation we want.

You can download the source files from the repo, alter any values you wish, and use in your own basic HTML templates. Or, you might prefer to fork the pen. Whatever your preference, below is an explanation of what’s happening.

What is Happening?

Let’s begin by looking at the actual demo, so you know what you’re working towards:

So, to start with we’ll need four jQuery functions which we’ll put in the controller.js file, or in the JS pane if you’re using CodePen. Let’s take closer look at each one.

isInViewport(h);

This function detects if an element is in the window’s viewport. It accepts one parameter (0-1) that tells the function the minimum part of the element that should be in viewport. By default this is 40% of the element (0.4). Here’s how the whole thing looks:

jQuery.fn.isInViewport = function(h) {
    var elH      = jQuery(this).outerHeight(),
        scrolled = jQuery(window).scrollTop(),
        viewed   = scrolled + jQuery(window).height(),
        elTop    = jQuery(this).offset().top,
        elBottom = elTop + elH,
        h        = (typeof(h) != 'undefined' && h.length) ? h : 0.4;

    return (elTop + elH * h) <= viewed && (elBottom - elH * h) >= scrolled;
};

randomDelay

This next function is to set a random animation delay to a given set of elements. It’s used for grouped animations and accepts three parameters:

1. children: the selector of elements set
2. maxDelay: maximum animation delay
3. minDelay: minimum animation delay

Here’s what it looks like:

jQuery.fn.randomDelay = function(children,maxDelay,minDelay) {
    jQuery(this).find(children).each(function(){

            var item = jQuery(this);
            var randomDelay = Math.round(( Math.random() * ( maxDelay - minDelay ) + minDelay ));

            item.css('animation-delay',randomDelay+'ms');

        });
}

sequentialDelay

This function is very similar to the previous one, except it is used to add sequential delay to a given set of elements.

It takes two parameters:

1. children: the selector of elements set
2. delayGap: minimum constant value of delay between elements in the set.

Here it is:

jQuery.fn.sequentialDelay = function(children,delayGap) {
    jQuery(this).find(children).each(function(index){

            var item = jQuery(this);
            var sequentialDelay = delayGap*index;

            item.css('animation-delay',sequentialDelay+'ms');

        });
}

animateIfInViewport

This last function is quite meaty. It adds the animated class to the targeted element or group of elements and sends the animation data.

jQuery.fn.animateIfInViewport = function(children) {

    var element = jQuery(this);

        if (children) {
                element.find(children).each(function(){
                var child = jQuery(this);
                if(child.isInViewport()){
                    child
                    .addClass(child.data('animation'))
                    .addClass('animated');
                }
            });
        } else {
                if(element.isInViewport()){
                element
                .addClass(element.data('animation'))
                .addClass('animated');
            }
        }
}

Apply Functions

In this example I’ve used two events for animations: page load and page scroll. Scroll down beyond the four initial functions and you will see them in action, nested in an “immediately invoked” (function($){...})(jquery) block. For example:

$('.section-title').each(function(){
        $(this).animateIfInViewport();
});

This says: for each .section-title, add the animated class when it enters the viewport.

If you take a look at the markup (in the index.html file) you’ll see that each element we want to animate has a data attribute attached to it. In the case of the section titles, you’ll see data-animation="fadeInRight".  This corresponds to the fadeInRight animation set up in animate.css, all done with CSS of course.

So when the section title scrolls into view, the animated class is applied to it and the fadeInRight animation is executed.

Here’s another example:

$('#row-bounceIn')
.randomDelay('.col',500,200);

This looks for the element #row-bounceIn, then when it enters the viewport it takes the children (.col in this case) and adds the animated class. It also applies a random delay to the animation, somewhere between 200 and 500 milliseconds. 

Check the markup and you’ll see those .col elements have a data-animation="bounceIn" attached to them. They therefore (see if you can guess) bounce in according to the rules in animation.css.

Tip: Modify Animate.css to Suit Your Needs

You can modify the animation rules in the animate.css framework, and I highly recommend to do so. Think of animate.css as being your starting point that needs to be polished. For example I always like to change the timing function and reduce the translate amount in the CSS animation rules.

Here’s everything together. Scroll down and see everything animate as it enters the viewport.

Conclusion

When you put all these things together you can build amazing HTML templates with eye-catching animations.

You are free to use any file and code snippets from these demos in your projects without restriction. You are also free to modify anything in the given example files. And you are welcome to make suggestions and recommendations in the comments section below. Thanks for reading!

• 
  Animation
  Get Started With Web Animation
  Ian Yates
• 
  Animation
  Adding Appeal to Your Animations on the Web
  Donovan Hutchinson
• 
  Chrome DevTools
  How to Use the Animation Inspector in Chrome DevTools
  Kezz Bracey
• 
  Accessibility
  A Guide to Creating Accessible Animations
  Anna Monus
• 
  CSS Animation
  15 Inspiring Examples of CSS Animation on CodePen
  Donovan Hutchinson