Beer Institute Demo

I looove a cold beer, so when the Beer Institute came calling for some support in building an interactive website, I was all in.

Sneak Peek

Here’s what we ultimately built…

The Ask

Build an interactive beer glass where the beer drains as you scroll down the page.

The Plan

Combining Lottie, GSAP, and ScrollTrigger, we should be able to take an animated SVG, connect it to the scrollbar and update our beer glass as the user scrolls.

GSAP does a lot of the heavy lifting for us with the LottieScrollTrigger helper function. More on that below.

But, before we can do anything, we need an animated beer glass. The best way to do that is with After Effects and an extension called BodyMovin. The specifics of setting that up and actually creating the animation in AE are beyond the scope of this article. But, start here to get the BodyMovin extension installed. This article also gives some great tips and best practices for creating your animation.

If you know how to create animations in AE, that’s awesome, you’re off and running. If you don’t (like me), tap a friend who does! For me, that’s my buddies at Antidote Studio. They jumped in and cranked out the perfect beer animation for my needs.

The Implementation

The HTML is simple. We need a single div with a unique ID that we can target with our JavaScript. In this case, we’ll use an ID of ‘animationWindow’:

<script src="path-to/lottie.min.js"></script>
<div id="animationWindow"></div>

Note: we need to include the lottie.js file. There are lots of ways to do this. I’m doing it old-school and just included it in a script tag in my HTML.

The CSS will vary considerably based on your needs, but for demo purposes, you’ll want to at least set some width and height boundaries for your container.

#animationWindow {
  width: 500px;
  height: auto;
}

The JavaScript is, of course, where most of the magic happens. Let’s take a look at it first, then go through it.

// include GSAP core
// include ScrollTrigger
// There are different ways to do this, I would do it like so...
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

// Lastly, include Lottie BodyMovin
// For me, I'm doing this old school and I just include the script in my HTML (see above)

LottieScrollTrigger({
  target: "#animationWindow",
  path: "https://assets3.lottiefiles.com/packages/lf20_r0wlb6bpSA.json",
  speed: "medium",
  scrub: 2
});

function LottieScrollTrigger(vars) {
    let playhead = {frame: 0},
        target = gsap.utils.toArray(vars.target)[0],
        speeds = {slow: "+=2000", medium: "+=1000", fast: "+=500"},
        st = {trigger: target, pin: true, start: "top top", end: speeds[vars.speed] || "+=1000", scrub: 1},
        ctx = gsap.context && gsap.context(),
        animation = lottie.loadAnimation({
            container: target,
            renderer: vars.renderer || "svg",
            loop: false,
            autoplay: false,
            path: vars.path,
            rendererSettings: vars.rendererSettings || { preserveAspectRatio: 'xMidYMid slice' }
        });
    for (let p in vars) {
        st[p] = vars[p];
    }
    animation.addEventListener("DOMLoaded", function() {
      let createTween = function() {
         animation.frameTween = gsap.to(playhead, {
            frame: animation.totalFrames - 1,
            ease: "none",
            onUpdate: () => animation.goToAndStop(playhead.frame, true),
            scrollTrigger: st
        });
        return () => animation.destroy && animation.destroy();
      };
      ctx && ctx.add ? ctx.add(createTween) : createTween();
      ScrollTrigger.sort();
      ScrollTrigger.refresh();    
    });
    return animation;
}

 

LottieScrollTrigger Function

The amazing folks at GSAP created a helper function that plays nice with Lottie to properly set up on our animation for scrubbing. You can certainly play with the function options to tweak to your liking, but this can largely go untouched.

The initialization function is where most customization happens, but it’s still super simple with just a few parameters:

• target: The target HTML element where we want to place our animation.
• path: The path to the Lottie JSON animation file (this is what After Effects spits out for you—save it somewhere that can be referenced here).
• speed: Defines the speed of the scroll animation.
• scrub: Ties the animation to the scroll position and also smoothens the playhead to catch up to the scroll position.

Demo

I’m prone to overlook steps when explaining how something is made. So, I created a CodePen that is simplified down to the minimum code needed to pull this off. Check it out, fork it, and have fun playing with it!

Note, if you’re unfamiliar, GSAP is a paid library. But, you can use it for free in CodePen for testing purposes. In your pen, click on the gear to view settings, then you can add the required libraries.

See the Pen
LottieScrollTrigger by Matt Kreikemeier (@callmegoon)
on CodePen.