jakearchibald
commented
3 years ago @benlesh I disagree for the reasons I gave above. Eg this as a library:
:root {
--ease-bounce: linear-easing(0, 0.004, 0.01, 0.03, 0.06, 0.09, 0.13, 0.18, 0.24, 0.3, 0.37, 0.45, 0.54, 0.63, 0.7, 0.8, 1, 0.963, 0.91, 0.86, 0.83, 0.8, 0.77, 0.76, 0.751, 0.7508, 0.758, 0.77, 0.79, 0.82, 0.86, 0.91, 0.96, 0.99, 0.97, 0.95, 0.94, 0.938, 0.943, 0.96, 0.98, 1, 0.99, 0.984, 0.988, 1);
}…could be used like this:
.whatever {
transition: transform 1s var(--ease-bounce);
}Even with cubic-bezier, most folks are copy-pasting something from https://easings.net/ rather than authoring their own.
Trying to add unnecessary complexity will stall this again. The more complex curve-based solutions can come later.
benlesh
chriskirknielsen
lukejagodzinski
okikio
tomasdev
In light of the Webkit team's implementation of
spring(), it's apparent we need to attend to the issue of complex timing functions sooner rather than later.The problem
Designers often need more advanced timing functions than can be described with cubic-beziers. They are not limited to spring functions, either. A common problem is there is no effective way to export a timing graph from Adobe After Effects to a timing function that could be used with CSS or with the Web Animations API. Currently designers have to hack together individual timing functions using CSS animation keyframes, which is impossible to do by hand in all but the most trifling instances.
spring()is just a bandaid.The solution
We need a format to write functions like
spring()in, one that we can export to from software like AfterEffects and prototyping tools that have yet to be built.I am not in a position to propose the technical specifications of this solution. But there are people who have that knowledge. I have invited them (@visiblecode) to share their proposals below.