GSAP performance and structure

Question

GSAP claims to use HTML5 to make outstanding animations for use on the Internet, but clearly says about its article on Greensock.com that it does not use the canvas frame in html5. It is clear that they use Javascript from the provided script , but it is very difficult to interpret. What other way could they use html5 animation without canvas? And if they use pure HTML5, does that mean that HTML5 animations are significantly faster than CSS, jQuery and Javascript?

Answer 1

There is no such thing as "html5 animation".

Mostly there are CSS3 animations (with CSS transitions or CSS animations) and Javascript animations.

CSS3 animations are usually well optimized (with a few quirks), but lack support (old IEs) and flexibility (you'll have to use JavaScript to configure them). They are best suited for freezing (with transitions) or basic animation.

JavaScript transition was used based on setInterval. A temporary loop, and within this loop the styles change. JQuery does this, and not very well.

Recently, Window.requestAnimationFrame () was introduced to replace these setInterval animations. Support is limited (old IEs), performance is high (because the browser can skip frames), and it always updates updates internally.

GSAP this requestAnimationFrame(), (, , ...). CSS3 JS ... , .

(canvas, svg... event webgl), .

Answer 2

GSAP Velocity.js, , GSAP ; , , ... , . , Javascript. .

HTML5, DOM Javascript, , CSS transform transition, DOM ( 10px ), - , ( ?). , -webkit- -moz-, . , DOM , . / DOM.

. CSS-, , Javascript, , / , . Javascript , , Javascript . , . CSS Javascript , jQuery, - .

*: , , IE9 10, , .