Introduction
Smooth, high-performance animations can bring any Bricks Builder website to life — but most JS animation libraries are complex or heavy.
USAL.js (Ultimate Scroll Animation Library) is a lightweight alternative (~8 KB gzipped) powered by the Web Animations API, offering 40+ prebuilt animations, zero dependencies, and full 120 FPS performance.
In this tutorial, we’ll learn how to integrate USAL.js into a Bricks project and use its data-attribute syntax (data-usal) to animate elements as they appear in the viewport — without writing any custom JavaScript.
Enqueue the Library
First, include USAL.js on your site.
If you’re using a child theme or Scripts Organizer, WPCodebox, add this PHP snippet:
function enqueue_usal_script() {
wp_enqueue_script('usal-js', 'https://cdn.usal.dev/latest', [], null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_usal_script');This loads USAL globally across your Bricks pages.
Or you can just add the script in the Page Settings > Custom Code > Header scripts to load it only on specific page
<script src="https://cdn.usal.dev/latest"></script>
Tip: USAL auto-initializes itself, so there’s no need to call an init function.
Basic Syntax
Every animation is controlled via the data-usal attribute.
Here’s the basic pattern:
<div data-usal="fade-u duration-800 delay-200">Fade Up</div>You can chain multiple modifiers separated by spaces:
- fade-u → fade up
- duration-800 → 800 ms duration
- delay-200 → 200 ms delay
- once → play only once
Step 1: Add Animations in Bricks
You can add animations to any Bricks element using Attributes.
- Select your Bricks element (e.g., a heading or div block).
- Under the Style Tab → Attributes panel, click + Add Attributes.
- Set the name to data-usal.
- Enter one of the following values, depending on your desired effect:
Fade & Slide Examples
| Type | Example |
| Fade Up | fade-u duration-800 |
| Slide Right | slide-r delay-200 |
| Fade Down + Blur | fade-d blur duration-1200 |
Zoom & Flip Examples
| Type | Example |
| Zoom In | zoomin duration-600 |
| Zoom Out Right | zoomout-r duration-1000 blur |
| Flip Up | flip-u duration-900 |
Step 2: Split Text Animations
USAL supports built-in text splitting for letters or words.
[bunny_video id=”e94f27eb-0fb4-4eb5-9c82-c81c0bc50aa3″]
<p data-usal="fade-u split-letter split-delay-50">Animate each letter</p>
<h2 data-usal="text-shimmer split-word duration-2000">Shimmer per word</h2>Modifiers:
- split-letter – animates each letter individually
- split-word – animates words individually
- split-delay-200 – delay between elements
This is great for dynamic hero headings or call-to-action text reveals.
Step 3: Count Animations
Although the Bricks Counter element already supports number animations, you can also create simple, lightweight counter animations using only data attributes.
This method is especially useful if you already have text or heading elements in place — it allows you to add animated counting without restructuring your layout or replacing text elements with the Counter component.
<div data-usal="count-[1234] duration-4000">1234</div>
<div data-usal="count-[98.5] duration-4000">98.5%</div>The number inside the brackets is the target value.
The animation runs once as the element becomes visible.
Step 4: Scroll Timing and Triggers
USAL automatically triggers animations as elements enter the viewport, but you can refine when or how they play using modifiers.
| Modifier | Description |
| once | Play only once |
| threshold-50 | Trigger when 50% of element is visible |
| delay-500 | Add delay before start |
| linear, ease, ease-in, ease-out | Control easing |
<div data-usal="fade-u once threshold-50 delay-400 ease-out">
Smooth entrance when 50% visible
</div>Step 5: Create Sequences and Loops
USAL supports looping and timeline-like sequences using its line-[] syntax.
<!-- Loop continuously -->
<div data-usal="fade-u loop">Looping animation</div>
<!-- Keep final state -->
<div data-usal="line-[|50s+1.5o+50] forwards">Stay visible</div>
<!-- Multi-step blur timeline -->
<div data-usal="line-[b+5 o+0 | 30 b+2 o+50 | b+0 o+100]">Blur transition</div>
This makes it easy to chain subtle, repeating effects without writing JavaScript timelines.
Step 6: Combining with Bricks Interactions (Optional)
You can combine Bricks interactions with USAL triggers.
For instance, you could set Bricks’ built-in “on scroll into view” interaction to start an animation sequence for an entire section while individual elements use data-usal for micro animations.
Example workflow:
- Section fade in → controlled by Bricks interaction
- Headings and buttons animate → controlled by data-usal
Final Tip
Use simple combinations for best performance. For example:
<div data-usal="zoomin-u blur duration-1000 once threshold-70">Subtle zoom reveal</div>Avoid stacking more than 4 modifiers per element unless you’re building complex storytelling sequences.
Reference & Resources
That’s it!
You now have an elegant, low-code way to add scroll animations to your Bricks projects.
Experiment with combinations and delays to find the smoothest results — USAL handles the rest automatically.
