Next Bricks (Brickscore)

En un sitio animado, lo difícil no es animar, es que lo demás siga funcionando

Una animación al hacer scroll se monta en una tarde. Lo que lleva semanas es lo que viene después: el chat que deja de cargar al cambiar de página, las imágenes que llegan tarde, el efecto que parpadea en el móvil. Quien vende webs con movimiento lo descubre con el primer cliente que se queja de que el formulario ha dejado de funcionar.

Cada efecto es una pieza más que tiene que convivir con el resto del sitio. Next Bricks pone muchos efectos al alcance dentro de Bricks Builder, y por eso lo útil es saber, antes de usarlo, dónde están sus puntos delicados.

Lo que añade Next Bricks a Bricks

• Elementos con controles nativos de Bricks, en ocho categorías: textos, botones, menús, núcleo, medios, cursores, sliders y fondos.
• Efectos de texto como Mask Reveal, Blur Reveal, Scroll Reading, Typed o Variable Font Hover.
• Piezas de sitio como Sticky Footer, Site Loader, Cookies, Table of contents, Global Search, Chart, Toast, QR Code o Dark Mode, y desplazamiento suave con Lenis o con GSAP.
• Animator, un editor de animaciones con GSAP dentro del constructor.
• Page Transitions, transiciones entre páginas con Barba.js.
• Next UI, otra interfaz para el editor de Bricks, con desplegables para ordenar los elementos y cambio de tema en vivo.
• Una biblioteca de plantillas y componentes.

Animator: GSAP sin salir de Bricks

Animator organiza el trabajo en carpetas, líneas de tiempo y animaciones. Cada línea de tiempo se dispara al cargar la página, al hacer scroll o con eventos propios, y en el scroll se ajustan inicio, fin, scrub y pin. Se puede limitar por anchos de pantalla y por páginas concretas.

Dos detalles evitan horas de pruebas: una línea de tiempo tiene un único elemento disparador, así que un selector que coincide con varios crea varias líneas; y aplicar una propiedad «from» directamente puede producir parpadeo. Conviene llegar sabiendo lo básico de GSAP.

La letra pequeña de las transiciones de página

Page Transitions cambia el contenido sin recargar la página, y eso tiene consecuencias:

• Los scripts de terceros y los tuyos no se vuelven a ejecutar tras la transición. Hay que pasarlos al área de JavaScript del panel.
• Las imágenes que carga la transición no admiten carga diferida: en esas páginas van con carga inmediata.
• Con las transiciones activas se cargan los scripts de todos los elementos activados en el panel, aunque la página no los use.
• La espera debe ser igual o mayor que la suma de las animaciones de salida.

Y Next UI no convive con todo: su panel derecho no funciona con algunos plugins que modifican Bricks. Con Advanced Themer activo vuelve al panel izquierdo.

Instalar Next Bricks y por dónde empezar

Necesita Bricks Builder. Next UI funciona con Bricks 2.2 desde la versión 2.3 del plugin.

1. Sube el archivo de Next Bricks en Plugins y actívalo.
2. Ve a los ajustes de Bricks, apartado Next Bricks.
3. Activa solo los elementos que vas a usar.
4. Prueba los efectos en una página antes de activar las transiciones en todo el sitio, y deja las rutas acotadas al principio.

Otras piezas para Bricks en el catálogo

Todo esto se apoya en Bricks Builder. Si buscas animación y transiciones pero también formularios y datos externos, Bricksforge trae animaciones con GSAP, transiciones con swup.js, Pro Forms y un constructor de consultas a API, y carga solo las funciones que activas.

Si lo tuyo son piezas de interfaz más que efectos, BricksExtras reúne 49 elementos y funciones, como ventanas modales, tablas dinámicas o listas de favoritos. Y si ya trabajas con Advanced Themer, recuerda que el panel derecho de Next UI no convive con él.

Dudas antes de usar Next Bricks

¿Funciona sin Bricks Builder?

No. Sus elementos son elementos de Bricks y Animator y Next UI viven dentro de su editor.

¿Por qué mi chat desaparece al cambiar de página?

Con Page Transitions activo, los scripts de terceros no se vuelven a ejecutar. Hay que añadirlos al área de JavaScript del panel.

¿Puedo aplicar las transiciones solo a unas páginas?

Sí. Se definen rutas de origen y de destino; si se dejan en blanco, se aplican en todo el sitio.

¿Es compatible con Advanced Themer?

Con Advanced Themer activo, Next UI renuncia a su panel derecho y vuelve al izquierdo.

¿Tengo que activar todos los elementos?

No. Se activan desde el panel, y conviene activar solo los que vas a usar.