Add Animations to Objects on your page

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 in your PageCloud page.

Downloading the Animate file

Click the file below to download the drop down action file.

animate.css.zip

Unzip the downloaded file creating a file called "animate.css"

Adding Animate.css to your page

  1. Drag the animate.css file into your desired page while in edit mode.
  2. Choose an effect offered by Animate.css and remember the name (including any uppercase letters). 
  3. Select the object you'd like the animation effect to appear on.
  4. Type J then S on your keyboard to open the <JavaScript> Editor for that object. 
  5. Choose how you want this effect to be activated on the object you’ve chosen. You can have this activated by a click on the object, mouse hover over the object, when mouse leaves the object or on scroll in or out of the page.

  6. Insert the line of code within that action. This line of code can be added in the empty line between the { and above the  )}; of the chosen action. See the screenshot below for an example line of code to be added : element.addClass('animated fadeInLeft'); 
  7. Remember the name of the effect you noted in Step 4? Add that into the line of code here, right after the word animated. Be sure to include all the capital letters as its still case sensitive. In this example we want this effect (fadeInLeft) to be activated when the user Scrolls into the page. Paste it below the element.on('scrollin', function(e) line.

  8. Click "Save & Close" at the top right save the changes to your JavaScript editor.
  9. Click “Save” or use the shortcut CMD+S (on Mac) or CTRL+S (on Windows) to save your changes.
  10. Click "View Live" to see your Animate.css effect in action!

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!