COS-Site-Pages-Templates

How to add and remove CSS animations from HubSpot default theme templates

Last updated: September 6, 2016

HubSpot default themes use CSS animations to liven up sections of your pages as the user scrolls. You can see the animations in action, on this page. You can add and remove these CSS animation to HubSpot default theme templates, by adding classes to the modules on the theme layouts.

Please note that these animations will only work on templates that are loading the themes required CSS and JS files.

To add or remove an animation:

  • Open the theme template in Design Manager
  • Click the gear icon, on the module that you would like to animate
  • Select Edit CSS
  • Add or remove the classes described below to the custom class field
Add animate custom classes
Add animate custom classes

HubSpot standard themes use the classes from animate.css, as well as classes to activate the animation and control its speed. The following is a brief description of these classes that can be used:

  • Adding a class of animated triggers the CSS animation on scroll. Deleting the class will remove the animation from the module.
  • You can choose the animation behavior by adding one on the animate.css classes. For example, fadeInRight will make the module slide in from the right as well as fade in. You can see a full list of classes in the dropdown of this page.
  • Adding a class of delayp1 - delayp9 changes the speed of the animation from .1s to .9s. HubSpot default themes also support delayp1s and delayp2s to make the animation take one or two seconds.

Also note that animations can interfere with the positioning of form validation alert messages; therefore, it is not recommended to animate form modules or groups containing a form.