Create Animations with Animate.CSS

Last Modified on 01/17/2022 1:21 pm EST

This is an advanced walkthrough that requires the use of JavaScript.


Adding animations to objects on your site can help add emphasis, excitement or even some fun to your page.

The awesome folks behind the Animate.css project have made it easy. They have a large collection of effects that you can add to objects on your PageCloud site.


The three main components will need to be included on your page to allow the animation to appear. 

1. Add Animate.css to your <head> editor

Before animations can appear on your page, you need to add the animation file to your page:

  1. Head to the page you would like to add the animation to. 
  2. Open the <head> editor for the page. 
  3. Copy and paste the code below into the <head> editor:
    • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" class="design-safe">
  4. Save & Close the <head> editor.
  5. Save the page. 


2. Add generic Animate.css class to an object

With Animate.css included on the page, add the generic animate class to any object you want to animate:

  1. Select the object to animate by clicking it while in the editor.
  2. In The Edit Menu, Click the Advanced tab. 
  3. Click CSS Selectors. 
  4. Copy and paste the code below into the "Classes" field: 
    • animate__animated
  5. Click "Save" to save you work.


3. Add specific animation class to an object

With the generic animation class in place, Add the specific animation to an object. 

  1. Choose an effect offered by Animate.css
  2. Click the copy to clipboard icon to the right of the animation name.
  3. On PageCloud, Select the object to animate. 
  4. In The Edit Menu, Click the Advanced tab. 
  5. Click CSS Selectors. 
  6. Paste the animation copied in step one into the "Classes" field. 
  7. Click "Save" and "View Live" to see the animation effect when the page loads.


(Optional) Define an animation trigger function on an object

Adjust when the animation triggers on an object through the <JavaScript> Editor. 

  1. Choose an effect offered by Animate.css. In the example below we use 'animate__backInRight'
  2. Select the object to animate.
  3. Open the <JavaScript> Editor with the object selected by pressing the J then S key on your keyword. 
  4. In the <JavaScript> Editor there are different trigger functions. Decide on one and continue to step 5.
    • Trigger functions include:  'click',  'mouseenter', 'mouseleave', 'scrollin', 'scrollout'. 
  5. Under the desired trigger function, In the empty line between { and above   )};  paste in element.addClass:
    • element.addClass('animate__backInRight');
  6. Save & Close the <JavaScript> Editor.
  7. Click "Save" and "View Live" to see the animation effect with the specific trigger function. 

Setting an animation trigger function does not work when a specific animation class is set on the "Classes" field. Remove the specific animation class from the "Classes" field before defining an animation trigger function. 

User Icon

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!