Products
Animations
Drop any of the 97+ animations into your page as a native Bricks Builder element, with no external libraries and no shortcodes. Configure everything from the Bricks sidebar and watch every change render live on the canvas.
How it works
Once the Bricksfusion Animations plugin is installed and activated (see Installation), every animation element appears in the Bricks Builder element panel alongside the standard Bricks elements. Using one takes seconds:
Open a page in Bricks Builder
Any page works. The animation elements live in the regular element panel, so there is no separate app or window to learn.
Search for the animation
Type its name in the element panel, for example Aurora or Magnetic Button.
Drag it onto your canvas
It renders immediately, right where you drop it.
Layer your content on top
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.
Tune it from the sidebar
Adjust colors, speed, intensity and every other option with the native Bricks sidebar controls, the same way you edit any other element.
Watch it update live
Every change previews in real time on the canvas. No page reload, no save-and-check cycle.
Categories
The 97+ animations are organized in 9 categories, so you can jump straight to the kind of motion your section needs:
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, horizontal and vertical parallax, 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.
Browse every animation with live previews at Animations.
Editing in the Bricks sidebar
Every animation is a native Bricks Builder element. Select it on the canvas and its controls appear in the Bricks sidebar exactly like any other element: no separate configurator, no external panel.
The 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, so you see exactly what your visitors will see, without saving or previewing on the frontend. And every animation has a dedicated documentation page listing all of its options: find them under Animations in the sidebar navigation.
Animated buttons
The Buttons category ships 5 button effects, each with its own hover and click feedback: Ripple (ripple click), Magnetic (magnetic hover), Essence (essence glow), Liquid (liquid morph) and Wave (wave fill).
They behave like every other animation element: drag one onto the canvas, then shape its colors, speed and interaction from the sidebar. Try all five live at Animated buttons.
Page transitions
Page transitions add a smooth animated effect every time a visitor navigates between pages on your site. Bricksfusion includes 7 transition effects, and you set them up once:
Add the Transition Page element to a template
Drag the Transition Page element onto your header or footer template so it loads on every page of the site.
Pick one of the 7 styles
Choose the transition style from the sidebar.
Set the speed and easing
Configure both to match the feel of your site.
Navigate
Every internal link on your site now animates between pages.
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 carries a performance indicator so you can budget your page before you build it:
Safe to use multiple times on a single page. Examples: Gradient Text, Border Stream, Essence Button.
Best used once or twice per page. Pauses automatically when scrolled out of view. Examples: Beams, Circles, Celestial Flow.
Use once per page and never alongside another Heavy effect. Examples: Holographic Glass, Grid Distortion, Nebula Rift.
Keep it to one Heavy animation per page
Avoid combining Heavy animations with each other. A reliable recipe is one Heavy or Medium effect paired with several Lightweight ones.
Off-screen animations pause on their own
Most animations automatically pause when they scroll out of the viewport and resume when they become visible again, so idle sections stay cheap.
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
- Every configuration option with its type, range, default value and description
- Performance notes
- Links to related animations in the same category
Prefer to explore visually? Browse 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 that your license is active. Then clear your browser cache and reload the Bricks editor. The full setup lives in Installation.
An animation looks different on the frontend
Some animations display slightly differently in the Bricks preview versus the live site, so always check the published page for the final result. If styles conflict, look for CSS that overrides the animation container's 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's documentation page for exclusion options.
Performance drops with multiple animations
Use at most one Heavy animation per page, and combine one Heavy or Medium effect with several Lightweight ones. Each animation's documentation page shows its performance indicator.
An animation is not responsive on mobile
Most animations adapt automatically to mobile screens, and some include dedicated mobile controls in their options. For mobile-heavy pages, consider lighter alternatives.