AI Agents for Growth
.jpeg?width=200&height=200&name=pexels-mikhail-nilov-6893349%20(1).jpeg)
$100m+
147k+
90%
Container height
Set the overall marquee height (e.g., 80vh, 600px). This controls the visible “window” where images scroll.
Impress your visitors with this dynamic module.
Bring motion, storytelling, and visual impact to any HubSpot page.
The Vertical Image Marquee module transforms static pages into dynamic, scroll-powered experiences. With floating images, adjustable animation speeds, and a fully customizable centered overlay, this module gives marketers and designers a powerful new way to showcase brand stories, campaigns, products, and visual content. Built for HubSpot CMS. No code required.
How it works
The Vertical Image Marquee module is built for HubSpot editors and designers. Add it to a page, drop in your images, then control layout and motion with simple fields—no custom dev work required.
Add the module to your page
Drag the module onto any HubSpot page or template. It renders a fixed-height marquee container with animated floating images and an optional centered overlay.
Gap between loops
Adjust the spacing used when images re-enter the marquee after looping. Helps avoid crowded stacking.
Pause on hover
Enable to pause the animation when users hover the marquee (useful for interactive hero sections).
Randomize start
Enable for an “organic” look—each image starts at a different vertical position on load.
Add floating images (per-image controls)
Add multiple images to create a layered, editorial look. Each image is configured independently so you can build depth and motion with precision.
Image
Choose the image asset. Supports any HubSpot file/image.
Width
Set the image width (supports responsive units like 30vw or fixed values like 420px).
Left offset (%)
Control horizontal position using percentage (e.g., 0% left edge, 50% centered, 70% right).
Speed
Set the vertical scroll speed for that image (different speeds create depth and parallax-like motion).
Start offset (Y)
Choose where an image begins vertically (useful when not randomizing). Great for intentional layouts.
Layering (z-index)
Control which images sit in front/behind others. Higher values appear on top.
Optional rounded corners
Toggle rounded styling per image (if enabled in your module). Use for softer, “card-like” imagery.
Optional shadow
Toggle a stronger shadow per image to lift key visuals forward and add contrast.
Configure the centered overlay (always visible)
The centered overlay is your focal message. It stays anchored in the middle of the marquee while images move behind it—ideal for headings, logos, and supporting copy.
Overlay image
Add a logo or graphic above the text. Supports HubSpot image settings (e.g., max width/height if wired in).
Overlay content (rich text/HTML)
Add headings, paragraphs, links, and formatted text—perfect for a hero statement or short introduction.
Overlay width (desktop)
Set a fixed or responsive width (e.g., 720px or 40vw) to control line-length and layout.
Overlay width (mobile)
Use a separate mobile width (px recommended) so the overlay stays readable on smaller screens (e.g., 320px).
Gap (spacing inside overlay)
Adjust spacing between overlay image and text for tighter or more open layouts.
Overlay layering (z-index)
Ensure the overlay stays above your floating imagery. Higher values always appear on top.
Performance & accessibility built in
In-view rendering
Animation only runs while the module is visible in the viewport (helps performance on longer pages).
Reduced motion support
Respects user preferences: if prefers-reduced-motion is enabled, animation is reduced/disabled.
GPU-friendly transforms
Uses translate3d for smooth, modern motion and better device performance.
No external libraries
Lightweight JavaScript with no dependencies—fast to load and easy to maintain.
Tip: Mix fast + slow image speeds and stagger your left offsets to create depth. Then use the centered overlay for a clear headline and supporting copy.
Why teams use the Vertical Image Marquee
Drop the module onto any HubSpot page to instantly add motion, depth, and visual storytelling. Configure floating images, control animation behaviour, and anchor your message with a centered overlay, all without custom development or external libraries.
-
Designed for visual storytelling
Create layered, editorial-style layouts with floating images that move independently for a rich, dynamic feel.
-
Precise layout control
Adjust image size, position, speed, depth, and spacing—every image is configured individually for total creative control.
-
Focused messaging with a centered overlay
Keep your key message front and center with an always-visible overlay that stays readable while imagery moves behind it.
-
Responsive by default
Set different overlay widths for desktop and mobile to ensure your layout looks balanced on every screen size.
-
Performance-first animation
Lightweight, GPU-friendly motion with no external dependencies—smooth scrolling without slowing your page down.
-
Built for HubSpot
Works seamlessly inside the HubSpot CMS—drag-and-drop friendly, theme-compatible, and editable by marketers.
Create motion-driven hero sections that stand out
Use the Module to layer floating images with smooth vertical motion and a fixed center message.