DNA Animation

A proposal for implementing baseline animations as part of DNA, for low-lift customizable CSS animations.

✨ View on Github ✨

CSS-Only Animation

All animations are simple CSS transitions to keep things performant.

Intersection Observer

Uses Intersection Observer API to detect visibility.

Simple but Customizeable

Any animation can be easily customized down to duration, easing, move distance, and more.

Fade

class="animate"

Add the animate class to begin animating. By default a simple fade is added.

Fade Up

class="animate anim-fadeup"

Add more specific animations using one of the preset animation classes. Animation can be applied at the section level, or on individual elements.

Fade Left

data-anim-delay="0" class="animate anim-fadeleft"

Add data-anim-delay attribute to stagger animations.

Fade Right

data-anim-delay="1" class="animate anim-faderight"

Add data-anim-delay attribute to stagger animations.

Skew

class="animate anim-skew"

All animations are simple CSS transitions, for easy implementation and good performance.