Sliding Animation Cards

A Sliding Animation Cards module is a UI component that features cards moving in a sliding motion, often used for showcasing content like images, text, or product listings dynamically.

Key Features of a Sliding Animation Cards Module :

• Smooth Sliding Animation – Cards slide horizontally.

• Responsive Design – Adjusts based on screen size for mobile and desktop.

• Hover & Click Effects – Optional animations on interaction.

Use Cases

• Image Galleries

• Testimonial Sliders

• Product Showcases

• News & Blog Highlights

• Interactive Dashboards

How to Set Up the Sliding Animation Cards Module in HubSpot :

In the main dashboard, go to the ‘Content’ tab and select either ‘Website’ or ‘Landing Pages,’ depending on where you want to add the section. This lets you choose the right location for managing or updating your content.

Select the page where you want to apply the module.

Search for "Sliding Animation Cards" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For Sliding Animation Cards, select your preferred layout (e.g., Layout 1, Layout 2 or  Layout 3). You can easily rearrange the event cards within the chosen layout to create the ideal content flow and visual arrangement.

Options : 

• Layout 1 : The layout includes three columns only, each featuring a heading, a description with a Call-to-Action (CTA), and a hover effect where the CTA appears with a smooth horizontal slide animation.
• Layout 2 : The layout includes two columns, each with a heading, a description, and a Call-to-Action (CTA) that appears with a smooth horizontal slide animation on hover, enhancing interactivity and engagement.
  
• Layout 3 : The layout features three columns, each containing a heading, a description, and a Call-to-Action (CTA) that smoothly slides in on hover, creating an engaging and interactive user experience.

Content Column :

You can add a minimum of 3 and a maximum of 3 columns, each containing a title, description, and Call-to-Action (CTA) within a repeater content structure for easy customization and consistency.

Module Style Options: 

Module Setting :

Easily adjust the margins, padding, background colors, and container width to achieve your desired look and feel. This flexibility allows you to fine-tune the layout and aesthetics, ensuring a visually appealing and user-friendly design.

Column Setting :

You can customize the Content Column by adjusting the background color, box shadow, spacing, and corner radius, allowing for a polished and visually appealing design.

Heading & Description Setting :

You can customize the typography for both the heading and description by selecting fonts, sizes, and styles that match your design preferences. Additionally, you can adjust spacing for both desktop and mobile views and set the text alignment for optimal readability and aesthetics.

CTA Setting :

You can customize the Call-to-Action (CTA) by adjusting the typography, font size, weight, color, background color, spacing, border, box shadow, and corner radius, ensuring it aligns perfectly with your design and branding.

We hope you enjoy using our sliding animation cards module to create a seamless experience for both your users and your marketing team. At Code Accelerator, we're committed to ensuring your HubSpot experience is exceptional. If you need a custom HubSpot module or require a tailored HubSpot CMS or CRM setup, please don’t hesitate to Contact Us.