Stepped easing is not working
See original GitHub issueYour system information
- VelocityJS version: 2.0.5 via CDN
- Browser: Firefox, Chrome
- Operating System: macOS
Please describe your issue in as much detail as possible:
I attempted to animate a selector with stepped easing via the following script:
animator.velocity({ width: 500 }, [ 3 ]);
However, instead of animating in three distinct steps it made a smooth transition from it’s initial state to 500px wide.
Steps for reproducing this issue (code):
- Assign animation target.
- Animate target with a CSS property for a given number of steps as described in the docs.
JSFiddle example showing issue in action (code):
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:9
Top Results From Across the Web
Clever Uses for Step Easing - CSS-Tricks
We use the step easing only for the beginning portion of the animation before we transition into a fluid “finalizing the install” tween....
Read more >Trouble with stepped ease - GSAP - GreenSock
The main issue is: The image does not seem to be "stepping" but is just smoothly transitioning through as if there were no...
Read more >[css-easing] Non-linear step easing #5770 - GitHub
step () is useful for reducing the resolution of an animation, but it always applies to linear easing. It'd be nice if step()...
Read more >CSS: Don't ease each step in animation - Stack Overflow
I was wondering if there was a way to apply CSS easing within an animation to the complete animation and not for each...
Read more >animation-timing-function - CSS: Cascading Style Sheets | MDN
The non-step keyword values (ease, linear, ease-in-out, etc.) ... If no animation-timing-function is specified on a keyframe, ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
As far as I checked, any value in
easing
, stepped or a simpleease-out
etc. isn’t working with 2.0.5. All of my animations appear linear – but maybe I’m using it wrongSorry - I have actually fixed this locally, but it’s mixed in with some other things that I’m doing for the release, and I have had absolutely no time to finish that up over the last month or so - things are looking promising for having a few hours over the week though…