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:
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:Basically you need to include the assets in a
Edit the content of that module and add the scripts and CSS:
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">
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:
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.
You can explore and learn more about the HubSpot tools and features in the official HubSpot Academy.