Animating with Greensock - our experiences

Animated websites are no longer a novelty in development land. With the introduction of mobile users Flash is no longer the standard. But what should you use? We decided to test this ourselves by developing an animation for the Spilberg website.

For our animation we chose Greensock. This is one of the most popular animation tools on the market today. The performance on different platforms and the fluid transitions were the reasons we chose this development tool. And - if we’re being honest - trying out a new tool is always exciting. Besides that, there are a lot of other reasons to pick Greensock for your animations, we’ve listed these reasons in a previous blogpost.

So we decided on the tool, now al we needed was a developer. Sander Giesing is  the man we chose to make our Greensock magic happen. Around 2000 Sander started with animating landing pages and banners. Back then he did that with Adobe Flash. A few years later he came across Greensock, at the time Greensock was mainly a good tween library for Flash. When it became clear in 2005 that flash wouldn’t work on mobile he decided to learn more about animated SVG files. That is when the fascination started, the only problem? At the time computers weren’t ready to process the projects Sander dreamt of.

That didn’t stop him from practicing though! And that is also his number one tip for people who want to get into online animations: “practice makes perfect, I know it’s a cliché but it is so true. Animating takes time, a lot of time. You really need passion and persistence to get the hang of it and to get better at it. Most of my free time is spent experimenting with different animation styles. Not because I have to, but because I want to."

Fast forward to 2016. Sander, now skilled in Greensock and Scrollmagic, started this animation adventure with us. For us it was important that our story became more clear with the animated story. We are more than just recruiters, we are your sidekick! But what does a sidekick do exactly? Together with Sander we brainstormed and came to the conclusion that we wanted to show the various data streams and the extra things that Spilberg does for developers.

With this goal in mind we started the animation process with Sander. His advice for others who want to undertake a similar project is to keep on testing and debugging throughout the entire process. “During projects like these you are bound to run into problems, most of them can’t be foreseen.” A good example of this during our own process was the animated dotted line that shows the various data streams. In an SVG it is possible to make animated lines with the DrawSVG Plugin, with GSAP you can animate SVG properties. When we thought of these dotted lines we thought it was possible to do this in the same way. Unfortunately we learned that even tough regular lines can be animated that way, dotted lines are a whole different story.

Luckily there is always a solution. With lots of trial and error on Sander’s side he found a creative way to animate dotted lines. By creating an animated SVG mask of a line we could mask the dotted line with a regular line, thus creating the illusion of the dotted line being animated.

Another problem that we encountered during the development process was the manageability of the HTML. When using JavaScript to animate SVG data you have to write the SVG data inline in an HTML file. This is to prevent computers from being attacked by unknown sources that are built in the website by innocent looking images. The consequence of this is that your HTML file consists out of many lines of code. If you don’t manage this well from the get go the quality of your code gets messy and the manageability decreases.

All things considered this was a challenging, but also fun project, to work on. And look at the animation, it is exactly what we’ve envisioned. Those little hick-ups along the way only make the ride more enjoyable. We are wondering about your experiences with Greensock and Scrollmagic. Do you know of any cool projects that are a must-see? Let us know!