(Klik 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:
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!
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.
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!