Web Animations

Understanding the Core Principles Behind Web Animations.

Introduction

Code

Web animations are based on a set of fundamental motion principles. By mastering these concepts, you can build everything from simple interface transitions to sophisticated interactive experiences. No matter how complex an animation appears, it ultimately comes from combining these core fundamentals.


Translation

moving from one place to another.

Rotation

Spinning around a point.

Scaling

Growing or shrinking.

Skewing

Distorting the shape.

Morphing

Change shape A to B.

Opacity

Fading elements in or out.

Blur

Adding or removing blur for focus effects.

Glow

Adding glow for some punch.

Color

Changing colors smoothly over time.

Clip / Mask

Revealing or hiding parts of an element creatively.

Perspective

Creating depth or 3D-like movement.



Combination

And some animations are just a combination of 2 or more effects.


Translation + Rotation

Translation + Scaling

Rotation + Scaling

Translation + Skewing

Scaling + Opacity

Blur + Opacity

Blur + Opacity + Color

Mask + Color

Perspective + Scaling

Autoplay

Timing Functions

Code

Define how the animation progresses over time - speeding up, slowing down, or following a custom curve.


Linear

Ease

Ease-In

Ease-Out

Ease-In-Out


Cubic Bezier


Then there is cubic-bezier where you can play all sort of timing functions. Use tools like cubic-bezier to play visually.


In a cubic-bezier curve:

  • y1 and y2 control how much progress the animation makes
  • x1 and x2 decide when those changes happen

Low y = slow, high y = fast, but the x-values control when that speed kicks in. That's why extreme curves can look strange or unexpected.


Examples:


cubic-bezier(0,0,0,1)

cubic-bezier(0,0,1,0)

cubic-bezier(0,1,1,0)

cubic-bezier(1,0,0,1)

These curves can create much smoother transitions that the default ones usually lack.


Default Ease-in-out

cubic-bezier(0.4, 0, 0.2, 1)

cubic-bezier(0.6, 0, 0.2, 1)

Autoplay

Linear Functions

Code

instead of using mathematically-derived Bézier curves, we can instead draw the easing curve we want, by specifying a set of individual points on a cartesian plane.


For example, this graph approximates an “ease” curve using 11 points:

Preview:

The linear() function uses values from 0 to 1 to represent the start and end of a transition. These values define the progress ratio over time. You can add multiple points, and they are evenly distributed across the animation duration. For more details, visit mdn website , use tools like eazing-wizard to play visually.


Examples:


spring

bounce

wiggle

overshoot

Hover/Click

Buttons

Code

Using different hover effects on buttons.


Translation + Scaling


Translation + Scaling + Rotation


Translation + Skew



Perspective


Color

Click

Card Flip

Code

A very simple yet satisfying animation.


Rotate + Perspective

1 2 3 4 5 6 7 8 9
this . addEventListener ( 'Click' , () => {
this . flipCard = true
});
1 2 3 4 5 6 7 8 9
const aboutMe = {
name : "Agung kurniawan",
title : "B.Sc. in Computer Science", contact : {
email : "47ungkrs@gmail.com", website : "WIP.com"
}
}

Click

Add To Files

Code

Working with the animate() method in JavaScript.

Files

Manage your files

Copy

Cut

Delete

Autoplay

Offset path

Code

An interesting effect using offset-path property to move an element along a custom path.



The offset-path property is supposed to accept all the following values:

Autoplay

Follow Path

Code

Follow any SVG path.


This SVG uses animateMotion to move a small circle along the cat-icon path, creating a looping motion effect where the dot follows the shape of the icon continuously.

Autoplay

Trace Path

Code

Trace any SVG path.


This SVG uses a stroke-dash animation with two layered paths; the top path animates stroke-dashoffset from 1 to 0 (using pathLength="1" ) to create a looping draw effect over a static outline.

Autoplay

Gradient Path

Code

Move your gradient along any SVG path.


This SVG uses a gradient stroke and rotates the gradient with animateTransform , creating a continuous 0–360° color movement effect across the path in a 6-second loop.

Hover/Click

Auth

Code

A creative auth animation by combining SVG tracing, translation and more effects.





PIN: INPUT


Doing the similar animation on input


PIN: 2025

Click

Morp SVG

Code

Morph from shape A to B

About

I ❤️ cat memes