CSS easing & cubic-bezier-visualizer
Sleep de SVG-handvatten, typ waarden of kies uit 30+ benoemde curves. Live animatie-preview en kant-en-klare uitvoer voor vanilla CSS, GSAP en Framer Motion.
Wat is een cubic-bezier-curve?
Een cubic-bezier-curve is een parametrische curve die wordt gedefinieerd door vier punten: een beginpunt (altijd 0,0), een eindpunt (altijd 1,1) en twee controlehandvatten waarvan jij de coördinaten kiest. CSS, JavaScript-animatiebibliotheken en de meeste designtools gebruiken deze curve om de voortgang van een animatie (0 → 1) te koppelen aan de voortgang van een waarde (0 → 1) — buigt de curve onder de diagonaal, dan loopt de animatie eerst achter en haalt daarna in; erboven schiet hij eerst vooruit en komt dan tot rust. De vier getallen cubic-bezier(x1, y1, x2, y2) zijn simpelweg de coördinaten van die twee handvatten.
Hoe gebruik je deze visualizer
Sleep de twee gekleurde handvatten in de SVG om de curve vorm te geven, of typ de vier waarden direct in. Kies uit 30+ benoemde presets — klassiekers als easeOutCubic, de complete Robert Penner-set, plus moderne UI-toolkit-curves (Material, Apple swift-out). De live voorvertoning animeert een voorbeeldvorm met je huidige curve, zodat je de timing voelt en niet alleen de vorm ziet. Het uitvoerpaneel geeft dezelfde easing in drie smaken: vanilla CSS cubic-bezier(), GSAP CustomEase en de array-tuple van Framer Motion — kopieer wat bij jouw stack past.
De juiste curve kiezen
Gebruik ease-out-curves (handvatten laag-dan-hoog) voor entrées — content komt snel binnen en zakt dan in, wat responsief aanvoelt. Gebruik ease-in voor exits — het oog hoeft vertrekkende content niet nauwlettend te volgen. Gebruik ease-in-out voor verplaatsingen op het scherm, zoals een kaart die van het ene vak naar het andere schuift. Back / overshoot-curves (waarbij y2 > 1) geven karakter aan speelse momenten, maar voelen kinderlijk aan in financiële of productiviteitsinterfaces. Linear is zelden de juiste keuze voor UI-animatie — het voelt mechanisch aan, ook al is het wiskundig gezien gelijkmatig.
Veelgestelde vragen
Waarom liggen y-waarden soms buiten 0–1?
x1 en x2 worden door de specificatie geklemd op 0–1 (controlepunten kunnen niet voorbij de uiteinden van de tijdlijn), maar y1 en y2 mogen onder 0 of boven 1 uitkomen. Zo werken "back"-easings — de waarde schiet kort voorbij zijn doel en komt dan tot rust, zoals een veer die op zijn plek terugveert.Waarom past de Material-curve bij de ene set waarden en Material 3 bij een andere?
(0.4, 0, 0.2, 1) kwam in 2014 met Material 1. Material 3 (2021) introduceerde een andere familie gebaseerd op een aangepast veersysteem dat niet te herleiden is tot één enkele cubic-bezier — wat je hier ziet is de dichtstbijzijnde klassieke benadering. Voor exacte Material 3-timing gebruik je Googles officiële tokens.Moet ik cubic-bezier of spring physics gebruiken?
Kan ik dit in CSS animeren zonder JavaScript?
transition-timing-function en animation-timing-function, die beide op de compositor-thread van de browser draaien zonder ook maar één regel JS. De bibliotheekuitvoeren zijn alleen nuttig als je al met die bibliotheek animeert — zet de cubic-bezier in het ease-veld.Wat is de juiste duur?
Werken deze curves in mobiele WebViews?
cubic-bezier() staat sinds CSS3 in de specificatie en zit sinds 2013 in elke mobiele browser. De animatiesoorten die je hier ziet (transform translate / rotate / scale) worden overal GPU-gecomposiet, dus de voorvertoning is representatief voor de prestaties in productie.