GreenSock: A Primer on this JavaScript Animation Library

GreenSock: A Primer on this JavaScript Animation Library

GreenSock is a JavaScript animation library that makes it possible for web developers to create visual effects with enough design complexity, color, and fluidity that they come across as having been previously animated in a program like Adobe Flash. Ordinarily, when a user browsing a website with interactive elements sees visual effects dynamically reacting to actions taken by him or her such as clicking an input field and entering text into it, that is made possible because the website has loaded an external file after that file's contents were created and exported in a web animation program. A common type of interactive file used by HTML pages would be a Flash project that has been exported in the SWF file format.
The visual effect displayed in the pictured GIF file, however, is an example of what can be rendered natively by a web browser itself without the need to load any external animation files. Through nothing more than an HTML file working in unison with attached CSS and JavaScript files, it is possible to instruct a web browser program to illustrate a cartoon sloth dynamically appearing from behind an input field when that field is clicked and for it to make a special gesture after text has been entered into the field. With the help of the GreenSock library, every individual shape, line, and motion has been meticulously structured within the JavaScript syntax to be arranged to resemble a completed character.
As the GIF file also shows, the input field asks the user what his or her name is when it is first loaded -- but unlike most other text fields on websites, this question is smoothly shrunk and moved aside rather than made to spontaneously disappear once the user starts typing. Then, if the user clicks outside the input field to remove the text cursor from within it, the question is returned to its original position and size. If the sloth is in the middle of its climbing animation when this happens, the animation will simply reverse itself to make the sloth climb back behind the input field. For more information click here https://i.redd.it/xhccxcce5k611.gif.

GreenSock Javascript