Fork me on GitHub

TweenDeck

Next level animation for web presentations

Powered by Greensock

Built by John Polacek

Follow @johnpolacek

Key Press or Swipe

...or just scroll

Building a TweenDeck

Step One

Design Your Deck

Divide your content up into slides.
Use <section> or <div class="slide">

<div class="slide">
  <h1>Title goes here</h1>
  <h1>Subtitle goes here</h1>
</div>
<div>
  <h1>Another Title</h1>
  <ul>
    <li>Bullet Point 1</li>
    <li>Bullet Point 2</li>
    <li>Bullet Point 3</li>
  </ul>
</div>

In ‘Presentation Mode’, slides will be cropped to fit the browser window. Don’t worry about that yet. Design your content to look good as is, prior to adding animation.

Tip #1

Use Flexbox or CSS Grid Layout

I use Simple Flexgrid, but feel free to use any grid system you prefer.

Tip #2

Use a rem-based type scale with media queries to adjust your text for different screen sizes.

Tip #3

Use the .tween-active class as a hook to change styling when in presentation mode.

Step Two

Initialize TweenDeck

TweenDeck’s only dependency is Greensock which allows us to animate our slides in just about any way we can imagine.

<!--CDN link for TweenMax-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

Note: Greensock has plugins like SplitText and MorphSVG that are exclusive to Greensock members. For truly next-level animations, I highly recommend becoming joining Club Greensock.

Include tweendeck.js then add a button with a click event that calls TweenDeck.init().

<button onclick="enterPresentationMode()">Enter Presentation Mode</button>
<script>
  function enterPresentationMode() {
    TweenDeck.init(document.querySelectorAll('.slide'));
  }
</script>

Open your presentation in a browser, then click Enter Presentation Mode.

Navigate through the slides with left/right arrow keys (or swipe on touch devices).

Step Three

Create animations

TweenDeck doesn’t have any built-in animation. It’s up to us to create animations for our slides.

To do so, we create an object with animation functions which is passed to TweenDeck through its init() function.

For example, to create simple fade in and fade out animations:

var tweens = {
  fadeIn: function(el, dur, delay) {
    return TweenMax.from(el, dur, {immediateRender:true,opacity:0, delay:delay});
  },
  fadeOut: function(el, dur, delay) {
    return TweenMax.to(el, dur, {opacity:0, delay:delay});
  }
};

function enterPresentationMode() {
    TweenDeck.init(document.querySelectorAll('section'), tweens);
}

Animation functions should accept 3 params:
target element, duration and delay.

Not familiar with Greensock? Check out Getting Started with GSAP.

Step Four

Add slide transitions

To animate elements in your slides, use data-tween attributes with the following structure:

data-tween="[timing]:[animation type]:[duration]:[delay]"

For example, to fade in a headline, slide in bullet points one at a time, then fade out the slide:

<div class="slide">
    <div data-tween="outro:fadeOut:.5">
        <h2 data-tween="intro:fadeIn:1">My Headline</h2>
        <ul>
            <li data-tween="0:slideInLeft:.5">Bullet Point 1</li>
            <li data-tween="1:slideInLeft:.5">Bullet Point 2</li>
            <li data-tween="2:slideInLeft:.5">Bullet Point 3</li>
        </ul>
    </div>
</div>

To animate bullet points in a one transition, but staggered, use the delay property:

<div class="slide">
    <div data-tween="outro:fadeOut:.5">
        <h2 data-tween="intro:fadeIn:1">My Headline</h2>
        <ul>
            <li data-tween="0:slideInLeft:.5">Bullet Point 1</li>
            <li data-tween="0:slideInLeft:.5:.5">Bullet Point 2</li>
            <li data-tween="0:slideInLeft:.5:1">Bullet Point 3</li>
        </ul>
    </div>
</div>

Elements can have multiple animations by separating with a comma:

