Hubspot CMS：How to Control Scroll-Linked Animations Without Code

Enhancing the user experience (UX) of a website requires dynamic visual effects that trigger as content appears. This article explains how to use HubSpot CMS "Custom Modules" to allow editors to freely control element animations directly from the edit screen, without requiring any programming knowledge.

1. Objectives

The goal of this module is to centrally manage "which element," "how," and "when" to animate via the HubSpot page editor, without manually adding specific CSS classes.  

• Operational Efficiency: Simply select elements like H1 tags or images from a dropdown list to complete the setup.  

• Design Consistency: Define common animations (slide, fade, popup) across the site to maintain a unified brand identity.
• Performance Optimization: Utilizes the "Intersection Observer API" to execute animations efficiently only when an element enters the viewport.  

2. Potential Use Cases

• Hero Area Effects: Create a strong first impression by having the main copy float up from the bottom when a visitor arrives.
• Visual Guidance via Scrolling: Improve completion rates by sliding in important diagrams or supplemental text from the left or right as the user reads down the page.
• Emphasizing Calls to Action: Add "Pop-up" movements to contact buttons or banners to encourage clicks.
• Sequential Display of Multiple Elements: Use the "Delay" setting to stagger the appearance of multiple card-style layouts for a rhythmic visual effect.  

3. Implementation and Configuration Steps

Step 1: Create a New Module

1. Navigate to [Marketing] > [Files and Templates] > [Design Manager] in HubSpot.
2. Right-click in the file tree and select [New file].
3. Select [Module] as the file type and check the locations where it will be used (Landing pages, Blogs, etc.).
4. Name the module (e.g., animation_controller) and create it.

Step 2: Apply the Code

Copy and paste the code provided in the technical specifications into the respective sections of the module editor:

• fields.json: Defines selectors, animation types, directions, duration, and delay.  

• HTML/HubL: Handles the loop processing to pass editor inputs to the JavaScript.  

• CSS: Defines the animation styles using @keyframes.  

• JavaScript: Contains the logic for scroll detection via the IntersectionObserver.  

Step 3: Place on a CMS Page

1. Open the [Page Editor] where you want to apply animations.
2. Search for your module in the left panel and drag it anywhere on the page (e.g., near the footer).

Step 4: Detailed Animation Settings

Configure specific movements within the "anim_settings" panel of the placed module:  

• Target Selector: Select the target element (e.g., h2, img) from the dropdown.  

• Animation Type (anim_type): Choose from "slide-in," "fade-in," "pop-up," etc.  

• Direction and Timing:
  • direction: Specify the starting direction (e.g., "down" to move from top to bottom).  
  • duration: Enter the seconds for the animation to complete (e.g., 1s).  
  • delay: Enter the wait time before the movement starts once the element is in view.  

4. How the Detection and Execution Work

• Automatic Exclusion: Elements within headers or footers are automatically excluded by the script to avoid disrupting the core UX.  

• One-Time Execution: Animations trigger when 10% of the element enters the viewport; once executed, the observer stops to minimize page load.  

• No-Code Operation: Once placed, you can animate the entire site without writing a single line of additional code.

Module Source Code

Create a "New Module" in the HubSpot Design Manager and paste the following code into each respective section.

1. fields.json

This is the field definition. It consists of a repeater field (Items) and style setting fields (Styles).

[
 {
  "children": [
   {
    "choices": [
     [ "h1", "H1" ], [ "h2", "H2" ], [ "h3", "H3" ], [ "h4", "H4" ],
     [ "h5", "H5" ], [ "h6", "H6" ], [ "p", "p" ], [ "span", "span" ],
     [ "div", "div" ], [ "li", "list" ], [ "img", "image" ], [ "setion", "section" ]
    ],
    "display": "select",
    "display_width": null,
    "id": "6b6e5314-9832-c18b-b7f1-e5ab1052fabb",
    "label": "target_selector",
    "locked": false,
    "multiple": false,
    "name": "target_selector",
    "preset": null,
    "reordering_enabled": true,
    "required": false,
    "type": "choice"
   },
   {
    "choices": [
     [ "slide-in", "slide-in" ], [ "slide-out", "slide-out" ],
     [ "scale-up", "scale-up" ], [ "wave", "wave" ],
     [ "bounce", "bounce" ], [ "scale-down", "scale-down" ], [ "pop-up", "pop-up" ]
    ],
    "display": "select",
    "display_width": null,
    "id": "d604cb29-9753-6dc8-fd76-e5828e86f0d2",
    "label": "anim_type",
    "locked": false,
    "multiple": false,
    "name": "anim_type",
    "preset": null,
    "reordering_enabled": true,
    "required": false,
    "type": "choice"
   },
   {
    "choices": [
     [ "down", "上から" ], [ "up", "下から" ],
     [ "left", "左から" ], [ "right", "右から" ], [ "none", "なし" ]
    ],
    "display": "select",
    "display_width": null,
    "id": "a7c1f435-7a80-f31b-5c9e-b827edf28bc8",
    "label": "direction",
    "locked": false,
    "multiple": false,
    "name": "direction",
    "preset": null,
    "reordering_enabled": true,
    "required": false,
    "type": "choice"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "c15cf622-810b-0753-bc04-211167da8095",
    "label": "duration",
    "locked": false,
    "name": "duration",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "72e19799-ddd8-060f-4955-5ecdcd781bd9",
    "label": "delay",
    "locked": false,
    "name": "delay",
    "required": false,
    "step": 1,
    "type": "number"
   }
  ],
  "default": [],
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "f1529db5-e7c4-bba2-3b9a-e69444442236",
  "label": "anim_settings",
  "locked": false,
  "name": "anim_settings",
  "occurrence": {},
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 }
]