Introduction to GreenSock

Aim & Objectives

Aim

To create an animated microsite highlighting environmental issues using GreenSock.

Objectives

• Research current environmental issues to establish content.
• Design a prototype of how the site will look.
• Using Adobe XD’s new “auto-animate” feature, experiment with various animations.
• Develop the site using HTML, CSS (using CSS Grid), JavaScript and GreenSock.

Definition

So what is GreenSock? GreenSock Animation Platform (GSAP) is a JavaScript library used by front-end developers to create animations on webpages. GSAP is a powerful animation tool and is used by major companies such as Lexus, Adobe and Nike. The library allows for precise control over more complex timeline-based animations, something that cannot be achieved with CSS keyframes. Petr Tichy from Ihatetomatoes deconstructed 31 site-of-the-day websites and revealed that 67% of those sites were using GreenSock as its animation platform, proving the increasing popularity of the animation library.

Prior to starting this project, I had never used GSAP or any JavaScript animation library before. Any animations I have used before have been basic CSS transitions or a CSS keyframe animation. I do have a basic understanding of JavaScript which helped a lot with understanding GSAP.

Set Up

To create this project, HTML, CSS (SCSS), BEM Methodology, JavaScript, GreenSock and a little bit of jQuery was used. Adobe XD was also used to design the project and explore some potential animations.

Location

To view this project live, visit: SaveOurPlanet

To view the source code of this project, see my Gitlab project.

How

Once I was happy with the designs and had a rough idea of some animations that I wanted, I started to code the markup and styling. I created the main page and the introduction/loading screen first and then started to think about adding some animation. With no prior experience using GSAP, I found GreenSock's documentation to be extremely useful. The loading page was the first to receive some GSAP treatment as I had some solid ideas in my head of how this was going to work.

GSAP comes with four core tools: TweenLite, TweenMax, TimelineLite, TimelineMax. I first had to understand what do these tools do and how do I use them. I found that the GSAP documentation explains the usage for these well. TweenLite is simply the tool for the animation itself, with TweenMax being the same but with extended functionality. TimelineLite is used to sequence the animations (tweens) into a, well, a timeline, with TimelineMax offering some extended functionality.

I started by creating all the variables for the things that I wanted to animate and initialised a new TimelineMax instance.

Not a bad start, but now I actually had to figure out how to make the animations happen. For the first animation of fading the map in, I used TweenMax's fromTo() method to animate the map from opacity 0 to opacity 1.

This line of code means that firstly, add a new animation to the timeline (tl.add), then create an instance of TweenMax.fromTo(). Inside the brackets defines what is being animated, in this case, the variable 'map', for 2 seconds in length to animate from opacity:0 to opacity:1.

To achieve the letter rippling effect, I created a small function using jQuery and a regular expression to select all the characters inside the tag and wrap them in all in their own span tag to be animated by GSAP.

After searching around, I found that TweenMax had a .staggerFromTo() function. This allowed me to target all of the individual spans and apply the same animation whilst setting an increment between each one.

Here I encountered an issue, for a few milliseconds on the initial page load, all of the characters and the map would display together before running the animation. This was due to the script being loaded after the DOM. To resolve this issue, I set the visibility of the letters and map to hidden in the CSS which will then be changed to visible when the script loads. The rest of the loading page animation was completed using TweenLite.to() as the initial values were already set using CSS. The loading animation ran successfully and how I wanted, however, I encountered another issue. Despite not being visible, the loader section was still overlapping the main content and prevented any of the links being clicked. I found my solution on this GreenSock forum, as someone else had a similar issue. Here I learned about the autoAlpha value which allowed me to set the whole loaders visibility to hidden once the timeline had reached the end.

I was really pleased with how the animation turned out, however, the duration was quite long at roughly 16 seconds. I discovered on the 'GreenSock Cheat Sheet' that the timeline playback could be controlled and played from a certain point in the timeline. I added in a basic skip button with an onclick event to skip the animation to 15 seconds.

Evaluation

With no prior experience with GreenSock, it took a long time to develop the project as I was constantly learning along the way. Having now created a project using GreenSock, it is clear why it is making waves in the development community as a go-to library for animation. GreenSock is extremely useful and with the right resources, is relatively easy to learn. In a few lines of code, powerful animations can be achieved which breathes life into a static website, making it stand out among other sites.

One thing I would like to improve on this project is the performance of the animations. The performance of the website itself is fine, scoring 100 (desktop) on Google PageSpeed Insights. However, the animations are not as seamless I would like as they sometimes lag a little bit. This is something I am going to continuously look to improve.

I am pleased with what I have achieved with this project and I now feel confident using GreenSock to add animation to my future projects. I encountered plenty of obstacles whilst developing this project but managed to successfully overcome them.

View SaveOurPlanet