Next Bricks (Brickscore)

On an animated site, the hard part is not animating, it is keeping everything else working

A scroll animation gets built in an afternoon. What takes weeks is what comes after: the chat widget that stops loading when the page changes, the images that arrive late, the effect that flickers on mobile. Anyone selling sites with motion finds out with the first client who complains that the form has stopped working.

Every effect is one more piece that has to coexist with the rest of the site. Next Bricks puts a lot of effects within reach inside Bricks Builder, and that is why the useful thing is to know, before using it, where its sensitive spots are.

What Next Bricks adds to Bricks

• Elements with native Bricks controls, in eight categories: texts, buttons, menus, cores, medias, cursors, sliders and backgrounds.
• Text effects such as Mask Reveal, Blur Reveal, Scroll Reading, Typed or Variable Font Hover.
• Site pieces such as Sticky Footer, Site Loader, Cookies, Table of contents, Global Search, Chart, Toast, QR Code or Dark Mode, plus smooth scrolling with Lenis or with GSAP.
• Animator, a GSAP animation editor inside the builder.
• Page Transitions, transitions between pages with Barba.js.
• Next UI, a different interface for the Bricks editor, with dropdowns to organise elements and live theme switching.
• A library of templates and components.

Animator: GSAP without leaving Bricks

Animator organises the work into folders, timelines and animations. Each timeline fires on page load, on scroll or on custom events, and for scroll you set start, end, scrub and pin. It can be limited by screen widths and to specific pages.

Two details save hours of testing: a timeline has a single trigger element, so a selector matching several creates several timelines; and applying a «from» property directly can cause flickering. It pays to arrive knowing the basics of GSAP.

The fine print of page transitions

Page Transitions swaps content without reloading the page, and that has consequences:

• Third-party scripts and your own do not run again after the transition. They have to be moved to the JavaScript area of the dashboard.
• Images loaded by the transition cannot be lazy loaded: on those pages they use eager loading.
• With transitions active, the scripts of every element enabled in the dashboard load, even if the page does not use them.
• The wait must be equal to or greater than the sum of the leave animations.

And Next UI does not get along with everything: its right panel does not work with some plugins that modify Bricks. With Advanced Themer active it falls back to the left panel.

Installing Next Bricks and where to start

It needs Bricks Builder. Next UI works with Bricks 2.2 since version 2.3 of the plugin.

1. Upload the Next Bricks file under Plugins and activate it.
2. Go to the Bricks settings, Next Bricks section.
3. Enable only the elements you are going to use.
4. Test the effects on one page before turning on transitions across the whole site, and keep the routes narrow at first.

Other pieces for Bricks in the catalogue

All of this rests on Bricks Builder. If you want animation and transitions but also forms and external data, Bricksforge brings GSAP animations, transitions with swup.js, Pro Forms and an API query builder, and loads only the features you enable.

If you are after interface pieces rather than effects, BricksExtras gathers 49 elements and features, such as modals, dynamic tables or favourites lists. And if you already work with Advanced Themer, remember that the Next UI right panel does not coexist with it.

Questions before using Next Bricks

Does it work without Bricks Builder?

No. Its elements are Bricks elements, and Animator and Next UI live inside its editor.

Why does my chat disappear when changing pages?

With Page Transitions active, third-party scripts do not run again. They have to be added to the JavaScript area of the dashboard.

Can I apply transitions to only some pages?

Yes. You define origin and destination routes; left blank, they apply across the whole site.

Is it compatible with Advanced Themer?

With Advanced Themer active, Next UI gives up its right panel and falls back to the left one.

Do I have to enable every element?

No. They are enabled from the dashboard, and it is best to enable only the ones you will use.