For Better Coffee

Over the last year and a half and I’ve seen a lot of scrolling websites.

Some were great and some were awful and the great ones had one thing in common.

Yes, the one thing is ONE THING.

Quick overview

Explore with me why For Better Coffee falls into the great category of story telling animated one page websites and how some of the ScrollMagic scenes were created.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

1. The One Thing

For Better Coffee tells a story about a coffee beans and in an interactive way gives the user tips on how to make a better cup of coffee.

Instead of animating a lot of things, it is simply animating just one coffee been on a journey from the tree to your coffee cup.

The concept of animating one thing at a time, the element you want the user to concentrate on, is the key for building a powerful story telling scrolling website.

For Better Coffee does it brilliantly.

Now to the technical stuff.

2. Fixed Coffee Bean

The page is created using multiple SVGs, GreenSock and ScrollMagic.

The initial animations of a fixed coffee bean from one spot to another and then continuing into the grinder are actually two coffee bean html elements .bean and .bean-2.

Both look identical and for the end user this looks like one element is being fixed and then continues to the grinder.

The below image shows you how the .bean is fixed for 750 pixels and then gets a class .hide and disappears.

.on(‘enter’, function(){}) is one of the callback functions of ScrollMagic fired when the next scene is triggered.

This hides the first coffee bean and shows the second, which then moves to the grinder.

3. Grinder Scene

The grinder scene is triggered when the .grinder is almost at the top of the viewport, this is defined by the triggerHook: 0.2.

triggerHook: 0 would trigger the same scene if the .grinder would be all the way at the top of the viewport and triggerHook: 1 would trigger it at the bottom of the viewport.

.handle is a separate html element which rotates 360 deg during a 300 pixels scrolling down, thanks to duration: 300 setting.

4. Filling the pot

I’ve mentioned that most assets on the page are SVGs applied as a background image. Here’s an example of the .handle:

The are two exceptions and the coffee in the pot is one of them.

It is an inline SVG element with a predefined pot mask and a default y value set to 140.

This makes the coffee in the pot invisible at the start.

The mask is then animating back to 0, which makes it look like the pot is filling up.

Similar mask techniques is also used on the coffee pouring into the cup in the following scene.

The filling the pot animations is triggered by a 1px tall line, that is positioned absolute 1000px from the top of the page.


There you have it a few ScrollMagic scenes and GreenSock tweens of this creative one page scrolling websites deconstructed.

Hope you’ve learned something new or got some inspiration for your next ScrollMagic project.

Until next time, happy scrolling and deconstructing.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

One Comment

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">