Animations
Bricksfusion includes 97+ animations that work as native Bricks Builder elements. No external libraries, no shortcodes. Drag them onto your canvas and configure everything from the Bricks sidebar, the same way you would with any other Bricks element.
How it works
After installing and activating the Bricksfusion Animations plugin (see Installation), all animation elements appear in the Bricks Builder element panel alongside the standard Bricks elements.
To use an animation:
- Open any page in Bricks Builder
- Search for the animation name in the element panel, for example “Aurora” or “Magnetic Button”
- Drag it onto your canvas. It renders immediately
- Use the sidebar controls to adjust colors, speed, intensity, and all other options
- Every change previews in real time. No page reload needed
Animations work on any section of your page. Most background animations are designed to sit behind your content, so place them inside a section and layer your text, buttons, and images on top.
Categories
The 97+ animations are organized in 9 categories:
Core Background
30Dynamic backgrounds that bring sections to life. Gradients, particles, waves, meshes, and organic effects. The largest category with options for every style.
Visual Effects
18Decorative effects for cards and containers. Glass cards, liquid images, border animations, grid distortions, and glow effects.
Showcase
13Presentation effects for galleries, cards, and content. Scroll galleries, stack decks, carousel spotlights, and interactive display components.
Animated Text
7Typography effects for headings and titles. Gradient text, morphing text, word rotation, reveal animations, and video-filled text.
Interaction
7User-triggered animations. Custom cursors, parallax effects (horizontal and vertical), folder-style reveals, and social bloom hover effects.
Advanced Effects
7Complex compositions. Holographic glass, raycast effects, nebula, and other GPU-powered effects.
Buttons
5Animated button effects with hover and click states. Ripple, Magnetic, Essence, Liquid, and Wave. Each with unique interaction feedback.
Menu Animations
3Animated navigation components. Expandable Tab, Dynamic Island, and Navigation Dock for modern menu experiences.
Page Transitions
7Smooth transition effects between pages. Apply once in your header or footer template and every internal link animates seamlessly.
Browse all animations and try live previews at Animations.
Controls
Every animation is a native Bricks Builder element. When you select it on the canvas, its controls appear in the Bricks sidebar exactly like any other element. There is no separate configurator or external panel.
The types of controls vary per animation but typically include color pickers (with support for multiple gradient stops), range sliders for speed, intensity, size, blur, and opacity, and toggles for features like mouse tracking, hover effects, autoplay, and responsive behavior.
Changes apply instantly in the Bricks canvas. You see exactly what your visitors will see, without saving or previewing on the frontend.
Each animation has a dedicated documentation page with a complete list of all its options. Find them under Animations in the sidebar navigation.
Page transitions
Page transitions create smooth animated effects when navigating between pages on your site. Bricksfusion includes 7 transition effects.
To use page transitions:
- Drag the Transition Page element onto your header or footer template so it loads on every page
- Choose one of the 7 transition styles from the sidebar
- Configure the speed and easing to match your site
- Every internal link on your site will now animate between pages
Page transitions intercept navigation events. External links and links with target="_blank" are not affected. Test your navigation after enabling a transition to make sure everything works as expected.
Performance
Animations range from lightweight CSS effects to GPU-powered compositions. Each animation's documentation page includes a performance indicator:
Safe to use multiple times on a single page. Examples: Gradient Text, Border Stream, Essence Button.
Best used once or twice per page. Automatically pauses when scrolled out of view. Examples: Beams, Circles, Celestial Flow.
Use once per page and avoid combining with other heavy animations. Examples: Holographic Glass, Grid Distortion, Nebula Rift.
Most animations automatically pause when they scroll out of the viewport and resume when visible again. Avoid using more than one Heavy animation per page. A good approach is to combine one Heavy or Medium effect with several Lightweight ones.
Documentation pages
Every animation has a dedicated documentation page accessible from the sidebar under Animations. Each page includes:
- A live interactive demo you can play directly on the page
- A complete list of all configuration options with their type, range, default value, and description
- Performance notes
- Links to related animations in the same category
You can also browse animations visually at Animations, where each card has a play button to preview the effect inline.
Troubleshooting
Animation elements do not appear in Bricks
Verify that the Bricksfusion Animations plugin is activated in WordPress and your license is active. Clear your browser cache and reload the Bricks editor.
Animation looks different on the frontend
Some animations may display slightly differently in the Bricks preview versus the live site. Always check the published page for the final result. If styles conflict, check for CSS that might override the animation container dimensions or overflow settings.
Page transitions break certain links
Page transitions intercept internal navigation. If a specific link should not animate, such as anchor links or e-commerce actions, check the transition element documentation for exclusion options.
Performance issues with multiple animations
Avoid using more than one Heavy animation per page. Combine one Heavy or Medium animation with several Lightweight effects. Check each animation performance indicator in its documentation page.
Animation not responsive on mobile
Most animations adapt automatically to mobile screens. Some include specific mobile controls in their options. Consider using lighter alternatives for mobile-heavy pages.