THIS IMAGE WILL APPEAR ON THE /BLOG PAGE WHERE ALL BLOGS ARE LISTED. Blank

10 benefits of animating with GreenSock

Lindsey Visser
geplaatst op 08-08-2016

(Klik hier voor de Nederlandse versie)

It is well-known that GreenSock is becoming mainstream in the world of interface animating. The framework found its real spark of life however, after being recommended by Google. How using GreenSock ended up for us? Fairly good! Our UX designer Bianca Zijtsel is currently very busy with the design of a new and upcoming homepage and introduction animation (the designs are momentarily being kept secret…)  for our new platform.

One of the difficulties people encounter when creating online animations is that they do not always perform at their full capacity in many different browsers. That is exactly the point where GreenSock comes with a solution to the problem at hand: it solves inconsistencies and makes sure that everything works exactly as expected. We are very enthusiastic about the GreenSock Animation Platform (GSAP), that is why we are glad to share our experiences with you as a development hero. Surely, we would love to hear your own experiences with GSAP. Tips and tricks are very welcome!

GreenSock brings animations to life

GreenSock brings animations to life by using Scalable Vector Graphics (SVG). You animate scenes, you create banner advertisements, you enhance project interfaces… the possibilities are endless! Especially for you, we have highlighted the benefits of (effectively) animating with GreenSock:


1. Performance

The ultra-high performances of GreenSock – in different browsers – are impressive. Furthermore, the GSAP animations perform effortlessly on both desktop computers, tablets, and smartphones. It is not needed to add a long list of prefixes, this is all being taken care of under the hood by GSAP.


2. Fluent transitions

The animation platform  is super-fast which results in fluent transitions. In fact, it is even twenty times faster than jQuery, according to the GSAP team. It is actually even faster than many CSS3 animations. Bonus: jQuery does work well in combination with GSAP.


3. Google DoubleClick and Adwords

GSAP is hosted on the CDN network by Google DoubleClick, this makes it work conveniently with AdWords.


4. Two-part stress test

You can easily benchmark the performance of your animation in different browsers by using the animation speed tester provided by GreenSock. You can choose between the number of animated dots and the engine.  


5. Multiple libraries

GreenSock has a variety of different libraries that are focussed on various types of animations. Have a look at the list, to see what you could utilise. It’s well worth the effort!

A nice example is this website from Alfred Service.

6. Tweenlite

If you are working on a project that needs a basic animation, then the most important library of GSAP: Tweenlite will suffice. This library can be used in combination with other libraries like MorphSVGPlugin if you deem it necessary to add more functionality to your animation.


7. Adobe Animate

If you like using Adobe Animate, then you can just animate with GSAP instead of TweenJS (part of CreatJS).


8. GreenSock’s Timeline

You could build complicated animations using TweenLite it is, however, hard to edit them. Your animation runs the risk of slowing down, this happens because you have to set the duration of every individual animation element. This is where GreenSock’s Timeline library comes in handy: a robust timeline to set up complicated animation sequences. This solves timing issues, by not relying on setting up the delay time.
 

9. Different types of elements

You can animate almost every element on a webpage: DOM-elements, elements inside of a canvas but also JS-objects and elements of an SVG. All these different types of elements can be placed in a sequence to animate them simultaneously.


10. Multiple timelines

So in effect, you are not bound to just one timeline. When you have designed an animation that is built up with various compounds, then you can create a different timeline for every part in the animation and place them in the main timeline.


Truly sounds perfect… However, the huge downside: when the user disables JavaScript, then GSAP has become useless.

Overall, GreenSock has impressed us with its many capabilities. Hence the diversity of animated elements on our website. Do you have any additions to our list of benefits? Let us know, and we would love to catch up with you!

Want to be kept up to date on the latest development news and vacancies?

Curious about the latest GreenSock updates?