question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Stepped easing is not working

See original GitHub issue

Your 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):

  1. Assign animation target.
  2. Animate target with a CSS property for a given number of steps as described in the docs.

JSFiddle example showing issue in action (code):

https://jsfiddle.net/51ovg8wh/7/

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:9

github_iconTop GitHub Comments

2reactions
mrkeyboardcommented, Jul 6, 2018

As far as I checked, any value in easing, stepped or a simple ease-out etc. isn’t working with 2.0.5. All of my animations appear linear – but maybe I’m using it wrong

1reaction
Rycochetcommented, Jul 24, 2018

Sorry - 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…

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found