Add Animation to Website Pages

How to add animation to your website with Animation on Scroll and custom modules

Back to Documentation

See Animation Features

See 3D Hover Features

See Parallax Features

See Lottie Animation Features

Helpful Links: Step-by-step instructions for configuring animation in the Theme Settings.

Available animation options in POWER Pro theme: Animation on Scroll↓, Hover Effects↓, Parallax↓, and Lottie Animations↓

You can define a global animation style for all of your pages in Theme Settings and also modify individual modules to customize the animation for your content and page layouts.

Many Custom Modules included with POWER theme include interactive elements, such as the 3D Hover Effect for image boxes.

Add Animation to Website Pages in HubSpot

Adding animation to your website pages defers the content from loading until the user starts scrolling down the page (known as animation on scroll or AOS), which can help improve your overall page speed by reducing the files that are needed on the initial page load.

Theme Settings → Animation

Modify the global settings for Animation on Scroll, including the option to disable globally or based on device type.

Types of Animation Styles Available

Fade
Fade Up
Fade Down
Fade Left
Fade Right
Fade Up Right
Fade Up Left
Fade Down Right
Fade Down Left
Flip Up
Flip Down
Flip Left
Flip Right
Slide Up
Slide Down
Slide Left
Slide Right
Zoom In
Zoom In Up
Zoom In Down
Zoom In Left
Zoom In Right
Zoom Out
Zoom Out Up
Zoom Out Down
Zoom Out Left
Zoom Out Right

Add Parallax Effect to Images

[POWER SEC Module] > Style > Background > Background Image

When configuring an image as the background for one of the custom POWER Section Modules, you can initiate the Parallax effect by changing the Background Position / Parallax Effect to Parallax.

Add Lottie Animations to HubSpot Website

To use JSON animations, you'll need to create a LottieFiles account to add the animations on your website.

Depending on your requirements (creating custom animations, performance preferences, number of animations, etc.) using Lottie may require a paid subscription.

The Lottie library is included in the theme files and only loaded when you've configured a Lottie File in any of the modules with the Lottie File option. How to get the Lottie File link.