Sajid

Motion Design

The Easy Way to Do Web Animations.

Introduction

Code

Web animation is built on a few core motion principles. Once you understand these, you can create almost any animation you imagine, from subtle UI transitions to complex interactive effects. Every animation, no matter how advanced it looks, is just a combination of these basics.


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.



Combinination

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)


My favorite

cubic-bezier(0.3, 0.8, 0.2, 1.3)

HOVER/CLICK

Buttons

Code

Using different hover effects on buttons.


Translation + Scaling


Translation + Scaling + Rotation


Translation + Skew

CLICK

Card Flip

Code

A very simple yet satisfying animation.


Rotate + Perspective

John Wick

John Wick

7.5/10 807K

2014

1h 41m

R



John Wick is a former hitman grieving the loss of his true love. When his home is broken into, robbed, and his dog killed, he is forced to return to action to exact revenge.

CLICK

Add to Cart

Code

Make purchasing fun for your users.


Translation + Scaling + Opacity

CatMart

Bro buy something...


Apple

Banana

Cat

AUTOPLAY

Offset Path

Code

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

AUTOPLAY

Follow Path

Code

Follow any SVG path.

AUTOPLAY

Trace Path

Code

Trace any SVG path.

AUTOPLAY

Gradient Path

Code

Move your gradient along any SVG path.

HOVER/INPUT

Auth

Code

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


SVG: HOVER





PIN: INPUT


Doing the similar animation on input


PIN: 2025

CLICK

Morph SVG

Code

Morph from shape A to B.

About

I ❤️ cat memes