Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V28 released on March 23rd 2023 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-img_mm_faq
FAQs

Have questions?
Search for answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Looking for Custom Development?
REQUEST A QUOTE


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7CT AM – 7CT PM – Get in touch here

Add Animation to Website Pages

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

animation-icon

ANIMATION

Animation on Scroll (AOS) creates an interactive experience for site visitors as they scroll down the page by animating the content and is one way to incorporate animation on your website.

animate-website-pages

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.

MEDIUM

Additional impact on desktop and mobile if images are not compressed.

An image or video background also impacts page performance.

TIPS

Convert images to WebP where possible to meet criteria to serve images in next-gen format.

To reduce image file sizes without losing quality, use TinyPNG to compress your images (JPG, PNG, WebP).

Vector images (SVG) also help keep file sizes to a minimum and can be used for graphics like logos and icons.

FAQ

I don't want animation, where do I turn it off?

Animation on Scroll can be turned off globally in Theme Settings, under Animation

Setup Instructions

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

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, 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.

theme-settings-animation-on-scroll

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 Hover Effects to Website Content

Theme Settings  > Effects

POWER theme includes a 3D Box Effect that creates a tilting effect when hovering over the box elements within the theme.

The theme also includes a default effect for CTAs and Buttons to "slide up" on hover.

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.

parallax-effect-settings

Examples

ander-animation
orange-pegs-animation
deviq-animation
sopact-animation

Next Steps

With Animation on Scroll set up for your website pages, now it's time to showcase your work with a Portfolio layout.

Next up:

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.