If you missed it, last month we at Humaan released a social aggregation platform called Waaffle.
The marketing site features an animation sequence which is bound to the natural scrolling of the page. Because this animation received an overwhelmingly positive response we thought we’d break down a portion of this sequence and explain how it was accomplished. Unfortunately we can’t break down the entire sequence as that would make for an exceptionally long blog post and nobody wants that (tldr).
For this tutorial we’ll create a stripped back, simplified version of the office scene which appears in the bottom portion of the Waaffle homepage.
Like this Demo.
If you’re new to animating, the only term I’d like to bring to your attention is what a tween is. ‘Tween’ is a term used in animating to describe the in-between involved with movement. How an object moves from point A to point B is what’s called tweening.
What you’ll learn
By the end of this tutorial, you’ll learn:
- The basics in setting up and using the Scroll Magic library.
- How to use the Green Sock (tweenMax)
What you’ll need
To get started ensure the following files are included in your project:
- JQuery – The latest version of jQuery.
- ScrollMagic.min.js – The Scroll Magic core library.
- animation.gsap.min.js – The Green Sock animation platform (GSAP).
- TweenMax.min.js – Anextension for the GSAP library which we use in this demonstration (See what is added here).
- debug.addIndicators.min.js – Debugging extension, which is extremely valuable while building your animation (Not essential, but recommended).
Scroll Magic is quite well supported with compatibility with Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+.
Greensock is remarkably compatible with most of the animations supported back to ie6.
Step 1. Setting up the animation space
The first element triggers the animation, this is named ‘trigger-office’ and sits at the top of the DOM.
Secondly we have a spacer, which we will need to allow for our scrollable animation. I’ve given the spacer a height of 400% of the viewport height (400vh) which is an arbitrary number used for this example only. At this point I simply want a comfortable amount of scrollable space on the page, but in your project you’ll cater your space to your needs.
The third element created is a viewport region where we will stage the animation elements. It is position fixed, so as we scroll the page it will be fixed to the viewport.
Step 2. Adding the monitor and screen
In our animation, the monitor and the screen are two separate components. The monitor rotates 90 degrees from portrait to landscape and then immediately after, the screen scales in size, from 0% (nothing) to 100% (full size).
The effect we’re looking for should look like this:
So let’s go ahead and create those assets so we can animate them. In the following example I’ve added a wrapping div (‘set-piece-wrapper’) for both of those components (‘set-rotate’ and ‘set-screen’). I’ve also added the styles for these elements.
Step 3. The Scroll Magic basics
Finally, the fun part!
Create a controller
The controller is the thing that will eventually construct our animation:
Create a new timeline and add the components which will animate
Begin by creating a new timeline, such as the example below:
Then add each components animation to the timeline as follows:
To explain what’s happening here I’ll break down one of the lines as an example to make any subsequent animation line easier to understand.
.add()– The scroll magic event.
TweenMax– The constructor. In this case we’re using the GSAP tweenMax constructor.
.to()– this is a tweenMax method that animates towards the value defined – there are many other useful methods such as staggerFromTo, which we also use later in this demo.
$('.set-rotate')– The selector for the element we wish to perform the animation on.
1– How long this animation will last in seconds.
rotation: 90– This is the animation we wish to perform.
ease: Back.easeInOut– This is one of the GSAP easings. You can find more using the visualiser.
delay: 0– The amount of seconds before playing the animation.
0– The numeric order for the animated element to play. This is handy if you want multiple elements to play at the same time or for an element to play after the preceeding element finishes.
Create a scene
I don’t mean stand on your desk and yell at your co-workers. A scene is the space in which the timeline plays out; this is where you are able to define how long the timeline lasts and when it should begin animating.
The settings I have used to construct this animation are pretty simple.
triggerElementis the element which will trigger the animation. In this case we are using the span ‘.trigger-office’ that we added in step 1.
triggerHookis set to ‘onLeave’ which means when the top of the scene is leaving the page, the animation will begin.
durationis how long the animation will last. This can be a pixel value or percentage. In this case I’ve used the arbitrary length of 1000.
There are many other options which can be tailored to your own usage but for this demonstration, these settings will do nicely.
Add the timeline to the scene
The scene needs something to tween (or play), so we’re going to let the scene know that we have a timeline for it to use, which we defined earlier.
Indicators are a helpful tool that dynamically adds and positions a blue, green and red indicator onto your scene. The green indicator is the start of the scene, the red is the end of the scene and the blue is the trigger. You can toggle these on and off by including or excluding this next line. For this level of animation, the indicators aren’t vital but the more increasingly difficult the animation, the more useful the indicators are.
Add everything to the controller
Finally the last line adds both timeline and scene to the controller, which then constructs the animation.
Step 4. Adding Fred
Next, let’s continue to add components into our scene and animate them. We will start with Fred (the man sitting on the chair…his name is Fred) and bringing in the floor.
In your HTML, within the viewport div, add in the new markup for Fred and the floor as well as the styling:
Now that we have some new components to play with let’s add those animations to our timeline. Simply add two new lines to our timeline and they’re now integrated into the scene.
What’s different with these new lines of animation is that this time, we’re animating CSS properties.
The default CSS properties for the floor and for Fred are to have them off canvas. The lines of animation we’ve added to the timeline tween them into view using scale Y and transform X (to demonstrate both). The results should now look like the below:
Step 5. Adding the desk
Now that we have the screen, floor and Fred all we need is to finish things off by adding the desk.
Let’s go ahead and add the markup and styles for the desk:
The CSS for the desk legs and the desk top is quite simple but I will touch on some details to explain how the animating works. Each leg uses the
transform-origin: top; property along with
transform: scaleY(0); When each leg animates
transform: scrollY(1); the leg expands from the top of the desk to the floor. The desk top works in a similar way using
Let’s add in the new components to the timeline now. Simply add these new lines to the timeline and they’ll be added to the scene.
For the desk legs, instead of using the tweenMax method
to(), I’ve used
staggerFromTo(). This is a really nifty method which allows you to define a common selector (in this case ‘.leg’) and stagger that selector one after the next – simply define what the tween is animating from and to. Appended to the end of this method is a numeric number for the timing of the stagger. In this case, I’ve used a very small incremental value of 0.1 seconds.
The finished result
While this is a drastically stripped back demonstration of the Waaffle animation, I hope that this helped give insight into some of the techniques used to accomplish this animation. For further reading I recommend the following links.
GSAP documentation – http://greensock.com/docs/#/HTML5/GSAP/
GSAP tweenMax – http://greensock.com/docs/#/HTML5/GSAP/TweenMax/
GSAP cheat sheet – https://ihatetomatoes.net/wp-content/uploads/2016/07/GreenSock-Cheatsheet-4.pdf
GSAP visual easing – http://greensock.com/ease-visualizer