How to animate and reveal content while scrolling

Live demo (scroll down the page)

This functionality is not built-in in Act Theme by default. However, you can achieve this with WOW.js and Animate.css (please read more about them, instructions, licenses, etc. on their official websites).

Also please keep in mind we don't provide support for external scripts, plugins or components.

That being said, here is how you can implement this functionality in your Act Theme:


1 Basically you need to include the assets in a Custom HTML module. You can make it global or include it in the global footer so you can use it across multiple templates. For our demo and tests, we added the Custom HTML module after everything else in our template, like this:

wow-js-animate-css-act-theme-hubspot

2 Edit the content of that module and add the scripts and CSS:

wow-js-animate-css-act-theme-hubspot-code

We added this code, serving the assets from CDNJS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
</script>

3 Add the wow class (required by WOW.js) to your desired group or module, along with the appropriate class from Animate.css specific to the animation you want. Example:

wow-js-animate-js-act-theme-hubspot-edit-css

wow-js-animate-css-act-theme-hubspot-classes

See a live demo here (scroll down the page)

Note: We don't provide support for external plugins, scripts or components. If you have trouble with this implementation we suggest enlisting the help of a developer.

HubSpot User Guides

You can explore and learn more about the HubSpot tools and features in the official HubSpot Academy.

HubSpot Academy | User Guides