GSAP 3 allowing experience designers to take ownership of code

Why don’t more designers code?

Designers that code are sometimes jokingly referred to as unicorns because they are so hard to find and very hard to catch.  I think the reason most designers don’t learn to code is that it can be a fiddly, slow, uninteresting endeavour especially when it comes to CSS and HTML. I would compare it to being similar to the difference between being an Architect and a builder. The former (the creative force) charge with the look of the building and the latter is responsible for bringing that creative vision to life. Where this comparison breaks down is that whilst buildings are defined in a solid 3D space; in the world of interactivity we also have other elements to consider such are varying screen sizes, and interactive elements including animations.

I would suggest that fluid and responsive layouts require at least a basic knowledge of CSS and HTML techniques in order to understand what is possible and be able to communicate the general design concepts better with developers, whether face to face or in the form of a functionality brief. When it comes to interactive elements and animations it is really incumbent on the designer to be hyper specific with the details of what is required. 99.9% of all designers will be familiar with creating timeline based animations using a variety of available products, and any animator will tell you that the difference between a bad and good animation is the small tweaks of the timing within the animation. Whilst it’s fine to provide examples to developers to copy it is unrealistic to expect them to be able to translate these ‘demos’ into code to get the desired results. So if designers are going to learn to code, I believe that learning to code animations and interactivity would be the area of greatest benefit to the overall project, and for this we have GSAP.

What is GSAP?

GSAP is a powerful and robust HTML5 javascript animation framework that allows anyone to easily manipulate any asset rendered in the browser window in just a few lines of code.  No previous code experience is required, and the great and enjoyable thing about this from a designers perspective is that it is very visual and instant, meaning when you write code to see what it does to your selected elements on the screen instantly. You can create very complex animations in just a few lines for code, and the great thing about it is that because it is in code you can trigger the animation from a user interaction… pausing, playing forwards or backwards the possibilities are endless, and once you get good it becomes easier in many more ways than traditional timeline based demos, with the ultimate upshot being that your developers can use the same code you have written, appearing exactly the same on the final live version of the project.

A common use for GSAP would be a menu overlay as seen in the example above. This can be achieved with just two lines of code…

menuopentl.from(“.classname > div”, {duration:0.6, height:0, stagger:0.05, ease:”power2.inOut” });
menuopentl.from(“.classname > div”, {opacity:0, y:-80, stagger:0.05, ease:”back” }, “-=0.3”);

The History of GSAP

The GreenSock Animation Platform initially was a tool called TweenLite, originally used to create and control animations in flash using the ActionScript language. Suddenly by removing the timeline anything was within the realm of interactive animations. Since the death of Flash/ActionScript (RIP) JavaScript has taken over, and the GreenSock Animation Platform has been retooled for this purpose. Back in the Flash days, it was common for a designer to code because Actionscript 2 made it so easy, and anything you did with that code enhanced your design rather than redescribed it in a different way like CSS and HTML does. As designers we need to get back to that mindset and take control of our creations.

What is GSAP3 vs GSAP 2

GSAP 3 is the most significant upgrade they have ever had, it is a massive simplification of the API combining features from a number of libraries that had built up over the years resulting in a smaller easier to code and understand syntax, no more “Lite” and “Max” flavours. Let’s look at some of the new features.

Half the size of the old TweenMax

GSAP retains almost all of its old functionality while adding 50+ features, and has been completely rebuilt from the ground up as modern ES modules.

Simplified API

No more “Lite” and “Max” flavours. TweenMax, TweenLite, TimelineLite, and TimelineMax have all been consolidated into a single “gsap” object. To create a basic tween in two seconds, 100 px on the x axis on an html object with class name “class” is gsap.to(“.class”, {duration:2, x:100}); it’s that simple. You can control many other elements… including; rotation, scale, opacity and many move basically anything you can think of. It’s great for experimentation using sites like codepen.com. You can really bring out your creativity and push your boundaries of what you thought was possible.

Inheritance/Defaults

This is a huge benefit over GSAP 2 because now you don’t have to keep setting the same ease over and over again…or duration…or whatever. Just set defaults on the parent timeline and let them be inherited by all its children.

Things you can do with GSAP

1. Move elements on the page as it scrolls with GSAP’s scroll trigger
2. Stop, Pause and Rewind animations
3. Stagger in elements with minimal lines of code
4. Easily create timelines to sequence and control complex animations

There is way more, I’ve only scratched the surface of all the improvements in GSAP 3 and what it is capable of, the more you learn the more you realise they really have thought of everything.

So designers I highly recommend you dive in, set up some demos on codepen and see what is possible … take control of this aspect of your work and take your interactivity to the next level.