Animation Presets define how and when elements animate on your page. They combine predefined motion behaviours with a chosen trigger so you can build complex interactions quickly—without configuring every property manually.
Below is a clear breakdown of how presets work and what each category contains.
Animation Trigger
The trigger determines when the animation starts.
Common triggers include:
On Entrance – Animations fire as soon as the page or section loads.
You can fine-tune this behavior using:
- Duration – Controls how long the animation takes to complete.
- Delay – Adds a pause before the animation starts. Useful for staggering elements or creating sequences.
On Scroll – Animations activate when the element enters the viewport.
This trigger supports:
- Start Offset (vh) – The point (in viewport height units) where the animation begins.
- End Offset (vh) – The point where the animation ends.
These settings allow you to create scroll-based effects similar to parallax, progressive fades, and directional motion tied directly to scrolling.
Elementor
You can select the animation trigger from the Advanced Tab → Motion Effects panel:
Gutenberg
You can choose the trigger type from the Style Tab → Animations panel within UiCore Blocks:
Categories
Below is the complete list of available animation presets, grouped by category. These presets define how elements enter the viewport based on the selected trigger.
Fading
Smooth opacity-based transitions:
- Fade In
- Fade In Down
- Fade In Left
- Fade In Right
- Fade In Up
Zooming
Scale-based entrance animations with a focus on depth and emphasis:
- Zoom In
- Zoom In Down
- Zoom In Left
- Zoom In Right
- Zoom In Up
Bouncing
Elastic, high-energy animations with overshoot effects:
- Bounce In
- Bounce In Down
- Bounce In Left
- Bounce In Right
- Bounce In Up
Sliding
Directional entrance animations using linear movement:
- Slide In Down
- Slide In Left
- Slide In Right
- Slide In Up
Rotating
Rotational movements from different angles:
- Rotate In
- Rotate In Down Left
- Rotate In Down Right
- Rotate In Up Left
- Rotate In Up Right
Attention Seekers
High-impact animations designed to draw attention:
- Bounce
- Flash
- Pulse
- Rubber Band
- Shake
- Head Shake
- Swing
- Tada
- Wobble
- Jello
Light Speed
Fast, directional stretch animations:
- Light Speed In
Specials
Unique effects that don’t fit into other categories:
- Roll In
Zoom Out
Exit-style zoom animations for dramatic entrances:
- Zoom Out
- Zoom Out Down
- Zoom Out Left
- Zoom Out Right
- Zoom Out Up
Blur
Combined motion + blur effects for soft transitions:
- Fade In Blur
- Fade In Up Blur
- Fade In Left Blur
- Fade In Right Blur
- Fade In Down Blur
