Adding animated effects to objects on your page

Adding different animations to objects on your PageCloud site can help add emphasis, excitment or even just a bit of fun to your page. 

The awesome folks behind the Animate.css  project have made it easy to add different effects from their large collection right onto the elements in your PageCloud page. 

Here is a quick example: 


Ready to start adding animations to your Page? Lets get started! 


Step 1:

Download this animate.css.zip file to your computer. Then, find that file on your computer and unzip it before draging the resulting animate.css file into your desired PageCloud Page while in edit mode.

Step 2:

Browse through the different effects offered by Animate.css below by selecting the effect name from the list and clicking "animate it" to see a preview.  When you find one that you like, make note of the name (including any uppercase letters)  as we will need the effect name a little later to help create your desired effect. 


Step 3:

Select the object you'd like the animation effect to appear on, Then click the J then S key to open up the JavaScript menu for that object. You can also access the Java Script menu by selecting the object, and clicking on the <script> section in the Page tab of the editing palette. 

Once in the JavaScript menu you will be able to choose how you want this effect to be activated on the object you've selected. 

For instance, You can choose to have this effect happen when you click the object, when the mouse hovers over the object, when the mouse leaves the object, or on Scroll In or Out of the page. 

Step 4:

Once you have chosen how you’d like the effect to be activated, you will need to 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');


Remember the name of the effect you noted in Step 3? You'll want to 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, so we paste it below the element.on('scrollin', function(e) line. 

Step 5:

Click "Save & Close" to save the changes to your JavaScript editor, then Save the page using the CMD+S (on Mac) or CTRL+S (on Windows)  shortcut keys.

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!