Choppy animations (due to rounding?)

[teddybradford]

I'm seeing choppy animations for transforms. The most notable is scaling. It looks like basicScroll rounds intervals to 2 decimal places, which makes the animations appear choppy during scroll. Is there a way to allow more decimal places through the API?

[joakimgreen]

@teddybradford: Have you tried adding a short transition effect?

Smooth animations by adding a short transition to the element: transform: translateY(var(--ty)); transition: transform .1s.

[electerious]

One way is to add a transition as mentioned by @joakimgreen.

It looks like basicScroll rounds intervals to 2 decimal places, which makes the animations appear choppy during scroll.

Yes, basicScroll rounds values to 2 decimal places. It would be interesting to see if you animation improves when rounding to 4 decimal places. Could you try to change the following line?

- const rounded = Math.round(value * 100) / 100
+ const rounded = Math.round(value * 10000) / 10000

or inside the minified version:

- s=Math.round(100*a)/100
+ s=Math.round(10000*a)/10000

Let me know if this improves your animation so we can adjust the rounding in basicScroll :)

[bethanyr]

I'm also seeing this issue in Safari (10.1.1) in my usage of basic scroll. I tried making the change suggested above s=Math.round(10000*a)/10000 - and it looks better in Safari, but then I start seeing weird parallax behavior in Chrome.

[teddybradford]

I can also confirm that rounding to more decimal places makes transitions smoother.

[electerious]

v2.1.1 is out with precise property rounding :) Great improvement!