Bringing bounce and elastic easing to CSS | HTTP 203
Вставка
- Опубліковано 21 жов 2024
- You can ease-in, you can ease-out, but CSS doesn't let you bounce. Jake and Surma chat about a proposal to fix that.
cubic-bezier editor → goo.gle/3lkC239
The thread from 2016 to now → goo.gle/3cYR0Hs
Easings cheatsheet → goo.gle/3xKnD5i
Jake's silly worklet proposal → goo.gle/3EaW4Vc
Linear easing generator → goo.gle/3I1nXBr
Linear gradient syntax → goo.gle/3o83T8c
Spec change draft → goo.gle/3o3l7DW
More videos in the HTTP 203 series → goo.gle/HTTP203
Subscribe to Google Chrome Developers here → goo.gle/Chrome...
Also, if you enjoyed this, you might like the HTTP203 podcast → goo.gle/HTTP20...
#HTTP203 #ChromeDeveloper #WebDev
![[FA24] Intro to iOS - L2: UIKit and AutoLayout](http://i.ytimg.com/vi/b_t5BHV609w/mqdefault.jpg)
I'd call it "linear-spline" instead of "linear" to match the mathematical notation. I really like the idea 👍
I really like how you explained your process of solving the problem…
Best answer ever (that I totally used towards deisgners in the past) Surma: "mmm, jsut don't do it"
That is a really smooth idea - looking forward to see this in action
I like how this gives the freedom to make any 1d shape at any resolution.
I think this could be easily expanded to have smoothed functions, the same way graphing libraries do point interpolation (quadratic, log, etc). This would probably solve long animations without having to have like 500 points.
Like I said, the door is still open for something more complicated, but folks insisting on doing that first is the reason we still don't have a shipped solution.
@@jakearchibald I agree. I meant it "could be easily expanded" (in the future).
Great proposal. Removes more js from having to run real-time and create choppy animations. Big thumbs up
As an alternative to "linear", would it make sense to call it "lerp" (linear interpolation)?
linear gradient is "linear" as opposed to "radial"
Or the oft forgotten "polar"
damn, this could revolutionize some stuff :D
can't wait.
Best video, learnt about css functions internal maths, and thanks to Jake for implementing this. 👍
Nice proposal!
It would be much easier to just concatenate several cubic-bezier curves. You just need to extend the existing notation.
That's exactly what I was thinking
See the linked issue for people trying and failing to make that case. What would the syntax look like for a bounce animation?
@@jakearchibald Taking the curve at 6:08 as example, but with only one bounce for simplicity.
cubic-bezier(0.6, 0, 0.9, 0.5, 50%, 0.3, 0.5, 0.7, 0.5)
The first 4 numbers are the first curve and the last 4 numbers are the second curve.
The 50% in the middle means that the first curve goes from time 0% to 50% and the second curve goes from time 50% to 100%.
And, obviously, the starting point of the second curve must be the end point of the first one.
@@hrgwea those are the handle x&y positions, right? But what about the point positions? Sure, your 50% is handling the x positions, but what about the y?
@@jakearchibald The Y can be an additional percentage next to the X.
Using the same example as before:
cubic-bezier(0.6, 0, 0.9, 0.5, 50%, 100%, 0.3, 0.5, 0.7, 0.5, 100%, 100%)
The 100%, 100% at the end can be omitted since the full curve must always end at that corner.
To be honest, I would just like to see springs implemented finally.
So cool!
Linear makes perfect sense to me ; it's linear interpolation between the provided points. Agree the y-x coordinates is odd... Also TIL that linear-gradient supports a second position! :P
I still hope spring makes it. It works very well in iOS and produces much more natural animations than guessing durations and cubic Béziers ever could.
You'd be able to do that, and more, with the linear() proposal
@@jakearchibald Sure, but you'd have to simulate the spring you want to get a desired duration and linear samples.
Has adding other interpolation modes been considered? I’d expect slerp to give a more convincing animation then linear for any given number of points in a many common examples (such as the bounce)
How do you slerp without a sphere?
@@SimonBuchanNz You're right, I wrote this without too much thought. I suppose I just meant a higher-order polynomial or spline interpolation
I can see the ease worklet being useful if it needed to change depending on context (distance, time, maybe frame rate, accessibility settings?) or parameters (number of bounces!). Would that still be useful over animation worklets? I've not looked into them.
Quite like linear, also because it has the same syntax as linear-gradient.
Why not chaining the hacked Bezier and allow for the first point to be anythere vertically? start at 0,1, curve down then end at 1,1 would make the bounce, with very minimal addition to the current way this works, with a duration or spread of each function. Where can I pitch this?
It's already pitched in the github issue linked in the description and I mentioned it briefly in the video. That method works for certain types of curves, but it's messy for other types. It's also hard to convert existing code to that format. Cubic splines are probably the right way to do it, but that should come later. The best solution is the one that developer can use, which means getting agreement on the spec, and agreement from browsers. Blocking everything on some other solution means we'll still be talking about what's possible 5 years later, and developers will have nothing they can use in production.
I thought about just calling it point() as you are representing a point in this 2d space. Also, this "ugly" amount of coordinates defining this function, you could probably add an alias just like we do with ease and ease-in. Doing the same thing but defining a common easing-function which hides the true implementation.
Should be very easy as well right?
Nice topic!
I don't think point() works, because a point has an x and a y, whereas this is a 1 dimensional thing. But yeah, aliasing is a good idea, we mentioned this just after 14:28
Is this the start of HTTP 203 Advent? Or is it just a coincidence it started on the 1st of Dec?
Nahhh, just coincidence
@@jakearchibald BOOOOOO.. BOOOOO.... lol.. fair enough..
Robert Penner would be proud...
thanks
I wonder how the chrome dev tools would handle modifying these.
Hmm, wouldn't it be even easier till have the ability to have more than one cubic-besier in the same timing function?
What syntax would you use to describe the same bounce?
Does anyone recommend any resouces that can help me get to the point of being able to critically think about what they're talking about?
There are links in the description, but I'm happy to answer questions here too
I think the resource is called, “20+ years of comp sci and web technology experience” 😅
No, trust me, I’m in the same boat as you, Carlos. Just trying to keep up 🙂
I really want video editing apps On playStore chromebook
Ugh! I had to disable the stretch effect on my Pixel 6. Too annoying
Wow q1 2022 isnt it to early?
Keyframes
I code without shoes on, just saying.
😎
Imho, with all the respect, it's really bad solution. It would probably be better with worklets. I don't get the problem with that. You just calculate as many points up front as your frame rate, so most of the time it's 60. With `linear` you still have to do some calculations and it's not really different from calculating it through JS. Ok it's maybe different because you have to load extra resource. It would be better to combine several cubic-bezier functions like cubic-bezier(x1, y1, x2, y2) 20%, cubic-bezier(x3, y3, x4, y4) 60%, cubic-bezier(x5, y5, x6, y6) 100%. It's probably not great as it's kinda like a new data type. I don't know how it's represented in CSS internally but it's an array of functions and stops. So probably could be combined into a new function: multi-cubic-bezier(x1, y1, x2, y2, 20%, x3, y3, x4, y4, 60%, x5, y5, x6, y6) which is similar to the linear-gradient function
It's this kind of thinking that's blocked any solution in this space since 2016. Try and write bounce and elastic easings using your proposal.
@@jakearchibald I'm not saying that my solution is perfect but I would image something like this: multi-cubic-bezier(.4,0,.8,.5,35% 100%,0,-0.5,1,.5,75% 100%,0,-0.25,1,.25,85% 100%,0,-0.1,1,.1) - as you can see there are sets of 2 percentage values which tells where should the next spline point be located on the x,y axes. Imho, the best solution is proposed by you with worklets as it gives the most flexibility. CSS already became kinda like programming language with introduction of variables and functions, and you just can't create functions for every crazy idea that a developer can come up with. There needs to be a way to programmatically define your problem.
@@jakearchibald and also I didn't say why I don't like solution with linear, so let me fix that. So if it's for solving this issue with bounce animation, then you have to provide something like 50 points. As far as I understand if you provide 50 points, then the time is divide by 50 equal chunks and with each value in the linear function you control the "position" (percentage value of the transition). So if I want in the first 1/50 of the time go to 50% then stay there, and then go to 100% in the last 1/50, then I would still have to define 50 points to create "the horizontal line" linear(0,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,.5,1). That's bad. Of course, you might have some "improvements" and maybe write it as linear(0,repeat(.5,48),1). And then what if someone creates transition easing function like this linear(.2,.5,.8). Is it 3 steps where transition is not going to 100%? Or is it 4 steps and if the last number is not 1 then the extra step is always added with 1.0? Also is always the first step 0?
@@lukejagodzinski read through the CSS issue to see the discussion of ideas like this. Something like multi-cubic-bezier could work for some types of easing, but it gets messy for things like Greensock's rough easing. The best solution is the one that developers can actually use, rather than getting bogged down in standards discussion for another 5 years, which is what would happen with worklets, particularly as some browsers have been very slow to implement things that are worklet related. In the meantime, existing imperative easing functions can be converted to the linear() format easily, which isn't true of things like multi-cubic-bezier.
@@jakearchibald RoughEase wouldn't be a problem with what I proposed but maybe I'm missing some detail. I agree that any solution is better than no solution for the next few years. And as you mentioned in the discussion on GH, it lefts doors open for other solutions. I think the inspiration should be taken from places where there is similar kind of the problem. One place like that is video editing. You have a timeline and you can animate values in multiple ways. You can have linear easing, you can have smooth points, you can control curve between points with control points. You can control position (each axis individually), rotation and basically any property and there is no issue of having 2 values for the same point in time.
PLEASE bring back the dislike count, it makes it so much harder to use your platform! 😞
I'd rather you just told me what you disliked about this video
@@jakearchibald naw loved it! just really miss seeing the count for less reputable videos so I know what to expect 😞
@@jakearchibald plus nobody reads comments, it's why UA-cam shoves them down on mobile so they're hard to even find 😆
First 💪🎊🎉