w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.49k stars 660 forks source link

[css-easing-2] Complex easing/timing functions #229

Closed rachelnabors closed 2 years ago

rachelnabors commented 8 years ago

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.

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 commented 3 years ago

As long as this solution isn't in lieu of pursuing a more flexible – if more complex – solution, I guess I don't see any problem with it. (Not that you needed my permission, haha. I just mean my concern above is invalid)

chriskirknielsen commented 3 years ago

@jakearchibald I definitely like the proposal. Have you given thought to a different syntax, closer to clip-path's polygon() with a comma separating each XY pair? I don't know of the implications but I know that the syntax has made it easier for me to debug paths (well, that and/or line breaks I suppose).

I know Amelia mentioned how folks with math backgrounds might prefer x1,y1 x2,y2 but since we have the polygon() precedent, I'd imagine it'd be more familiar. Or maybe make commas optional though I think it's nice to, at a glance, know if you're missing a coordinate in a pair.

jakearchibald commented 3 years ago

Have you given thought to a different syntax, closer to clip-path's polygon() with a comma separating each XY pair?

The issues with this are pretty well documented in this thread. Starting https://github.com/w3c/csswg-drafts/issues/229#issuecomment-228259642

jakearchibald commented 3 years ago

I tried to start a PR for this, but I'm not entirely sure what I'm doing when it comes to CSS specs https://github.com/w3c/csswg-drafts/pull/6533.

lukejagodzinski commented 2 years ago

What about taking inspiration from video editors https://youtu.be/xM9w0SSpgtc?t=289? If it worked for them it would work for CSS as well.

jakearchibald commented 2 years ago

The door remains open for other easing syntax in future, but I don't think we should avoid shipping a solution for another 5 years in search of some holy grail solution.

okikio commented 2 years ago

Here's a little demo to test that https://static-misc-3.glitch.me/linear-easing/.

Cases like bounce are tricky due to sudden changes of direction, but 50 points seems to do well.

@jakearchibald Inspired by your demo I created a spring-easing generator, it supports multiple variants of spring, and multiple libraries, e.g. gsap, animejs, WAAPI, linear-easing(...) (or whatever it's called once it's finalized), and more... (you can check out a demo on Codepen and Stackblitz).

IMO, we should call the easing function either discrete, linear, or smooth, I really don't think we're going to find a name that perfectly matches, so, as long as the core details (as well as any related issues) are worked out, it should be good.

jakearchibald commented 2 years ago

I've opened https://github.com/w3c/csswg-drafts/issues/7508 to look into curve-based custom easings.

tomasdev commented 8 months ago

@jakearchibald reviving this old thread (thanks @argyleink for pointing me here) -- there's a question I have around linear() being "enough"

Suppose you want a smooth animation at 60fps, a non-approximation would mean having 60 points inside linear. That is only if you want a one second animation. Factor in higher FPS displays and/or longer animations and you end up bloating the CSS pretty fast.

Would it be possible to re-open this issue, in favor of discussing the "longer term" (https://github.com/w3c/csswg-drafts/issues/229#issuecomment-983462481) solution that solves for interpolation / proper bezier curves?

jakearchibald commented 8 months ago

@tomasdev I don't think your assessment is correct. Check out this example. According to your maths, this would need 480 points to be smooth, but 76 here seems more than enough. For a 1.5s animation, 35 points seems more than enough.

That said, as per my previous comment, I opened #7508 for exploring curves.