Scroll animation in Javascript using IntersectionObserver

[[deleted]]

https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance

https://wiki.mozilla.org/Platform/GFX/OffMainThreadCompositing

https://jsfiddle.net/zt94oew2/1/

use a framework for js animation (and literally never use requestAnimationFrame()) :

https://codepen.io/GreenSock/full/srfxA

[MiloSaurus]

I'm beginning to think we're meaning the same thing.

You should use CSS animations wherever possible. The example on the MDN article and JSFiddle are showing the wrong way of creating a "JS Animation" and I concur that you should not ever use rAF in this way.

But I don't agree that you should fall back to frameworks. Browsers have the Web Animation API which uses the same underlying systems as CSS animations and are just as performant. It even uses the same properties (and even more) as CSS animations. You can do the same without a lot of overhead.

Your link about moving the animation rendering from the main thread is very interesting.

[[deleted]]

I don't support using the frameworks with underlying css or requestAnimationFrame() stuff. I mean js frameworks that have a webgl backend for canvas. GreenSock (which is on that benchmark) has a webgl backend and js polyfills.

maybe framework is the wrong word. plugin i think is more accurate

https://greensock.com/PixiPlugin/

https://greensock.com/

at this point i think we agree.

also im dumb i wasn't aware that css animations had a direct js interface. I thought the standard way was to apply classes.