HTML5 Animation with the GreenSock Animation Platform

The other day I tried to redraw the banner that I used to do in Animate CC with export to CreateJS on the GSAP platform using simple HTML and a couple of JS libraries.


I must say right away that the work turned out to be mostly of a research nature, and so far I am not going to use the work in the work for a number of reasons, which are listed at the end of the article. Nevertheless, the tool turned out to be quite easy 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 I had to insert the dealer’s contact information for advertising on local resources. Having unpacked the archive, I did not see anything except the finished html and folders with images and scripts. I thought it was a banner without a source (I constantly work on Animate CC) and climbed to see what was inside it. Inside was the usual layout, and a script of 20 lines animated all the simple interiors. I changed the banner and got to see what it is, GSAP and TimelineLite.


Not so long ago, there was a free minute and I reloaded one of my ready-made banners on GSAP

Createjs	GSAP

I didn’t specifically include fonts with a GSAP document, but everyone knows how to insert their fonts in an HTML document, but in Animate CC this process is a bit trivial, often enough I simply translate into crooked texts in the output file so that the document is smaller in size

GSAP Pros

1. Animate any CSS property. Pain, sorrow and shame Animate CC / CreateJS with default Animate CC movies - blur, shadows and other things that have been in CSS for a long time but are not supported (or poorly supported) inside canvas CreateJS
2. Native fonts and anti-aliasing. Any font, whatever you like, can be inserted into the HTML-document and not bother, the resulting file will not grow depending on the set of letters used in the document. Changing the font in the entire banner with a couple of words in CSS
3. Easing out of the box. In Aniimate CC, you need to constantly drag the curve of the easing function, here I did nothing to get a beautiful slowdown of the elements
4. FPS In the Animate document, a strong dependence of performance on FPS can be observed, you constantly have to select the optimal values ​​for each specific case so as not to consume a lot of CPU resources. In my example on the computer, the difference was not significant, but on the phones it was quite strong. And after you read the recommendations, you can only think what’s not slowing down there
5. Adaptability. Media queries are always much easier than counting the width / height inside the movie scripts. A rubber div, unlike a rubber canvas element, does not eat resources at all
6. Animation of any element on the page. You can easily “colorize” the existing layout in just a few minutes
7. The absence (or change) of the concept of key personnel. An element is imposed, for example, in that place and with the properties with which it should be at the end of the animation and using the from directive it sets properties from which it is animated to the current state. Or, using the to directive, the final state is indicated to it
8. Relative simplicity. No additional software needed, the code is very simple and compact

Pros of Animate CC

Applicable to banners, for the animation of elements on the page, these problems are minor.

1. Timeline and layers. In a multi-layer banner in bare HTML, you have to constantly do it for z-index, when in Animate you can just change the order of the layers as you like. Simultaneous animation of several layers is also not visually represented. Reordering frames in Animate CC is also visually easier.
2. Nested movie clips with your own animation. I haven’t figured out how to do this in GSAP, but I understand that I’ll have to write another separate function for a different timeline

What is the result

We have a classic double-edged sword: you can use any editor, but you need to monitor the location of the layers and recalculate the z-index in the head. The performance and simplicity gains can overcome the lack of visual timeline editing tools. Someone may, on the contrary, prefer exclusively scripted animation. GSAP banner development time 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 of this library, and I will definitely use it in the future for websites, but for banners, the development time is critical so far, here you need to look in each case, which will be more convenient.