© Faichi Solutions, LLC

Animate Your Site in Drupal 8

‘Animation’ is a term everybody is familiar with. It gives an object the ability to move, breathe, and settle

down. Animation depends upon number of frames being used, which results in a smooth effect. Let us revisit

the history of animation:

Currently we are using HTML5, JavaScript and CSS3 for animation. We have implemented these animations on

a Drupal 8 site. Here are some basics of animation.

WHY ANIMATION?

Increases the usability

Guides the user

Facilitates branding

Helps user visualize

WHEN TO USE ANIMATION?

To enhance design

Interactive web application

Storytelling

© Faichi Solutions, LLC

WHERE ANIMATION CAN BE USED?

Navigation:

This is the most important element of the website because it is consistent across all pages of your

website. Moreover it is the most frequently used element. Let us have a look at how navigation can be

implemented via animation.

Here, when the user clicks on the hamburger icon, the navigation bar slides down. Sliding down is the

animation use for navigation.

© Faichi Solutions, LLC

Registration / Subscription Form:

When clicking or hovering on a particular field, we can implement the transitive effect which grabs the

user’s attention. Highlighting a particular block, shaking the screen when invalid content has been

entered; these are a few examples of applying animation to the forms.

© Faichi Solutions, LLC

Related elements animation:

When you want to display the relative content while hovering on it, related animations are used.

© Faichi Solutions, LLC

HOW TO USE ANIMATION?

Interface Element Animation:

At times user repeatedly clicks on an object, unaware if the event triggered had any result.

For instance, in an e-commerce website if despite clicking on the Add to cart button the item being

added in the cart is not displayed to the user, it may result in bad user experience.

However, if by clicking on the button, we make a cart icon pop up and increase the count by 1; this

shows the user that the action has been performed successfully, thus avoiding the user to trigger the

same event repeatedly.

Waiting Animation:

If the content on your site is taking time to load, displaying a loader icon/sand clock prevents the user

from clicking further. This is not something new for Drupal 8, this has almost been a standard since a

long while now.

Decorative Animation:

Animation is prevalent when it comes to designing a website. But it is crucial as to how we are using it.

An example of decorative animation could be; when a user clicks on the hamburger icon, the

navigation panel appears and the hamburger icon turns into a cross icon.

Responsive Animation:

Animation needs space to perform. The play area on desktop is very large compared to the area on a

handheld device. There are two basic techniques to maintain the equilibrium between animation and

devices.

1. Focused Art Direction

It is a technique that allows you to decide which element is important to animate.

If there are large numbers of animated elements on your website, it is difficult for you to move an

element even 100 pixels on a handheld device. Thus it is imperative to prevent unnecessary

animations.

© Faichi Solutions, LLC

Hovering effect applied on desktop, but avoided when on a handheld device.

© Faichi Solutions, LLC

RESPONSIVE CHOREOGRAPHY

On a larger playground, i.e. on a desktop you have elements appearing in a linear manner. But the same when

implemented and converted for a handheld device, appear in a stacked fashion.

© Faichi Solutions, LLC

© Faichi Solutions, LLC

PERFORMANCE

Performance is always an issue. We can make your site animated and yet be exceptionally performant. There

are a few fundamental rules and principles that need to be followed to animate your site effectively

irrespective of whether it is built in Drupal 7 or Drupal 8.

Avoid the heaviest properties of CSS3

1. Translate 3D – Translate 3D is very heavy for the browser to render. While working on an X Y and Z

axis,

The Z axis property for a browser is very difficult to render. It will take time to render in-turn impacting

your site’s performance. An alternative for this is to use Perspective.

2. Backface (visibility) – A cube has 3 visible sides on the screen and the 4th face that is not visible. This

property can be made True or False. When made True, it suggests that when that object is rotated the

‘backface’ property shows the 4th side which is unnecessary. We can omit this property completely

since it is heavy for performance.

3. Will-change – This is a property available in the browser to indicate that something is going to change

on this property in future. If you have 20 properties on a browser that are being animated, out of those

20 if you put ‘will-change’ property for 5 of them; the browser will not cache them. This impacts the

performance, since it is not cacheable. For better performing website we need the elements to be

cached, thus making them easy to render.

Pick the correct technology

1. Use of CSS3 will always be high priority because it has all the properties needed for animation.

2. JavaScript significantly reduces performance. For instant, on a page load if there is a large JavaScript

file to be loaded for animation, it would hamper performance.

3. Use both (CSS3 and JavaScript) blended together carefully for animation.

Animate the most performant properties

1. Opacity

2. Scale

3. Rotation

4. Position

These four properties are adequate for most of the animations needed on your site.

While conducting performance impact analysis, we notice how many properties in a web page are getting

animated when the page is loaded. If there are 20 elements animated on a page during the page load, the

browser needs to load all those animations in the background and before the page loads.

© Faichi Solutions, LLC

Another way to go about it is to delay the animation. The page loads and only the most important elements on

the page are animated first. While in the background the rest of animations gradually load. This principle is

called OFFSET ANIMATION START TIMES.

ANIMATION IN DRUPAL

Drupal being a CMS, the content displayed on website should be animated, for effective presentation. And

there are countless ways we can implement animation in Drupal. Drupal 7 has these modules developed:

Animate.css

Block Animation

Wow.js

Fullpage.js (sandbox)

For Drupal 8

Either contribute

Use relevant .css or.js files

For a demo on how to implement animation in Drupal please visit:

https://www.youtube.com/watch?v=G2KF6wcjnDw