Implement animation using wow js library in drupal

Introduction

WOW

Whenever user scroll down a web page, an element effect triggered from top, bottom, left and right, this feature makes the website quite interactive and eye-catching from the user’s point of view. In this blog we will discuss about to implement animation effect on the web pages, it is a great way to engage users and keep them on interested content on web pages.

The animation can apply to any element on the web pages such as image, text and CTA, The animation can be triggered when the user scrolls down the page, creating a smooth and seamless transition.

Why use it?

The wow js library is a JavaScript library and open source that allows you to animate elements as they come into the viewport. It is lightweight and easy to use, making it a popular choice for adding animations to web pages.

It is used to create animations on scroll, which can help to improve the user experience by making the page more engaging and interactive. It can be used to animate text, images, and other elements on the page, making them more visually appealing.

When to use?

1. When you want to draw a user’s attention to a specific element of the page
2. When you want to develop a more polished, refined, user-friendly, intuitive, visually appealing, interactive, modern, and professional look for your website.
3. When you want to improve the overall aesthetics of your website.
4. When you want to be more engaging in the user experience.
5. When you want to create a memorable, impactful, user-specific, content visualization, and user-engaging website.

The following steps are to be followed to achieve this feature in Drupal

1. Keep the latest wow.min.js (https://cdnjs.com/libraries/wow) file in themes/custom/theme-name/js/library location
2. Keep the latest wow.min.css (https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css) file in themes/custom/theme-name/css/library location
3. Include wow.min.js and wow.min.css in theme-name.libraries.yml file

 
global-styling:
 version: 2.3
 css:
   theme:
     css/library/wow.min.css: {}
 js:
   js/library/wow.min.js: {}

4. Clear cache using the drush command or Drupal admin
5. Now it is ready to add animation classes in elements and make an interactive User Experience(UI).
6. You can easily copy and paste the animation class from here
7. Example: <h1 class=”wow zoomIn” data-wow-duration=”2s” data-wow-delay=”2s”>Animate.css</h1>

In the above example zoom in effect will be appear, by default it’s animation duration is 1s but we can manage it accordingly.

Conclusion

To implement an animation using wow js library in Drupal, it is very easy to use, add animation classes and make a website with users engaging, interactive, user-friendly, intuitive, aesthetics, impactful, professional looks and memorable. It will help to improve overall UI in the Drupal website.

Reference: click here

Hope you will find this helpful. Please comment if you have any concerns.