How to Create CSS and Javascript Animations in Drupal 8

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
  • 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 
  • type h1 in the text area:

  • Choose another effect and add another selector.

In the example below, 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.

animations sequence

animations sequence

animations sequence

animations sequence

animations sequence


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!

Author

  • Jorge Montoya

    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.

0 0 votes
Article Rating
Subscribe
Notify of
guest

6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Didit Hadiantoko
Didit Hadiantoko
5 years ago

Yes.. Work if i have logout from administrator.
But not working if logged in as administrator 

Jose Castellon
Jose Castellon
5 years ago

Do all the steps but only affect the backend elements

ted
ted
4 years ago

Hi, thank you but when I did it I have this error : Please use command “drush dal” to download dependencies or manually download the repository
Do you know why ?

G
G
4 years ago
Reply to  ted

Maybe you don’t have downloaded composer

John
John
3 years ago
Reply to  ted

You need to pay attention to the naming of the directories in Libraries where the js libraries are stored. Drupal will look for the libraries in folders named exactly as above – case sensitive… 

John
John
3 years ago

When I get this working it’ll be great. At the moment I have all the libraries downloaded – the module recognises them – but adding css selectors has no effect on the front end – whether I am logged in or not…

6
0
Would love your thoughts, please comment.x
()
x