Modern Day Web Animation Solutions

October 13, 2015 by Curran & Connors

gsapHeaderImg

Interactivity and animation are vital components of today’s Web.

Immersive interaction in digital delivery has been evolving over the years; it is to the point that most people expect the application to respond to them to some degree, to show some signs of life. Additionally, video and moving image have emerged as the gold standard for content with their quick and multilayered conceptual delivery.

Due to the great advances in both our hardware and our software, we are more capable than ever to view high-fidelity video and complex interactivity and animation on all devices. For example, we have super-powerful laptops, desktops and now even smartphone processors that rival the speed and power of their larger digital brethren. On the software side, browsers are consistently evolving to meet the needs of motion on the Web—Microsoft even did away with the Internet Explorer line in favor of the sleeker and more modern Microsoft Edge, and Mozilla (Firefox) and Google (Chrome) are always pushing the limit on what technologies can be used.

Over the past few years, one of the staples in Web video and complex Web animation, Flash, was let go by many of the top tech companies. This all culminated recently with a sweeping movement away from support for Flash within the browser. The new solutions for complex and simple web animations and interactions are vast and include HTML5-compatible technologies like CSS, SVG and JavaScript. The standout technologies available to replace Flash are based in JavaScript but capable of interacting with CSS, HTML5, SVG and other libraries such as the oft-utilized jQuery. These technologies, or to be more accurate, JavaScript libraries, are not exactly new either—they have been tested and are ready for action.

GSAP

GSAP has browser compatibility all the way back to IE6 and is highly modular for choosing what size package you need to include in your project, based on the functionality requirements and the devices you plan to showcase your work on. GSAP stands for GreenSock Animation Platform, and it is a very powerful and robust JavaScript library for animating elements in a modern HTML5 environment. It can be used for simple animations such as UI interactivity, hero sliders, banner ads or more complex animations such as parallax and scrolling animations and narrative animations.
There are many similarities between what a developer could do with Flash and what a developer can accomplish with GSAP.

Let’s start with a few differences first.

1. GreenSock takes advantage of the powerful and popular HTML5, as it is just another member of the family.

Flash required a browser plugin to even be able to load, and having this was entirely up to the end user. GSAP is just a JavaScript library, and JavaScript is already loaded in every browser. This puts the power back into the developers’ hands because now all they have to do is include the GSAP library that they want to use, and the end user will have everything needed to view the content.

2. Web utilities, such as CDNs and browser caching, know GSAP; they’re friends.

Load times and performance optimization being very important checkpoints of a good website, the fact that GSAP can integrate with optimization tactics is very valuable to site owners who want to show great, complex animations and not give up performance.

3. Flash had fleas.

Man, does it stink when a pet has fleas! Everyone starts getting all itchy, and the whole house has to get gassed out to solve the problem. Well, when one of Flash’s many security problems was exposed, the same sort of thing had to be done to your website or the end user’s device. GSAP doesn’t have that problem—it comes with a collar.
 


Did I take the metaphor too far? The zero-day bugs that kept popping up like a never-ending game of Whac-A-Mole in Flash simply aren’t an issue in JavaScript.


 

4. Open source for everyone!

Flash has its ActionScript and all, but once you export from Flash, the only way to make edits is to go back into Flash, make your changes and then re-export the whole thing and try again. With GSAP, you just jump on the server and edit the code and voila!

5. Why do I have to keep recharging my phone battery?

Decoding and rendering Flash videos and animations put a heavy burden on the CPU, thus draining the battery a bit more quickly than HTML5-based, JavaScript solutions, such as GSAP.

 

Differences aside, here’s how GSAP spells Flash.

Well, those are some of the differences that show GSAP is stronger, faster and more secure than its predecessor; now for some similarities. Any animator will tell you there is nothing like having a timeline to set tweens on. Well, GSAP has that too!
 

See the Pen Understanding GSAP’s Timeline by Sarah Drasner (@sdras) on CodePen.


 

1. A developer can create a timeline and set events to occur along it via tweens or tweening.

Tweening or inbetweening is the process of generating frames between two images to create the appearance that the two images are moving smoothly from one position to another.

Tweening at certain frame rates, with a minimum of 12 frames per second, creates an effect known as the persistence of vision. This is the term for the optical illusion wherein still images are chained together to form the illusion of motion. Disney animators masterfully employed this technique to create their cartoons, using principles they called The Illusion of Life.

Timelines in GSAP can even be nested and fired off based upon events in conjoining timelines. GSAP uses the “tick,” which is the metronomic basis for the timeline and is powered by the modern JavaScript animation technique, requestAnimationFrame, which is the preferred and optimized way to carry out animations in the browser. The tick is where you set the frame rate you want the animation to run at, for example, 24 fps, 30 fps or 60 fps.
 

See the Pen Responsive Huggy Laser Panda Factory by Sarah Drasner (@sdras) on CodePen.


 

2. Motion and shape tweens can also be achieved by animating SVG with GSAP.

An SVG or Scalable Vector Graphic is like a PNG or JPEG image, except that it is written in code in syntax similar to the markup of HTML. Therefore, the SVG can be animated like a member of the DOM or Document Object Model, which is basically the architecture of an HTML document and what CSS and JavaScript interface with to style and make changes in real time to a Web page.

The time for HTML5 animations has come.

All the pieces have come together for GSAP to shine:

1. The normalization of JavaScript,
2. The relative departure of Flash from the Web, and
3. The solutions to any past security questions JavaScript held in the past.

GSAP stands as the de facto solution for creating interesting and immersive animations on the web.

With its variable deployment sizes, plugin extensions, extreme compatibility and very powerful interface, GSAP is the multitool to make every front-end Web developer tool belt complete.

Animations and immersive experience are two of the keys to the modern Web and the interfaces we are capable of developing. GSAP is an extremely robust and optimized tool for creating these experiences online. The rich interfaces that are possible are definitely something to consider integrating into your website in order to establish a more interactive and welcoming user interface.



« Back to Blog