Naar inhoud
FFrosthaven Lab

17 — 11 varianten

Motion

Wat CSS niet kan: timelines met relatieve posities, grid stagger, veerfysica, SVG-morph, motion path en scroll-scrubbing. Op anime.js v4.

Grid stagger

anime.jssignatuur

Vertraging per element berekend uit de positie in een raster, vanuit het midden naar buiten. Dit is de handtekening van anime.js en met de hand nauwelijks te schrijven. Als achtergrondpatroon achter een hero, of als laadmoment.

Timeline

anime.jshero

Eén tijdlijn

Elk element hangt aan het vorige, niet aan een setTimeout.

-=350 · relatieve positie

Elk element hangt aan het vorige met een relatieve positie, niet aan een setTimeout-ladder. Verander je één duur, dan schuift de rest mee. De juiste manier om een hero-intro te bouwen.

Spring drag

anime.jsfysica
SLEEP

Sleep de bol en laat los: hij veert terug met echte veerfysica in plaats van een easing-curve. Sleep hem. Voor configuratoren, sliders en alles wat tactiel moet voelen.

SVG line draw

anime.jssvg

Het pad tekent zichzelf. createDrawable regelt strokeDasharray en -offset voor je, ook op paden waarvan je de lengte niet kent. Voor logo-intro's, kaarten en procesdiagrammen.

SVG morph

anime.jssvg

De ene vorm wordt de andere, ook als het aantal punten verschilt. Voor een icoon dat van staat wisselt, of een merkvorm die door de pagina heen verandert.

Motion path

anime.jssvg

Een element volgt een SVG-pad en draait mee met de richting. Voor een routekaart, een levering die onderweg is, of een procesanimatie. De rotatie is wat het overtuigend maakt.

Scroll observer (sync)

anime.jsscroll

Blok 1. Scroll dit paneel; de animatie rechts is aan de scrollpositie gekoppeld en loopt terug als je omhoog scrolt.

Blok 2. Scroll dit paneel; de animatie rechts is aan de scrollpositie gekoppeld en loopt terug als je omhoog scrolt.

Blok 3. Scroll dit paneel; de animatie rechts is aan de scrollpositie gekoppeld en loopt terug als je omhoog scrolt.

Blok 4. Scroll dit paneel; de animatie rechts is aan de scrollpositie gekoppeld en loopt terug als je omhoog scrolt.

Blok 5. Scroll dit paneel; de animatie rechts is aan de scrollpositie gekoppeld en loopt terug als je omhoog scrolt.

De animatie is aan de scrollpositie gekoppeld en loopt terug als je omhoog scrolt. Scroll het linkerpaneel. sync: 0.35 geeft een lichte vertraging, waardoor het vloeiend voelt in plaats van vastgeplakt.

Split text

anime.jstypografie

Letter voor letter, netjes opgeruimd

De tekst wordt automatisch in regels, woorden en letters opgesplitst en weer netjes hersteld bij cleanup. Scheelt het handmatig in spans hakken, en de originele tekst blijft in de DOM voor screenreaders.

Scramble text

anime.jstech

FROSTHAVEN LAB

Zelfde decrypt-effect als in de tekst-categorie, maar dan als ingebouwde functie met controle over de tekenset en de duur. Minder eigen code, en het respecteert de breedte van de oorspronkelijke tekst.

Waarde-animatie

anime.jsstats

0

objecten

0

bezoeken

0

jaar

Anime animeert ook gewone objecten, niet alleen DOM-elementen. Handig voor tellers, voortgangswaarden en alles waar je zelf bepaalt wat er met het getal gebeurt.

Wanneer anime.js, wanneer CSS

keuze

CSS-keyframes

default · 0 kB · werkt zonder JS

anime.js v4

~25 kB modulair · alleen waar nodig

Timeline & stagger

afhankelijkheden en rasters

Spring, morph, scrub

onmogelijk in pure CSS

De rest van dit lab draait op CSS-keyframes, en dat blijft de default: nul kilobytes, geen hydration, werkt zonder JavaScript. Anime.js komt erbij zodra je iets nodig hebt dat CSS niet kan: een tijdlijn met relatieve posities, stagger over een raster, veerfysica, SVG-morph of motion path, of een animatie die aan de scrollpositie hangt en terug moet kunnen lopen. Modulair geïmporteerd is dat ongeveer 25 kB.