How to Create CSS and Javascript Animations in Drupal 8

There are multiple JavaScript and CSS libraries on the internet. They allow you to animate parts of your site and make them look more attractive.

The Animations module makes it easy to include animations on your Drupal site. 

There's a full list of the animations on the module page, but they include such wonderfully named animations as swing, tada, wobble, jello, bounceIn, bounceOut, fadeIn, rollOut, zoomIn, slideInRight and more.

In this tutorial, I'll show how to install and use the required libraries and the Animations module..

Step #1. Download the libraries

The Animations module relies on three external libraries that we have to install.

• Create the /libraries folder inside the root of your installation (the root is where the /core folder is located)
• Create three more folders inside the libraries directory. Pay attention to the letter case in each directory:
  • animateCSS
  • typedJS
  • wowJS

• Download the animate.css library from its GitHub page.
• Place the zip file inside the animateCSS folder and extract it there.
• Leave the default folder name of animate.css-master and make sure it contains the animate.min.css file:

• Download the typed.js library.
• Place the zip file inside the /typedJS folder.
• Uncompress and leave this directory with the default name of /typed.js-master.
• Create the /js directory inside the /typed.js-master.
• Copy the file named typed.js located in the /src directory and paste it inside the new /js directory:

• Download the wowJS library
• Place the zip file inside the /wowJS directory
• Uncompress and leave this directory with the default name of /WOW-master
• Make sure the file wow.min.js is located inside the /dist folder:
• Remove/delete all zip files.

Step #2. Download and enable the module

• Use your preferred method to download the Animations module. I’m using Composer:

composer require drupal/animations

• Click Extend, enable the module and then click Install:

Step #3. Configure the module

Now the module has been enabled and all libraries have been put in place, it’s time to configure the module.

• Click Configuration, Configure Animations (DEVELOPMENT section):

If everything is OK with the folder structure of the libraries, you’ll see the settings page of the Animations module.

If something went wrong, the system will prompt you to fix it.

The idea behind these settings is simple.

You choose one of the available animation effects and then you assign a page element to that particular effect through its corresponding css selector.

• Click RUBBERBAND EFFECT and type h1 in the text area:

• Choose another effect and add another selector. In the example below, I we're using the ROTATEINUPRIGHT effect. I created a custom block and placed it in one of the regions in this example, and after that I added the selector (id) of the whole block:

• Click Save changes.
• Now go to the front page of your site and you should see both animations at work (click on each image to enlarge it). You can see the ROTATEINUPRIGHT effect for the block, and the RUBBERBAND for the page title.

Summary

The Animations module for Drupal 8 provides an easy way to animate certain elements on a website. You can do that without the need of JS or CSS coding.

With some coding you gain even more control of your animations behaviour, for example, their speed, delay, and other parameters.

I hope you liked this tutorial. Thanks for reading!

About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.