Jake Archibald on Nostr: Safari 17.2 includes linear() - a way to define custom CSS easings, enabling things ...

Safari 17.2 includes linear() - a way to define custom CSS easings, enabling things like bounce and elastic.

Here's a tool to convert JavaScript and SVG curves to this new format https://linear-easing-generator.netlify.app/?codeType=js&code=self.bounce+%3D+function%28pos%29+%7B%0A++const+n1+%3D+7.5625%3B%0A++const+d1+%3D+2.75%3B%0A%0A++if+%28pos+%3C+1+%2F+d1%29+%7B%0A++++return+n1+*+pos+*+pos%3B%0A++%7D+else+if+%28pos+%3C+2+%2F+d1%29+%7B%0A++++return+n1+*+%28pos+-%3D+1.5+%2F+d1%29+*+pos+%2B+0.75%3B%0A++%7D+else+if+%28pos+%3C+2.5+%2F+d1%29+%7B%0A++++return+n1+*+%28pos+-%3D+2.25+%2F+d1%29+*+pos+%2B+0.9375%3B%0A++%7D+else+%7B%0A++++return+n1+*+%28pos+-%3D+2.625+%2F+d1%29+*+pos+%2B+0.984375%3B%0A++%7D%0A%7D&simplify=0.0017&round=3