Nowadays, it is essential to give the extra edge to make a website more lively, interesting and interactive. One of the ways to make this happen, is applying different types of animations to any desired element.
Earlier, it was difficult to animate the elements. But now we can use module and plugin to make it happen.
How to apply animations?
To animate the element we can use “Animate Any” module which is applicable on Drupal 8 site.
Install the Animate Any module as you install any other module. You need to use animate.css library. Download the animate.css library from https://github.com/daneden/animate.css and keep it in the mentioned path, i.e. ROOT/libraries/animate.css
Animation effect will be visible once we scroll the page i.e. once element is in viewport effect.
By following below steps, we can apply the animation to elements of the website.
Step 1:
Declare the parent class of the element
Step 2:
Declare the selector on which you want to apply the animation
After declaring parent class, add (child) items where the animation has to be applied. To do so, click on Add Item Button. This will add new row where you can provide the selector like class or id of the element.
Step 3:
Choose the type of animation you want to apply
After selecting the animation, you can see the effect of the animation on “Animate Any” text in the selector row.
Other Features:
- You can apply any number of animations to different selectors by providing the Parent element’s class or Id.
- You can see the list of animations applied on the elements, under the List tab on the configuration page.
- You can edit/delete the effect applied to elements from list page also.
For more, try Animate Any module.