Loading experience
Trigger: scroll-enter
Type: slide-up
Easing: spring
Stagger: 80ms
Duration: 600ms
Offset: 20%
Djia Bricks Module · Animation Engine

Scroll.Animate.No code.

A full scroll-based animation engine built directly into Bricks element controls. Add entrance, exit, hover and scroll-linked animations to any element — configure everything visually.

Get the Plugin →
6+
Trigger types
10+
Animation types
5
Easing functions
Any
Bricks element
Animation Playground

Configure. Preview.
Copy the settings.

Click the element to replay. Adjust settings to see changes live.

Djia Animate — Live Preview
Interactive
Animation type
Easing
Duration
600ms
Delay
0ms
// Bricks controls Type: Slide Up Easing: Smooth Duration: 600ms Delay: 0ms
Element
Click element or press Play to animate
Trigger Types

6 triggers — any interaction
that makes sense

Choose when your animation fires. Each trigger has its own configuration options — offset, repeat, toggle and more.

📜
Scroll Enter
Fire when the element enters the viewport. Control the offset — top, center or bottom of screen. Most used trigger for content reveals.
Viewport offset · Once or repeat
🔼
Scroll Exit
Fire when the element scrolls out of view. Use for exit animations, fade-outs or sticky element reveals when the user scrolls past.
Exit offset · Fade out
🖱️
Hover Enter / Leave
Fire when the mouse enters or leaves the element. Combine Enter + Leave for smooth hover in/out transitions on any Bricks element.
Enter + Leave pair
👆
Click
Fire on click. Toggle mode plays the animation forward on first click, reverse on second — perfect for expand/collapse animations.
Toggle mode available
🚀
Page Load
Fire immediately after the page loads. Set a delay and stagger to create a smooth hero entrance animation sequence without any extra work.
Delay + stagger
📌
Scroll-linked Progress
Link animation progress directly to the scroll position. The element animates as you scroll — create storytelling layouts, counters and parallax effects.
Sticky scenes
Scroll Enter Demo

Scroll down to
trigger animations

⚡
Slide from Left
Element slides in from the left side when entering the viewport. Configure offset percentage and easing.
🌊
Slide Up
Classic entrance animation — slides up from below. Smooth cubic-bezier easing by default.
🎯
Slide from Right
Mirror of the left slide — element enters from the right. Great for alternating left/right layouts.
🔮
Scale In
Element scales up from slightly smaller. Spring easing creates a satisfying physical feel.
💫
Fade + Slide
Combine fade opacity with position movement for a polished entrance that works everywhere.
🎪
Stagger Children
Apply the animation to a parent and all children animate in sequence with configurable delay between each.
Easing Functions

5 easing functions —
click to preview

Each easing controls how the animation accelerates and decelerates. Click any card to play it.

▶
Smooth
Default. Slow start, fast middle, slow end. Works for everything.
▶
Spring
Overshoots then settles. Physical, bouncy feel. Great for UI elements.
▶
Linear
Constant speed. Best for marquees, progress bars and looping.
▶
Elastic
Strong overshoot with bounce. High energy, playful character.
Stagger

Stagger children with
one setting

Apply the animation to a parent element and set a stagger delay. Every direct child animates in sequence — no per-element setup needed. Works with any delay value in milliseconds.

  • Set stagger delay once on the parent — children inherit automatically
  • Works with all animation types — fade, slide, scale, rotate
  • Configurable direction — first to last or last to first
  • Combine with different easing per child if needed
  • Works on grid, flex, list and any container layout
🚀
⭐
🎯
💫
🔮
🎪
🌊
⚡
Scroll-Linked Progress

Animate on scroll position

Link any element's animation directly to how far the user has scrolled. Progress bars, counters, text reveals — all in sync.

Scroll progress
0%
0
Animateanything

onscroll

Scroll-linked progress connects animation directly to scroll position. As you scroll, the progress bar, counter and text all respond in real time.

Inside Bricks Builder

Configure animations
from Bricks controls panel

No JavaScript files. No custom CSS. Every animation option lives inside the standard Bricks element controls panel — alongside spacing, typography and color.

Bricks Builder — Element Controls → Djia Animate
My Element
Click to preview
Trigger
Trigger
Offset
20%
Repeat
Animation
Type
Easing
Timing
Duration
600ms
Delay
0ms
Stagger
80ms
No JavaScript required

Scroll. Animate.
Ship faster.

Add scroll animations to any Bricks element without writing a single line of JavaScript or CSS keyframes.