Animate objects on your page

Add animations to Sections, Columns, text boxes, buttons, images, and more with Pagecloud animations! You can choose the type of animation, and customize how and when your animation displays on your screen. 

Types of animations

Entrance animations - Animate how an object comes into view on your page:

  • Slide in: Object slides into view from the top, bottoms, left, or right of your screen
  • Fade in: Object fades in or out of view
  • Rotate in: Object cartwheels from the left or from the right
  • Flip in: Object flips and inverts vertically or horizontally
  • Scale in: Object grows to actual size from the top, bottom, left, right, or centre of the object
  • Bounce in: Object bounces in place, or slides into view and bounces
  • Zoom in: Object appears large and slides into view to actual size

Attention seeking animations - Draw attention to an object on your page:

  • Bounce: Object bounces in place, or slides into view and bounces
  • Shake:  Object shakes vertically or horizontally 
  • Wobble: Object wobbles vertically or horizontally
  • Rotate: Object cartwheels from the left or from the right
  • Flip: Object flips and inverts vertically or horizontally
  • Jiggle: Object jiggles like Jell-O horizontally or vertically
  • Flash: Object fades out and back in 
  • Pulse: Object pulses once from bigger to smaller 
  • Grow: Object grows slightly 
  • Move: Object moves slightly from either left, right, up, or down

Customizing your animations

You can customize when, how, and for long your animation appears on your page. 

When - Select when you animation triggers: 

Note: Entrance animations are only triggered on scroll.

  • Onscroll: Animation triggers when the user scrolls 
  • Onclick: Animation triggers when the user clicks the object 
  • Onload: Animation triggers when the page loads 
  • Hover: Animation triggers when user hovers mouse over object

Note: The Hover animation trigger works on desktop only.

How - Select how you want you animation to appear. This action depends on the type of animation you have chosen.

Delay - Choose how long of a delay you want before the animation triggers 

Duration - Choose how long you want the animation to last 

Applying an animation to an object

You can animate any object on your page using your Editing Menu

  1. Click on the object, Section, Column, etc. that you wish to animate 
  2. Navigate to your Editing Menu and click the Animation tab
  3. Choose the type of animation you wish to apply to the object 
  4. Customize your animation 
  5. Preview your animation by clicking the preview button in your Editing Menu 
  6. Save your page

Note: Animations applied to objects or Sections desktop will automatically apply to mobile and vice versa. 

Reduce motion accessibility setting

Users can request that the system minimize the amount of non-essential motion it uses. Pagecloud animations will not work for anyone who has enabled this setting. The setting can be found:

  • In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
  • In Windows 11: Settings > Accessibility > Visual Effects > Animation Effects
  • In Windows 7: Control Panel > Ease of Access > Make the computer easier to see > Turn off all unnecessary animations (when possible).
  • In macOS: System Preferences > Accessibility > Display > Reduce motion.
User Icon

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!