Animations Vault

Building some cool stuff for study and inspiration.

by Lucas Yule

Hero Illustration

These are much more complex but they kinda reuse the concepts of the previous ones. As in most animations, complexity lives in orchestrating the actions, timings, side effects and intention

Rotation

Line Drawing

Navigation Menu

A navigation menu built on top of Radix primitives

Performance Animations

Most animations in this project use initial, animate, and exit props, but this can cause performance issues due to component re-rendering.
For smooth 60fps animations, we can use animation hooks with motion values that animate without triggering re-renders.

0
0100

Animated Chart

This one also uses motion values to animate without re-rendering

Hold to Delete

Theme Switch

Theme switcher animation using clip-path

This technique is using clip-path, this element is duplicated and overlayed on top of the original one. The duplicated elements have different themes and we just reveal the one underneath by animating the clip-path property.

Theme switcher animation using clip-path

This technique is using clip-path, this element is duplicated and overlayed on top of the original one. The duplicated elements have different themes and we just reveal the one underneath by animating the clip-path property.

Dashed Text

Dynamic Island

Family Drawer

CSS only animations

Card Hover

Animations Vault

A curated collection of smooth UI animations

Download Arrow

Text Reveal

Snappy

Coin Spin

Trash Interaction

japan
jungle
new-york
desert

Multi-step component

This is step one

This is a multi-step component. It's a great way to guide users through a process.

Feedback popover

Apple Store-like card

Game

GAME
OF THE
DAY

Game

Vikings

A game about vikings

Are you ready? A game about vikings, where you can play as a viking and fight other vikings. You can also build your own viking village and explore the world.

The never ending adventure In this game set in a fairy tale world, players embark on a quest through mystical lands filled with enchanting forests and towering mountains. Players can explore the world, build their own viking.

Apple Store-like list

  • Game

    The Oddysey

    Explore unknown galaxies.

  • Game

    Angry Rabbits

    They are coming for you.

  • Game

    Ghost town

    Find the ghosts.

  • Game

    Pirates in the jungle

    Find the treasure.

  • Game

    Lost in the mountains

    Find your way home.

Multiple state button

Animated tabs

your wallet
send
swap
secure

Spring

actual duration

bouncing area

perceptual duration

Easing

linear

ease-in

ease-out

ease-in-out