TABLE OF CONTENTS
Page Speed Impact
Setup Instructions
Page Speed Impact
Low - Scroll on Animation defers loading content until the user scrolls, which helps decrease page load times. Hover effects, parallax, and other animations require additional code and can have a slight impact.
Exceptions - Images, Background Images and Videos, and Lottie files can increase the time it takes for the page to load.
Take a look at our performance guide to get your website running its best!
Setup Instructions
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