• to select
    • to navigate
    • to close

    • Getting Started

      • Welcome
      • Marketplace Integration

    • Installation

      • HubSpot Permissions
      • Adding a Portal

    • Sprocket Rocket App

      • First Steps
      • Creating a Page
      • Saving a Layout
      • Website Pages
      • Landing Pages
      • Blog Templates
      • System Templates

      • Modules

        • Installing Modules
        • Updating Modules
        • Syncing Modules
        • Purchasing Modules

      • Portals

        • Adding Portals
        • Upgrading Portals
        • Custom Installations
        • Generating Theme Previews
        • Updating Files
      • Users

    • Theme

      • Settings

        • Overview
        • Colors
        • Typography
        • Buttons
        • Forms
        • Padding and Spacers
      • Global Site Header and Footer
      • Page Templates

      • Blog Templates

        • Listing
        • Post
      • System Templates
      • Subscription Templates
      • Custom CSS
      • Custom Fonts

    • Modules

      • Overview

      • Navigations

        • SR Navigation 01
        • SR Nav Min 01
        • SR Nav Off Canvas 01

      • Heroes

        • SR Hero 01
        • SR Hero 02
        • SR Hero 03
        • SR Hero 04
        • SR Hero Card 01
        • SR Hero Form 01
        • SR Hero Parallax 01
        • SR Hero Video 01
        • SR Hero Two Col 01
        • SR Hero 404
        • SR Hero 500

      • Footers

        • SR Footer 01
        • SR Footer 02
        • SR Footer 03
        • SR Footer 04
        • SR Footer Min 01
        • SR Footer Min 02

      • Columns

        • SR One Col 01
        • SR One Col 02
        • SR One Col Media 01
        • SR One Col Media 02
        • SR One Col Features 01
        • SR Two Col 01
        • SR Two Col 02
        • SR Two Col 03
        • SR Two Col 04
        • SR Two Col 05
        • SR Two Col 06
        • SR Two Col 07
        • SR Two Col 08
        • SR Two Col 10
        • SR Two Col Gallery 01
        • SR Two Col Gallery 02
        • SR Two Col Features 01
        • SR Two Col Features 02
        • SR Two Col TOC 01
        • SR Two Col Slider 01
        • SR Three Col 01
        • SR Three Col 02
        • SR Three Col 03
        • SR Three Col Features 01
        • SR Five Col 01

      • Tabs

        • SR Tabs 01
        • SR Tabs 02
        • SR Tabs Accordion 01
        • SR Tabs Accordion 02
        • SR Tabs Horizontal 01
        • SR Tabs Horizontal 02
        • SR Tabs Slider 01
        • SR Tabs Slider 02
        • SR Tabs Split Screen 01
        • SR Tabs Testimonials 01
        • SR Tabs Vertical 01
        • SR Job Listing 01
        • SR Testimonials 03

      • Offers

        • SR Offer Bar 01
        • SR Offer Bar 02
        • SR Offer Bar 03
        • SR Offer Bar 04
        • SR Offer Bar 05
        • SR Offer Bar 06
        • SR Offer Bar 07
        • SR Offer Bar 08
        • SR Offer One Col 01
        • SR Offer Two Col 01
        • SR Offer Two Col 02
        • SR Offer Two Col 03
        • SR Offer Smart Pop 01
        • SR Offer Smart Pop 02
        • SR Offer Parallax 01
        • SR Offer Parallax 02
        • Pillar Chapter Title 01
        • Pillar Nav TOC 01
        • Pillar Nav TOC 02
        • Pillar Cover 01
        • SR Offer Slide In 01
        • SR Offer Video CTA 01
        • SR Offer Faux Modal 01
        • SR Offer Exit Modal 01
        • SR Meeting 01
        • SR Gated Content 01

      • Cards

        • SR Cards Articles 01
        • SR Cards Articles 02
        • SR Cards Articles 03
        • SR Cards Categories 01
        • SR Cards Features 01
        • SR Cards Filter 01
        • SR Cards Filter 02
        • SR Cards Flip 01
        • SR Cards Grid 01
        • SR Cards Grid 02
        • SR Cards Image 01
        • SR Cards Logos 01
        • SR Cards Pricing 01
        • SR Cards Pricing 02
        • SR Cards Pricing 03
        • SR Cards Slider 01
        • SR Cards Steps 01
        • SR Cards Steps 02
        • SR Cards Team 01
        • SR Cards Team 02
        • SR Cards Team 03
        • SR Cards Team 04
        • SR Cards Testimonial Grid 01
        • SR Cards Testimonial Grid 02
        • SR Cards Testimonial Slider 01
        • SR Cards Testimonial Slider 02 & 03
        • SR Cards Testimonial Slider 04
        • SR Cards Testimonial Slider 05
        • SR Cards Timeline 01
        • SR Cards Three Cols 01
        • SR Case Studies Slider 02
        • SR FAQ 01
        • SR Pricing 01
        • SR Pricing 02
        • SR Pricing 03
        • SR Showcase 01
        • SR Event Details 01
        • SR Event Listing 01
        • SR Events 01

      • Bling

        • SR Animations
        • SR Bling Graphic 01
        • SR Bling Graphic 02
        • SR Clients 01 & 02
        • SR Clients Carousel 01
        • SR Contact 01
        • SR Locations 01
        • SR Gallery 01
        • SR Gallery 02
        • SR Image Hotspot 01
        • SR Notification 01
        • SR Stats 01
        • SR Stats 02
        • SR Stats 03
        • SR Stats 04
        • SR Stats 05
        • SR Stats 06
        • SR Nav Progress Bar 01
        • SR Social Tweet 01
        • SR Pattern 01
        • SR Video Slider 01
        • SR Video Overlay 01

      • Elements

        • SR Elements Overview
        • SR HTML
        • SR Modal
        • SR Separator 01

      • DND Modules

        • Calculator
        • Pricing Comparison
        • Multistep Form

    • FAQs

      • PRO vs. Core
      • jQuery Issues
      • Why are some modules on my Sprocket Rocket App locked?
      • How can I change my page template?
      • Do I need a HubSpot account?
      • Sprocket Rocket icon on my pages?
      • Updating your theme (Marketplace)
      • Uninstalling your theme (Marketplace)
      • How to link a CTA button to another module on the same page
      • How to Edit the Blog Post Sidebar
      • How to Style SR Forms
      • How to edit Hero module's height
      • How to Style HubSpot CTA
      • Customizing Your Column Layout
      • How to use SR Animations module

    • Guides

      • Building your website with Sprocket Rocket
      • Optimizing Performance
      • Creating a Child Theme
      • Using LottieFiles
      • Changing Templates
      • Updating Marketplace Modules
      • Disconnect Sprocket Rocket App from HubSpot

    • Support

      • Submit a Ticket
      • Granting Access
      • Branding Setup

    Solutions

    • Sprocket Rocket App
    • Website Migrations
    • Agencies
    • Partners

    Resources

    • Module Library
    • Get Started
    • Showcase
    • Support
    • Pricing
    • Figma
    • Login
    Contact Support
    Give us Feedback

    On this page

    Solutions

    • Sprocket Rocket App
    • Website Migrations
    • Agencies
    • Partners

    Resources

    • Module Library
    • Get Started
    • Showcase
    • Support
    • Pricing
    • Figma
    • Login
    Contact Support Give us Feedback

    Follow this step-by-step guide to use SR Animations module!

    Customizing Your Column Layout
    Building your website with Sprocket..
    Updated 19 Sep 2024