Great animations aren’t just about what moves…

They’re about how it moves.

The difference between a basic animation and a premium experience often comes down to timing — how fast something appears, when it starts, and how it flows.

In Levo, every animation is powered by three simple controls:

• Duration

• Delay

• Easing

Mastering these can completely transform how your website feels.

Why Animation Timing Matters?

Even a well-designed animation can feel off if the timing isn’t right.

• Too fast → feels rushed and jarring

• Too slow → feels laggy and unresponsive

• Wrong easing → feels robotic

Good timing makes animations feel natural, smooth, and intentional.

Understanding the Basics:

All timing in Levo is measured in seconds. This gives you precise control over how your animations behave.

Duration:

Duration defines how long an animation takes from start to finish.

Recommended Ranges:

1. 200–300ms : Fast & Snappy

Quick and responsive.

Best for: hover interactions, button clicks, micro-interactions

2. 400–600ms : Smooth & Natural

Balanced and easy on the eyes.

Best for: text reveals, images entering the screen, most UI animations

3. 800ms+ : Slow & Dramatic

More noticeable and cinematic.

Best for: hero sections, large visual reveals, storytelling moments

Delay: When the Animation Starts

Delay controls how long the system waits before starting the animation.

Pro Tip: Staggered Animations

One of the easiest ways to make your UI feel premium is by staggering animation.

Instead of everything appearing at once, elements reveal one after another.

Example:

• Card 1 → 0ms delay

• Card 2 → 100ms delay

• Card 3 → 200ms delay

This creates a smooth wave-like effect that feels polished and intentional.

Where to Use Delay

• feature cards

• lists

• grids

• testimonials

Anywhere you want a progressive reveal.

Easing: How the Animation Feels

Easing defines the speed curve of the animation.

Instead of moving at a constant speed, easing allows animations to accelerate and decelerate — making them feel more natural.

Types of Easing:

1. Linear

Moves at a constant speed. Feels mechanical, rarely recommended.

2. Ease

Starts slow → speeds up → slows down. Most natural and widely used option.

3. Ease In

Starts slow, then speeds up. Best for: elements exiting, subtle build-ups.

4. Ease Out

Starts fast, then slows down. Best for: elements entering the screen, most UI animations.

5. Ease In Out

Starts slow and ends slow. Best for: smooth, elegant transitions, premium experiences.

Putting It All Together

Here’s a simple combination that works well in most cases:

• Duration: 400–600ms

• Delay: slight stagger (if multiple elements)

• Easing: Ease Out or Ease In Out

This creates animations that feel smooth, modern, and professional.

Practical Use Cases

1. Buttons:

• Duration: 200–300ms

• Easing: Ease Out

2. Cards / Grids:

• Duration: 400–500ms

• Delay: staggered

• Easing: Ease In Out

3. Hero Sections:

• Duration: 600–800ms

• Delay: slight

• Easing: Ease

4. Text & Content:

• Duration: ~500ms

• Easing: Ease Out

Best Practices

To get the best results:

• Keep timing consistent across the page

• Avoid mixing too many different speeds

• Use delay to create flow, not confusion

• Prefer natural easing over linear motion

• Test animations in real usage (not just design view)

Good timing should feel invisible — users shouldn’t notice it, but they’ll feel it.

Animation timing is what separates a good website from a great one.

With Levo, you have full control over:

• how fast things move

• when they appear

• how they feel

When used correctly, these small details create a smooth, polished, and premium experience.

Start experimenting with duration, delay, and easing —
and you’ll immediately notice the difference in your designs.