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.
Prerequisites
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.
