Easing functions, or timing functions, change the animation’s look and feel by affecting the animation rate (speed). Easing functions enable us to create animations that resemble natural motion which can result in improved, more delightful UX and having a better impression on the users. We’ve...
The underlying principle is the one we’ve gone through: combining easing functions and multiple color stops to create approximations that look smoother than plain linear-gradients. Actually, the scrim-gradient above is generated using a custom set of coordinates but if we look at the easing gradi...
CSS easing functions made easy BézierSpringBounceWiggleOvershoot Presets InOutIn OutOut In SineQuadCubicQuartQuintExpoCircJumpAnticipate Customize Extra Space Top Extra Space Bottom X1 Y1 X2 Y2 Preview Show Linear Comparison Play Preview Infinite Duration Move XMove YWidthHeightScaleRotateOpaci...
The end result is ok for now and a lot prettier in relevant use cases. Resources MDN: Timing functions— cubic bezier and steps explained. Chroma.js— a fantastic color lib that I use to mix the colors. Plant— photo by Igor Son on Unsplash. ...