January 24, 2024

Walkthrough: Override Bricks Builder Animations with CSS

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

Override Bricks Builder animations with CSS to replace the default animations. Often, the built-in animations can appear too dramatic, detracting from the professionalism of a website. By applying subtle CSS overrides, we can transform these animations into something more refined and appealing.


Please make sure you have the following installed and activated:

Why Replacing CSS Animations is Beneficial

Replacing the default CSS animations in Bricks Builder with custom ones offers several advantages, making it a worthwhile endeavour for any web designer or developer looking to enhance their site’s user experience.

  • Enhanced User Experience
    Default animations can sometimes be overbearing or distracting. By customizing them, we can create a more subtle and sophisticated user experience. A gentle fade or a slight movement is often more appealing and less jarring to website visitors, ensuring the site’s content remains the focal point.
  • Consistency with Brand Identity
    Every brand has its unique style and tone. Custom animations allow for better alignment with a brand’s identity. Whether it’s a professional, minimalist look or something more dynamic, tailor-made animations ensure that every aspect of the website reflects the brand’s character.
  • Improved Performance
    Some default animations are complex and can hinder website performance, especially on mobile devices or older computers. By optimizing animations, we can improve load times and overall site performance, offering a smoother experience for all users.
  • Distinctiveness
    The internet is flooded with websites using similar design templates and animations. Custom animations set a website apart from its competitors, giving it a unique and memorable presence in the digital space.
  • Control Over Animation Triggers and Behavior
    Customizing animations allows for greater control over how and when they trigger. This can be particularly useful for creating interactive experiences that engage users as they navigate through the site.
  • Accessibility
    Some users might have sensitivities to certain types of motions or animations. Custom animations can be designed to be less intrusive, adhering to accessibility best practices, and ensuring the website is user-friendly for people with motion sensitivities.

Override Bricks Builder Animations – Summary

  • 0:00:
    Introduction to modifying built-in animations in Bricks Builder, focusing on reducing the overly dramatic default animations for a more professional look.
  • 0:58:
    Overview of a test setup in Bricks Builder, highlighting a section with dummy content, a container with a heading, and an image. Both heading and image are set with default Bricks animations.
  • 1:42:
    Examination of CSS classes in Chrome DevTools to identify the classes applied during animations. Adjusting animation duration to 20 seconds for easier inspection.
  • 3:25:
    Locating animation classes in the Bricks Builder CSS file via Chrome’s Network tab. Copying the relevant CSS rules for modification.
  • 4:53:
    Creation of a new CSS snippet in WP Code Box for overriding default animations, making the selector more specific to ensure it overrides the Bricks default styles.
  • 8:17:
    Modifying animation keyframes to reduce the motion from 100% to 20px, creating a more subtle animation effect.
  • 10:14:
    Further adjustments to the animation keyframes for different elements, demonstrating how to make modifications for different types of animations.
  • 11:18:
    Introducing a CSS variable to control the transformation distance, allowing for easy adjustments of the animation’s range of motion.
  • 13:02:
    Simplifying the CSS using SCSS in WP Code Box, consolidating the code, and demonstrating how to override different animations.
  • 17:01:
    Detailed process of overriding a specific animation (flipping X) by identifying and modifying its keyframes.
  • 19:18:
    Final adjustments to the flipping X animation, reducing its intensity to create a more subtle effect.
  • 20:00:
    Conclusion, emphasizing the ease of customizing animations in Bricks Builder using the process demonstrated, and encouraging feedback from viewers.

Official Documentation

Override Bricks Builder Animations – Conclusion

This tutorial demonstrates that with a bit of CSS knowledge and creative thinking, you can significantly improve the animations on your Bricks Builder website, making them more professional and less intrusive.

Required Resources

WP Code Box Logo
Free Options
Bricks Builder Logo
Payment required
Credit to WP Easy
WP Easy simplifies complex WordPress topics, helping both beginners and advanced users master the platform. Committed to empowering website creators, WP Easy delivers practical, easy-to-follow content for enhancing your WordPress skills.
Walkthrough: Override Bricks Builder Animations with CSS
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.