Premium Animations with HTML tags
Made by Leon A.
Declarative Animation Library
Easy For Beginners. Made for Designers
Free · Standalone · MIT
pin-section · stacking-cards · scroll-progress · scrollytelling-step · scroll-snap-y · smooth-scroll-to · tilt-parallax · image-parallax-frame · marquee-scroll-linked · pin-spacer · curtain-reveal · mask-reveal · text-reveal-up · scroll-snap-x · ken-burns-out ·
fade-up · slide-right · zoom-in · flip-in-x · bounce-in-up · blur-in · roll-in · back-in-down · pop-in · swing-in · rotate-in · fade-blur-up · zoom-in-up · fade-left · slide-up · zoom-out · flip-in-y · bounce-in · back-in-up ·
Click the attribute. Watch it change.
tilt-3d · magnetic · cursor-spotlight · glow-pulse · float · bob · orbit · beam-border · gradient-rotate-border · aurora · scanline · dot-grid-drift · spotlight-follow · wave-blob · starfield · gradient-mesh · floating-shapes ·
Effects compose. Until they collide.
Entrance
Segmentation & reveals
data-kui="—"
Nothing selected. Tick an effect to build the attribute.
Disjoint channels compose without a conflict.
horizontal-scroll · sequence-scrub · video-scrub · pin-until · scroll-spy · parallax-y · ken-burns · wipe-circle · lightbox-open · scroll-progress-bar ·
Scroll pulls the reel.
data-kui="horizontal-scroll distance:300vh target:.track"
One attribute, an endless deck.
data-kui="carousel target:'.deck-slide, .deck-dot' next:.deck-next prev:.deck-prev jump:.deck-dot peek:56% rest:0.6 main:0.85, fade-blur-up distance:280px 1800ms on:enter, pop scale:1.08 target:.yt-play on:load"
text-reveal-mask · scramble · typewriter · var-weight · odometer-roll · count-up · draw-signature · ken-burns · slat-assemble · masonry-reflow · flip-shuffle · confetti-burst · heart-burst · wipe-diagonal · parallax-rotate ·
A slice of every category
Entrance & exit 48
bounce-in
Drag me
Gestures & physics 13
elastic-pull
Scroll mechanics 12
scroll-snap-x
DECLARATIVE
Text & typography 26
scramble, blur-in
SVG & icons 17
draw-stroke
0
named effects
Numbers & data 13
count-up to:302, tween-from spring
Media & images 18
tween-from scale spring, slat-assemble
Measure, invert, play — the browser animates a layout change it already did.
Layout & FLIP 9
accordion-height
Hover & pointer 22
tilt-3d — point at it
Ambient 15
tween-from scale spring, aurora
Saved
Feedback & status 17
spinner-ring + badge-pop
Tween & spring 14
tween-from x rotate scale spring, blur-in
pin-section · pin-until · pin-spacer · stacking-cards · horizontal-scroll · sequence-scrub · video-scrub · scroll-progress-bar · scroll-progress-ring · parallax-y · parallax-x · parallax-scale · scroll-fade · scroll-desaturate · scrollytelling-step · scroll-spy · scroll-snap-x ·
View Timeline Animation
drag · drag-x · drag-inertia · throwable · elastic-pull · rubber-band · snap-back · swipe · swipe-x · long-press · magnetic-snap ·
Download today
CDN
One tag, from jsDelivr
<script src="https://cdn.jsdelivr.net/npm/kuinetic/dist/kuinetic.all.min.js"></script>
<!-- or css + js separately -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kuinetic/dist/kuinetic.min.css">
<script src="https://cdn.jsdelivr.net/npm/kuinetic/dist/kuinetic.min.js"></script>
<script>
kuinetic.kuinetic({ observe: true }).start()
</script>
Bundler install
npm install kuinetic
// then, in your entry file
import { kuinetic } from 'kuinetic'
import 'kuinetic/css'
kuinetic({ observe: true }).start()
Files you serve yourself
<script src="./kuinetic.all.min.js"></script>
<!-- or css + js separately -->
<link rel="stylesheet" href="./kuinetic.min.css">
<script src="./kuinetic.min.js"></script>
<script>
kuinetic.kuinetic({ observe: true }).start()
</script>