<div class="slide">
    <h2 data-tween="intro:fadeIn:1,outro:fadeOut">My Headline</h2>
    <ul>
        <li data-tween="0:slideInLeft:.5,outro:slideOutLeft">Bullet Point 1</li>
        <li data-tween="0:slideInLeft:.5:.5,outro:slideOutRight">Bullet Point 2</li>
        <li data-tween="0:slideInLeft:.5:1,outro:slideOutDown">Bullet Point 3</li>
    </ul>
</div>

Step Five

Get creative

Amazing things are possible with modern web animation. Check out the links below for some great examples.

Greensock Showcase

Get Inspired

Greensock on Codepen

Dive Into Code

Award-Winning Animation

See Awwward Winners

Web Animation Weekly

Sign Up

Examples

slideInDown

data-tween="intro:slideInDown:.5"
data-tween="outro:fadeOut:.5"
slideInUp
data-tween="0:slideInUp:.5"
slideInLeft
data-tween="1:slideInLeft:.5"
slideInRight
data-tween="2:slideInRight:.5"
bounceInDown
(1st in sequence)
data-tween="intro:bounceInDown:.5"
bounceInLeft
(.5s delay)
data-tween="intro:bounceInLeft:.5:.5"
bounceInRight
(1s delay)
data-tween="intro:bounceInRight:.5:1"
bounceInUp
(1.5s delay)
data-tween="intro:bounceInUp:.5:1.5"

scaleIn

data-tween="intro:scaleIn:1, outro:scaleOut:1"

zoomIn

data-tween="intro:zoomIn:1:1, outro:zoomOut:1"

Animate in Sequence

data-tween="intro:fadeInUp:.5, outro:fadeOut:.5"

Use show and hide at the beginning and end of animations for layout control.

rotateIn #1

data-tween="0:rotateIn:.5, 1:rotateOut:.5, 1:hide:.5"

Rotate in, then on the next step rotateOut then hide.

rotateIn #2

data-tween="intro:hide, 1:show:.5, 1:rotateIn:.5:.5, 2:rotateOut:.5, 2:hide:.5"

Initially hide, then show and rotateIn at the first step after previous element finishes rotateOut (at .5s)

On the next step rotateOut then hide.

rotateIn #3

data-tween="intro:hide, 2:show:.5, 2:rotateIn:.5:.5, 3:rotateOut:.5, 3:hide:.5"

Repeat the sequence for as many steps as necessary.

rotateIn #4

data-tween="intro:hide, 3:show:.5, 3:rotateIn:.5:.5, outro:rotateOut:.5"

The last step, rotateOut at the outro.

Animate at Once

data-tween="intro:fadeInUp:.5, outro:fadeOut:.5"

Use delays to align animation sequences.

tossInUp

data-tween="
intro:tossInUp:.5:.5,
outro:fallOut:.5"

tossInUp

data-tween="
intro:tossInUp:.5:.75,
outro:fallOut:.5"

tossInUp

data-tween="
intro:tossInUp:.5:1,
outro:fallOut:.5"

Background Color #1

intro:backgroundColor:.5:0:yellow

Background color tweens are applied to document body.

Background Color #2

intro:backgroundColor:.5:0:#9fc74d, outro:backgroundColor:.5:0:none

Background color tweens are applied to document body.

Chicago Theater at night

Background Image

Source: Neal Kharawala on Unsplash

Chicago Landscape

Background Image

Source: Kevin Rajaram on Unsplash

Cloud Gate Sculpture at Millenium Park in Chicago

Background Image

Source: Sawyer Bengtson on Unsplash

Chicago River at night

Background Image

Source: Roman Arkhipov on Unsplash

Tween Params

Add params to your tween functions for more customization. For example...

Tween Me!
data-tween="0:cssTo:.5:0:color:red, 1:cssTo:.5:0:color:blue, 2:cssTo:.5:0:color:#9fc74d"
cssTo
cssTo: function(el, dur, delay, params) {
    var cssProp = {};
    cssProp[params[0]] = params[1];
    return TweenMax.to(el, dur, {ease:Power4.easeOut, css:cssProp, delay:delay});
}