How to Add Animations to your Website

Exciting new feature release at Pagecloud: Animations! It's now easier than ever to animate objects on your website directly from your editing menu. 

Want to try it out? Pagecloud Start allows you to build and publish a one page website for free, including all our animations. Get started today!

Keep reading to learn more about what you can do with animations on your Pagecloud website.

Types of animations

We offer a range of animations, animation triggers, and other customizations. You can choose between entrance or attention seeking animations, what action triggers the animation, the duration of the animations, and more!

To view the full list of types of animations, check out our animation's guide. You can animate just about anything on your page: Sections, Columns, images, buttons, text, whatever!

Entrance animations

Entrance animations occur on-load or on-scroll. This means that when the user lands on your page the animation will automatically trigger, and animations further down the page will trigger as the user scrolls them into view. 

Let's say you want to add an entrance animation to your Section. Click on the Section and navigate to the Animations tab in your Editing Menu:

Next, select the type of entrance animation you want to apply to your Section. We've chosen Slide in. You can preview the animation, choose how the Section slides in (left, right, top, or bottom), and select the delay and duration of your animation: 

Apply the animation and save! Now your Section will slide in when the user lands on the page, or scrolls the Section into view! 

The above example shows a Section sliding into view from the top, and has a duration of 1 second.

Attention seeking animations

Attention seeking animations are intended to add flair to your page and draw your users' attention specific elements on your website. Unlike entrance animations that automatically trigger on-scroll, you can decide between on-scroll, on-click, and on-hover triggers. 

There are also more types of attention seeking animations to choose from including favourites like fade, pulse, and shake. 

Click on the object you wish to animate and navigate to the animations tab in your Editing Menu. Scroll down past the entrance animations to view the list of available attention seeking animations: 

Choose your animation and customize your trigger, delay, and duration. You can preview your animation in your Editing Menu as well. 

Apply your attention seeking animation and save! Using the Pulse animation on-hover you can apply this effect to your images or other objects on your page: 

Animations and page performance

With 17 types of animations and the ability to animate anything on your page, you can easily create effects that appear custom and professional. However, it's important to keep your animations subtle, and avoid employing too many animations that can decrease your site's overall usability.

Note: too many distracting animations can negatively affect your site's accessibility, and may impact your SEO. 

Best practices are too keep your animations simple and test your animations on your mobile site. For more information on SEO, check out our complete guide.

Animation hack!

With the ability to overlay your content, you can create some awesome animation effects! 

For example, using the Fade out animation, you can overlay images to display a different image or text on hover! 

For the above example, we created an image with text using a design tool, and then dragged the milkshake image on top of the text. We then animated the milkshake image using Fade out, on-hover.

We can't wait to see what you create with your animations! Get started today and let us know what you think!