Op natuurkunde gebaseerde easing

Traditionele CSS-easingfuncties zoals ease-in of cubic-bezier() zijn beperkt tot eenvoudige curven. Hierdoor is het onmogelijk om complexe, op fysica gebaseerde effecten te maken, zoals stuiteren of veren. De timingfunctie linear() lost dit op door je een reeks stops te laten invoeren die complexe curven kunnen benaderen. Overgangen en animaties worden geïnterpoleerd op basis van rechte lijnen tussen de tussenstops, maar met voldoende tussenstops kan het vloeiend lijken.

Stapsgewijze implementatie

1. De curvestops genereren: Het is niet praktisch om handmatig tientallen punten voor een veer of stuiter te plotten. Gebruik een timingfunctie uit een externe bibliotheek of gebruik een tool om een bestaande JavaScript-easingfunctie of een SVG-pad om te zetten naar de linear()-syntaxis. Optioneel: Sla deze timingfuncties op als aangepaste CSS-eigenschappen voor hergebruik op je site.
2. Definieer de timingfunctie: Pas de gegenereerde stops toe op de property transition-timing-function of animation-timing-function, of via de afkortingen transition of animation.
3. De duur aanpassen: In tegenstelling tot JavaScript-fysica-engines, waarbij de duur wordt afgeleid van fysieke eigenschappen (massa, stijfheid), vereist CSS nog steeds een vaste duration. Je moet de duur misschien aanpassen om het gewenste effect te krijgen.

Voorbeeld: Spring Easing

In dit voorbeeld wordt getoond hoe je een aangepaste linear()-functie gebruikt om een veereffect te maken dat de doelwaarde overschrijdt voordat het tot rust komt.

.spring {
  /* Define the physics-based easing as a reusable variable */
  --spring-easing: linear(0, 0.016 0.5%, 0.06 1%, 0.226 2%, 1.116 5.4%, 1.375 6.6%, 1.527 7.7%, 1.565 8.2%, 1.585 8.8%, 1.581 9.3%, 1.559 9.8%, 1.458 10.9%, 0.937 14.3%, 0.784 15.5%, 0.693 16.6%, 0.67 17.1%, 0.657 17.7%, 0.671 18.7%, 0.729 19.8%, 1.042 23.3%, 1.13 24.5%, 1.182 25.6%, 1.201 26.7%, 1.192 27.7%, 1.156 28.8%, 0.977 32.2%, 0.925 33.4%, 0.894 34.5%, 0.882 35.6%, 0.887 36.6%, 0.907 37.7%, 1.045 42.4%, 1.069 44.5%, 1.059 46.3%, 0.979 50.9%, 0.96 53.4%, 0.966 55.3%, 1.013 59.9%, 1.024 62.3%, 0.986 71.2%, 1.008 79.9%, 0.995 88.9%, 1);


  /* Apply the easing with a duration that fits the spring's complexity */
  /* MANDATORY: Always include a duration; linear() does not calculate it automatically */
  transition: scale 0.8s var(--spring-easing);
}

.spring:hover {
  scale: 1.2;
}

Voorbeeld: Bounce Easing

In dit voorbeeld wordt getoond hoe je een aangepaste linear()-functie gebruikt om een stuiterend effect te maken.

.bounce {
  /* Define the physics-based easing as a reusable variable */
  --bounce-easing: linear(0, 0.214 14.7%, 0.386 23.7%, 0.598 31.9%, 0.999 44.7%, 0.807 52.6%, 0.762 56%, 0.747 59.4%, 0.758 62.4%, 0.793 65.6%, 0.999 77.4%, 0.961 81.2%, 0.949 84.8%, 0.956 88%, 0.993 95.5%, 1);


  /* Apply the easing with a duration that fits the bounce's complexity */
  /* MANDATORY: Always include a duration; linear() does not calculate it automatically */
  transition: scale 0.4s var(--bounce-easing);
}

.bounce:hover {
  scale: 1.2;
}

Belangrijke overwegingen

• Prestaties: Pas voor de soepelste op fysica gebaseerde animaties linear() toe op eigenschappen die op een afzonderlijke thread worden uitgevoerd, zoals transform en opacity.
• Precisie versus payload: Meer stops resulteren in een vloeiendere curve, maar vergroten ook de grootte van je CSS. Bij de meeste generatoren kun je de curve 'vereenvoudigen' om de optimale balans te vinden tussen vloeiendheid en codegrootte.
• Vermijd dekking voor stuiteren: Als je stuiterversnellingen toepast op opacity, kan dit visueel storend flikkeren als de waarde onder 0 of boven 1 komt.
• Toegankelijkheid: Complexe, op fysica gebaseerde animaties kunnen afleidend zijn of bewegingsgevoeligheid veroorzaken bij sommige gebruikers. Respecteer altijd de voorkeuren van gebruikers door deze animaties te verminderen of uit te zetten.

@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}

Reservestrategieën

CSS-reserve

Voor browsers die linear() niet ondersteunen, voer je een standaard easing-functie in als fallback. De browser negeert de waarde linear() als deze niet wordt herkend en valt terug op de vorige geldige declaratie.

.element {
  /* Fallback for older browsers (standard smooth exit) */
  transition: transform 0.8s ease-out;
  
  /* Modern browsers will override with the physics-based easing */
  transition-timing-function: linear(0, 1.1, 0.95, 1.02, 1);
}

Reserve-JavaScript-bibliotheek (Motion/GSAP)

Optioneel: Als een natuurgetrouwe fysica-animatie essentieel is, zelfs in oudere browsers, gebruik je een JavaScript-bibliotheek zoals Motion (motion.dev) of GSAP (greensock.com) om de animatie te verwerken als linear() niet wordt ondersteund.

1. Ondersteuning detecteren: Gebruik CSS.supports() om te controleren of de browser de functie linear() verwerkt.
2. Voorwaardelijk laden/toepassen: Als de functie niet wordt ondersteund, gebruik je de spring- of bounce-implementatie van de bibliotheek.

/* Detect if the browser supports the linear() function */
const supportsLinearEasing = window.CSS && CSS.supports('animation-timing-function', 'linear(0, 1)');

if (!supportsLinearEasing) {
  /* 
     Example using Motion (motion.dev) for a spring fallback.
     This should only be initialized if native CSS support is missing.
  */
  import("https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js").then(({ animate, spring }) => {
    animate(".element", { transform: "scale(1.2)" }, {
      easing: spring({ stiffness: 100, damping: 10 })
    });
  });
}

Je kunt ook @supports gebruiken in CSS voor explicietere functiedetectie:

@supports not (animation-timing-function: linear(0, 1)) {
  .element {
    /* Alternative experience for unsupported browsers */
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}