Search Preview
TweenDeck
johnpolacek.github.ioNext level animation for web presentations
.io > johnpolacek.github.io
SEO audit: Content analysis
| Language | Error! No language localisation is found. | ||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Title | TweenDeck | ||||||||||||||||||||||||||||||||||||
| Text / HTML ratio | 55 % | ||||||||||||||||||||||||||||||||||||
| Frame | Excellent! The website does not use iFrame solutions. | ||||||||||||||||||||||||||||||||||||
| Flash | Excellent! The website does not have any flash contents. | ||||||||||||||||||||||||||||||||||||
| Keywords cloud |
Point |
||||||||||||||||||||||||||||||||||||
| Keywords consistency |
|
||||||||||||||||||||||||||||||||||||
| Headings |
|
||||||||||||||||||||||||||||||||||||
| Images | We found 4 images on this web page. |
SEO Keywords (Single)
| Keyword | Occurrence | Density |
|---|---|---|
| Point | 12 | 0.60 % |
| 9 |
0.45 % |
|
| delay | 8 | 0.40 % |
| Background | 8 | 0.40 % |
| 8 | 0.40 % | |
| 8 | 0.40 % | |
| 7 |
0.35 % |
|
| Greensock | 7 | 0.35 % |
| animations | 6 | 0.30 % |
| animation | 6 | 0.30 % |
| dur | 6 | 0.30 % |
| slides | 6 | 0.30 % |
| rotateIn | 5 | 0.25 % |
| TweenDeck | 5 | 0.25 % |
| class=slide> | 5 | 0.25 % |
| Step | 5 | 0.25 % |
| hide | 4 | 0.20 % |
| step | 4 | 0.20 % |
| fade | 4 | 0.20 % |
| Source | 4 | 0.20 % |
SEO Keywords (Two Word)
| Keyword | Occurrence | Density |
|---|---|---|
| 5 | 0.25 % | |
| on Unsplash | 4 | 0.20 % |
| |
4 | 0.20 % |
| Image Source | 4 | 0.20 % |
| Background Image | 4 | 0.20 % |
| Point 1 | 4 | 0.20 % |
| Point 3 | 4 | 0.20 % |
| 3 |
4 | 0.20 % |
| Point 2 | 4 | 0.20 % |
| Headline |
3 | 0.15 % |
| at the | 3 | 0.15 % |
1| 3 |
0.15 % |
|
| |
3 | 0.15 % |
| step rotateOut | 3 | 0.15 % |
| functionel dur | 3 | 0.15 % |
| in a | 3 | 0.15 % |
| For example | 3 | 0.15 % |
class=slide> | 3 |
0.15 % |
|
| tossInUp datatween= | 3 | 0.15 % |
| 3 |
0.15 % |
|
SEO Keywords (Three Word)
| Keyword | Occurrence | Density | Possible Spam |
|---|---|---|---|
| Background Image Source | 4 | 0.20 % | No |
| 3 |
4 | 0.20 % | No |
| Point 3 |
4 | 0.20 % | No |
Point 2| 3 |
0.15 % |
No |
|
| Unsplash Background Image | 3 | 0.15 % | No |
| on Unsplash Background | 3 | 0.15 % | No |
Point 1| 3 |
0.15 % |
No |
|
| functionel dur delay | 3 | 0.15 % | No |
Headline 3 |
0.15 % |
No |
|
| next step rotateOut | 2 | 0.10 % | No |
| return TweenMaxtoel dur | 2 | 0.10 % | No |
| datatween=0slideInLeft5>Bullet Point 1 | 2 | 0.10 % | No |
|
2 | 0.10 % | No |
| color tweens are | 2 | 0.10 % | No |
| the next step | 2 | 0.10 % | No |
My Headline |
2 | 0.10 % | No |
| |
2 | 0.10 % | No |
| then hide rotateIn | 2 | 0.10 % | No |
| dur delay return | 2 | 0.10 % | No |
SEO Keywords (Four Word)
| Keyword | Occurrence | Density | Possible Spam |
|---|---|---|---|
| Point 3 |
4 | 0.20 % | No |
| on Unsplash Background Image | 3 | 0.15 % | No |
| Unsplash Background Image Source | 3 | 0.15 % | No |
datatween=introfadeIn1>My Headline 2 |
0.10 % |
No |
|
| 3 |
2 | 0.10 % | No |
| |
2 | 0.10 % | No |
|
2 | 0.10 % | No |
Headline |
2 | 0.10 % | No |
| next step rotateOut then | 2 | 0.10 % | No |
My Headline |
2 | 0.10 % | No |
datatween=outrofadeOut5> My Headline |
2 | 0.10 % | No |
My |
2 | 0.10 % | No |
class=slide> | 2 |
0.10 % |
No |
|
| 2 | 0.10 % | No | |
| step rotateOut then hide | 2 | 0.10 % | No |
| rotateOut then hide rotateIn | 2 | 0.10 % | No |
| Background color tweens are | 2 | 0.10 % | No |
| the next step rotateOut | 2 | 0.10 % | No |
| are applied to document | 2 | 0.10 % | No |
| functionel dur delay return | 2 | 0.10 % | No |
Internal links in - johnpolacek.github.io
johnpolacek.github.io/styled-starter
Styled Starter | Starter Kit with React, Next.js and Styled Components
Styled Starter | Starter Kit with React, Next.js and Styled Components
johnpolacek.github.io/tweendeck
TweenDeck
TweenDeck
johnpolacek.github.io/design-system-playground
Design System Playground
Design System Playground
johnpolacek.github.io/expressive-css
Expressive CSS
Expressive CSS
johnpolacek.github.io/simple-grid
Simple Grid
Simple Grid
johnpolacek.github.io/Responsivator
Responsivator
Responsivator
johnpolacek.github.io/superscrollorama
SUPERSCROLLORAMA
SUPERSCROLLORAMA
johnpolacek.github.io/stacktable.js
stacktable.js
stacktable.js
Scrolldeck plugin
scrolldeck.js
scrolldeck.js
johnpolacek.github.io/scrolldeck.js/decks/responsive/
What The Heck Is Responsive Web Design?
What The Heck Is Responsive Web Design?
Johnpolacek.github.io Spined HTML
TweenDeck Fork me on GitHub TweenDeck Next level volatility for web presentations Powered by Greensock Built by John Polacek Follow @johnpolacek Key Press or Swipe ← → Enter Presentation Mode ...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 well-nigh that yet. Design your content to squint good as is, prior to subtracting animation. Tip #1 Use Flexbox or CSS Grid Layout I use Simple Flexgrid, but finger self-ruling to use any grid system you prefer. Tip #2 Use a rem-based type scale with media queries to retread your text for variegated screen sizes. Tip #3 Use the .tween-active matriculation as a vaccinate to transpiration styling when in presentation mode. Step Two Initialize TweenDeck TweenDeck’s only dependency is Greensock which allows us to vivificate our slides in just well-nigh 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 sectional to Greensock members. For truly next-level animations, I highly recommend rhadamanthine joining Club Greensock. Include tweendeck.js then add a sawed-off 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 thunderstroke keys (or swipe on touch devices). Step Three Create animations TweenDeck doesn’t have any seated animation. It’s up to us to create animations for our slides. To do so, we create an object with volatility 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); }Volatilityfunctions should winnow 3 params: target element, elapsing and delay. Not familiar with Greensock? Check out Getting Started with GSAP. Step Four Add slide transitions To vivificate elements in your slides, use data-tween nature with the pursuit 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 vivificate bullet points in a one transition, but staggered, use the wait 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 unelevated for some unconfined examples. Greensock Showcase Get Inspired Greensock on Codepen Dive Into Code Award-WinningVolatilitySee Awwward Winners WebVolatilityWeekly 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"Vivificatein Sequence data-tween="intro:fadeInUp:.5, outro:fadeOut:.5" Use show and hibernate at the whence 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 without 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.Vivificateat Once data-tween="intro:fadeInUp:.5, outro:fadeOut:.5" Use delays to uncurl volatility 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" BackgroundVerisimilitude#1 intro:backgroundColor:.5:0:yellow Background verisimilitude tweens are unromantic to document body. BackgroundVerisimilitude#2 intro:backgroundColor:.5:0:#9fc74d, outro:backgroundColor:.5:0:none Background verisimilitude tweens are unromantic to document body. Background Image Source: Neal Kharawala on Unsplash Background Image Source: Kevin Rajaram on Unsplash Background Image Source: Sawyer Bengtson on Unsplash Background Image Source: Roman Arkhipov on Unsplash Tween Params Add params to your tween functions for increasingly 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}); }