Powered by Greensock
Built by John Polacek
Key Press or Swipe
...or just scroll
↓
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.
Use Flexbox or CSS Grid Layout
I use Simple Flexgrid, but feel free to use any grid system you prefer.
Use a rem-based type scale with media queries to adjust your text for different screen sizes.
Use the .tween-active class as a hook to change styling when in presentation mode.
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).
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.
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>Amazing things are possible with modern web animation. Check out the links below for some great examples.
data-tween="intro:slideInDown:.5"data-tween="outro:fadeOut:.5"
data-tween="0:slideInUp:.5"
data-tween="1:slideInLeft:.5"
data-tween="2:slideInRight:.5"
data-tween="intro:bounceInDown:.5"
data-tween="intro:bounceInLeft:.5:.5"
data-tween="intro:bounceInRight:.5:1"
data-tween="intro:bounceInUp:.5:1.5"
data-tween="intro:scaleIn:1, outro:scaleOut:1"
data-tween="intro:zoomIn:1:1, outro:zoomOut:1"
data-tween="intro:fadeInUp:.5, outro:fadeOut:.5"Use show and hide at the beginning and end of animations for layout control.
data-tween="0:rotateIn:.5, 1:rotateOut:.5, 1:hide:.5"Rotate in, then on the next step rotateOut then hide.
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.
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.
data-tween="intro:hide, 3:show:.5, 3:rotateIn:.5:.5, outro:rotateOut:.5"The last step, rotateOut at the outro.
data-tween="intro:fadeInUp:.5, outro:fadeOut:.5"Use delays to align animation sequences.
data-tween="
intro:tossInUp:.5:.5,
outro:fallOut:.5"data-tween="
intro:tossInUp:.5:.75,
outro:fallOut:.5"data-tween="
intro:tossInUp:.5:1,
outro:fallOut:.5"intro:backgroundColor:.5:0:yellowBackground color tweens are applied to document body.
intro:backgroundColor:.5:0:#9fc74d, outro:backgroundColor:.5:0:noneBackground color tweens are applied to document body.
Source: Neal Kharawala on Unsplash
Source: Kevin Rajaram on Unsplash
Source: Sawyer Bengtson on Unsplash
Source: Roman Arkhipov on Unsplash
Add params to your tween functions for more customization. For example...
data-tween="0:cssTo:.5:0:color:red, 1:cssTo:.5:0:color:blue, 2:cssTo:.5:0:color:#9fc74d"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});
}