Cubic-bezier-generator

cubic-bezier(x1, y1, x2, y2) met de hand intypen en de pagina herladen om het gevoel te controleren is een trage manier om een animatie te finetunen. Deze generator sluit die lus: sleep een van de controlepunthandvatten op de curve, of voer exacte getallen in de x1/y1/x2/y2-velden in, en de curve, de kopieerbare CSS-regel en de live animatievoorvertoning updaten bij elke verandering — geen build-stap, geen herladen.

De twee assen werken bewust verschillend. x1 en x2 blijven begrensd tussen 0 en 1, precies zoals de CSS-specificatie vereist van een cubic-bezier()-timingfunctie — een waarde daarbuiten is simpelweg ongeldig. Voor y1 en y2 geldt die beperking niet: sleep een handvat boven de bovenkant van het kader of onder de onderkant en de curve schiet voorbij het begin of het eind, wat precies is hoe veer- en stuitereffecten met een enkele easingcurve worden gemaakt.

Een getal zien is niet hetzelfde als de beweging zien, dus de voorvertoning toont twee identieke ballen naast elkaar in een lus: de ene beweegt met jouw aangepaste curve, de andere in een constant lineair tempo. Ze tegen elkaar zien racen is de snelste manier om te bepalen of een easingcurve echt het gewenste gevoel oplevert, voordat hij ooit een stylesheet bereikt. De vooraf ingestelde pagina's — de echte cijfers achter CSS' eigen ease-in-out-keyword, een eerlijke benadering van een overshoot die sommigen een bounce noemen, en de door Google gepubliceerde standaardcurve van Material Design — zijn kant-en-klare startpunten van waaruit je verder sleept in plaats van met lege controlepunten te beginnen.

Alles draait lokaal in je browser: geen upload, geen account, geen server-communicatie; de generator blijft offline werken zodra de pagina is geladen.