scrollTop animation flashes when animating

[TomS-]

I've pretty much dropped jQuery in favour of pure Javascript. One thing I used jQuery for was animating scrollTop, now I'm using anime.js for that.

However, it causes "flashes" and doesn't feel smooth.

https://codepen.io/anon/pen/mBLGRx - if you just keep clicking the page, you can see the flash.

[LukeCarlThompson]

Seems to be working for me for me. I can't see any flashing, testing on Safari and Chrome. Have you tried different easing functions?

[LukeCarlThompson]

Oh I think I just saw it. Seems to happen only when I click to move to the next section before the previous animation has finished.

[TomS-]

@LukeCThompson it happens a frame before the animation ends, best way to see it is click twice and wait for the animation to end. While this demo doesn't show it off greatly, it's very noticeable when you scroll to a section of a website and before the animation ends you get a flash of the website (where you scrolled from).

Edit:
It appears it's not overriding the current animation, correctly, it will force the last frame. Clicking twice will cause it to flash the last frame when the duration is up.

[TomS-]

This seems to fix it:

document.body.addEventListener("click", function() {
  anime.remove("html, body");
  anime({
    targets: "html, body",
    scrollTop: [window.pageYOffset, "+=" + window.innerHeight]
  });
});

I have actually come across this before with other elements, for example an open and close on an accordion. I think that if you call anime() on an object that already is animating it should remove it before setting the animation again. That way it doesn't fight. Or if anime is called on an object but it's animating the same properties.

[juliangarnier]

This is an issue that shows up often.
Maybe I should clarify this in the docs, but it's still annoying to call anime.remove() every time.

think that if you call anime() on an object that already is animating it should remove it before setting the animation again.

It can be useful to keep the option to call multiple anime instance on the same element without canceling the animations when multiple parameters are animated.

I'm looking into this right now. Looking for a way to detect if the element as a similar property animated and only cancel this property, but not the full animation.

I'm just a bit worried about the performance cost of this kind of initial check.
It might end up as an optional parameter.

[TomS-]

@juliangarnier Just to let you know, I've tried 3.0.0 and it's so much better now. Thank you very much 👍 . I'm using this in a different example where an underline follows the menu link, it was flashing before as per ScrollTop, no longer happening.

I understand 3.0.0 isn't finished, but I had to compile it as .min.js currently isn't working.

[thariddler]

I see same flushes with completely different animations. Looks like this is the issue with this library itself.

[WagnerMoreira]

@TomS- thanks a lot for pointing this anime.remove() this solved an issue for me as well!

[juliangarnier]

Fixed in V3.

[2fernandez]

Hi @juliangarnier
just trying out anime for the first time, The first thing I noticed is the flashing with animation scaling, I am using version 3.0.1 ... @TomS- has not worked for me, unfortunately.

[yashsway]

I tried @TomS- method of removing any animations from the target element first before animating again, and it worked.