About Animation

About Animation

About Animation

Be Smooth with Arcs

Make fluid and believable animation

✨

Connect to Content

Add layers or components to infinitely loop on your page.

✨

Connect to Content

Add layers or components to infinitely loop on your page.

What Are Arcs?

Arcs refer to the natural, curved path objects follow when they move.

Arcs refer to the natural, curved path objects follow when they move.

Most objects in the real world rarely move in straight lines.

Like when bees are floating from flower to flower, they fly in paths with arcs rather than in a perfectly straight line.

It Would Be Weird...

if objects in nature were made of straight lines instead of curves.

if objects in nature were made of straight lines instead of curves.

Don't Be a Stiff

Straight-line movements feel mechanical and unnatural. Or you could say, robotic.

Straight-line movements feel mechanical and unnatural. Or you could say, robotic.

Incorporating arcs makes animations feel fluid, natural, and visually appealing

Our Bodies Create Arcs

Turning heads, swinging arms, running strides, everything we do naturally follow arcs. It's how we move around. Take note of the arcs you make when exercising.

Turning heads, swinging arms, running strides, everything we do naturally follow arcs. It's how we move around. Take note of the arcs you make when exercising.

Not Everything Needs Arcs

Arcs aren’t necessary for precise, mechanical motion. Some objects move directly in straight paths. Like when these elevator doors open.

Arcs aren’t necessary for precise, mechanical motion. Some objects move directly in straight paths. Like when these elevator doors open.

Observe the Difference

Click on each button to watch two different animations. One has arcs inside its movment, the other doesn't.

Without Arcs

With Arcs

What do you notice?

The balloons look more like they are floating when animated with arcs in their paths. It's more interesting and believable than the paths without arcs, where the balloons move too perfect and straight, which is very unnatural.

Observe the Difference

Click on each button to watch two different animations. One has arcs inside its movment, the other doesn't.

Without Arcs

With Arcs

What do you notice?

The balloons look more like they are floating when animated with arcs in their paths. It's more interesting and believable than the paths without arcs, where the balloons move too perfect and straight, which is very unnatural.

Observe the Difference

Click on each button to watch two different animations. One has arcs inside its movment, the other doesn't.

Without Arcs

With Arcs

What do you notice?

The balloons look more like they are floating when animated with arcs in their paths. It's more interesting and believable than the paths without arcs, where the balloons move too perfect and straight, which is very unnatural.

By designing motion paths with gentle curves versus straight lines, you add realism and more personality to your animations.


What's next? Learn about easing and how it can also contirbute to fluid and natural motion.

ⓒ 2025 Michael Szabo. All Rights Reserved