HTML5 Animation with the GreenSock Animation Platform

The other day I tried to redraw the banner, which I had previously done in Animate CC with exporting to CreateJS on the GSAP platform, using simple HTML and a couple of JS libraries.


At once I will make a reservation that the work has turned out for the most part of a research nature and for the time being I am not going to use the groundwork for several reasons, which are listed at the end of the article. Nevertheless, the tool was quite simple to use "from the first swoop," and I recommend it to anyone who wants to add a variety of "effects" to their pages.

Not so long ago, a car factory sent me a banner in which it was necessary to insert dealer contact information for advertising on local resources. Having unpacked the archive, I did not see anything except ready html and folders with images and scripts. I thought it was a banner without a source (I’m constantly working on Animate CC) and it’s helpful to see what’s inside it. Inside was the usual layout, and the script of 20 lines animated all the simple guts. I changed the banner and went to watch what it is, GSAP and TimelineLite.
')

Not so long ago, I had a free minute and I turned over one of my ready-made GSAP banners.

CreateJS	GSAP

I didn’t specifically include the GSAP fonts with the document, but everyone knows how to insert their own fonts into the HTML document, but in Animate CC this process is a bit nontrivial, quite often I just translate the curved texts in the output file so that the document is smaller

GSAP Pros

1. Animate any CSS properties. The pain, grief and shame of Animate CC / CreateJS with Animate CC defoltovymi filters - blur, shadows and other things that have long been in CSS, but are not supported (or supported poorly) within the canvas CreateJS
2. Native fonts and anti-aliasing. Any font of any kind can be inserted into an HTML document and not bother, the resulting file will not grow depending on the set of letters used in the document. Change the font in the entire banner a couple of words in CSS
3. Easing out of the box. In Aniimate CC, you have to constantly drag in the easing-function curve, here I did nothing to get a nice slowdown
4. FPS. In the Animate document, there can be a strong dependence of performance on the FPS, it is constantly necessary to select the optimal values ​​for each specific case in order not to spend a lot of CPU resources. In my example on the computer the difference was insignificant, but on the phones it was quite strong. And after you read the recommendations, in general it remains only to think what is there does not slow down
5. Adaptability. Media queries are always much easier than counting the width / height inside a movie as scripts. Rubber DIV, unlike the rubber canvas element does not eat resources at all
6. Animation of any element on the page. You can easily “paint” the existing layout in just a few minutes.
7. Absence (or change) of the concept of key personnel. An element is set up, for example, in the place and with the properties with which it should be at the end of the animation and with the help of the from directive it is set to properties, from which it is animated into the current state. Or with the help of the directive to it is specified the final state
8. Relative simplicity No need for additional software, the code is very simple and compact

Pros Animate CC

Applicable to banners, to animate elements on the page, these problems are minor.

1. Timeline and layers. In a multi-layered banner in bare HTML, you have to constantly make it over z-index, when in Animate you can simply change the order of the layers as you like. Simultaneous animation of several layers is also not visually represented. Changing the frame order in Animate CC is also visually easier.
2. Nested movie clips with its animation. I have not figured out how to do this in GSAP, but I understand that I will have to write another separate function for another timeline.

What is the result

We have a classic double-edged sword: you can use any editor, but you need to follow the layout of the layers and recalculate the z-index in your head. The gain in performance and ease of implementation can overpower the lack of visual timeline editing tools. Someone may on the contrary more like only script animation. The time to develop a banner for GSAP is directly proportional to the number of elements inside the container. The ease of animating elements on an already finished page is definitely a plus for this library, and for websites I’ll definitely use it in the future, but for banners so far the development time is critical, it’s necessary to look in each specific case what is more convenient.