Stagger animation helper
How do I make an stagger animation helper?
Simply stagger animations with a < 200 byte javascript helper.. What is a stagger animation helper? How do you make a stagger animation helper? This script and codes were developed by Tommie Hansen on 22 August 2022, Monday.
Stagger animation helper - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stagger animation helper</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css);
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,200,300,500,600,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css);
/* LESS VARs */
/* OTHERS */
/*-------------- ANIMATION
----------------*/
.animation { animation: in 0.5s forwards cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0; animation-duration: 0.5s;
}
@keyframes in { from { transform: translateY(200px) rotateZ(15deg); opacity: 0; } to { transform: none; opacity: 1; }
}
/*-------------- MAIN
----------------*/
body { font-family: 'Work Sans', arial, helvetica; color: rgba(0, 0, 0, 0.9); background: #fafafa;
}
i { font-style: normal;
}
h1,
h2,
h3,
h4,
h5 { color: rgba(0, 0, 0, 0.95);
}
h1 { font-weight: 300;
}
h5 { font-weight: 600;
}
b { font-weight: 600;
}
/*----------------------------------------------------- OTHER STUFF
-----------------------------------------------------*/
body { display: table; table-layout: fixed; max-width: 1120px; margin: 0 auto;
}
.row { display: table-row;
}
#left,
#right { display: table-cell; vertical-align: top;
}
body button.ani { background-color: #4dd0e1; border-color: #4dd0e1; width: 100%; color: #fff; backface-visibility: hidden; font-weight: 300; transition: transform .1s ease;
}
body button.ani:hover { background-color: #37cadd; border-color: #37cadd; color: #fff;
}
body button.ani.on { background: #5c6bc0; border-color: #5c6bc0; color: #fff;
}
#korklarMarker { margin: -6px 0 0 0px !important;
}
#demo { background-color: #f06292; border-color: #f06292; width: 100%; color: #fff; backface-visibility: hidden; font-weight: 300; transition: transform .1s ease; disply: inline-block; padding: 3px 6px; border-radius: 5px; cursor: pointer; font-weight: 400;
}
#demo.green { background-color: #9ccc65; border-color: #9ccc65; width: 100%; color: #fff; backface-visibility: hidden; font-weight: 300; transition: transform .1s ease; animation: fadeInOut 1s ease infinite;
}
#demo.green:hover { background-color: #90c652; border-color: #90c652; color: #fff;
}
#demo:hover { background-color: #ee4b82; border-color: #ee4b82; color: #fff;
}
@keyframes fadeInOut { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; }
}
a { color: #4fc3f7; text-decoration: none; border-bottom: 1px solid #4fc3f7;
}
/*----------------------------------------------------- COLOR BOXES
-----------------------------------------------------*/
#boxColors { margin-top: 6rem;
}
body .btn-primary,
body .btn-secondary { font-weight: 400;
}
body .btn-primary { background-color: #4fc3f7; border-color: #4fc3f7; width: 100%; color: #fff; backface-visibility: hidden; font-weight: 300; transition: transform .1s ease;
}
body .btn-primary:hover { background-color: #37bbf6; border-color: #37bbf6; color: #fff;
}
body .btn-s { background-color: #f74fc3; border-color: #f74fc3; width: 100%; color: #fff; backface-visibility: hidden; font-weight: 300; transition: transform .1s ease;
}
body .btn-s:hover { background-color: #f637bb; border-color: #f637bb; color: #fff;
}
.color { display: inline-block; width: 130px; margin: 0 30px 30px 0; background: #fff; color: #666; border-radius: 5px; border-bottom: 2px solid #ddd; font-size: 1.2rem; font-weight: 600; will-change: transform, opacity;
}
.color span { display: block; position: relative; height: 60px; width: 100%; border-radius: 4px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.color i { padding: 9px 15px; display: inline-block; text-transform: uppercase;
}
.color i u { text-decoration: none;
}
.color i b { display: block; font-weight: 400;
}
#left,
#right { padding: 6rem 4rem; height: 100%;
}
#left { max-width: 200px;
}
#right p { font-weight: 400; font-size: 1.6rem;
}
#right p.intro { font-weight: 300; font-size: 2.1rem; margin-bottom: 4rem;
}
#f p { display: block;
}
#f input { width: 100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="left"> <div id="btns"> <p>Stagger presets</p> <button class="btn-primary stag demo" data-stagger="30">30ms</button> <button class="btn-primary stag demo" data-stagger="60">60ms (default)</button> <button class="btn-primary stag" data-stagger="120">120ms</button> <button class="btn-primary stag demo" data-stagger="60|5">60ms + stop after 5th</button> <hr> <p>Animation presets</p> <button class="ani demo on" rel="1">Hangman (default)</button> <button class="ani demoFirst" rel="2">High five</button> <button class="ani demo" rel="3">Gummybeer</button> </div> <hr> <form action="" id="f"> <p>Set custom values</p> <input type="number" placeholder="Stagger in ms"> <input type="number" placeholder="Stop after X num"> <button type="submit" class="btn-primary s">Enter</button> </form>
</div>
<!-- / #left -->
<div id="right"> <div id="boxes"> <h1><b>Stagger</b> animations</h1> <p class="intro">A light 190 bytes pure javascript helper to add stagger to css animations or transitions. Run an automated <span id="demo">demo</span>, mash the buttons on the left or enter custom stuff in the form.</p> </div> <hr> <div id="boxColors"> <div class="color"><span style="background:#EF5350"></span><i><u>red</u><b>#EF5350</b></i></div> <div class="color"><span style="background:#f06292"></span><i><u>pink</u><b>#f06292</b></i></div> <div class="color"><span style="background:#BA68C8"></span><i><u>purple</u><b>#BA68C8</b></i></div> <div class="color"><span style="background:#9575CD"></span><i><u>deep purple</u><b>#9575CD</b></i></div> <div class="color"><span style="background:#5C6BC0"></span><i><u>indigo</u><b>#5C6BC0</b></i></div> <div class="color"><span style="background:#42A5F5"></span><i><u>blue</u><b>#42A5F5</b></i></div> <div class="color"><span style="background:#4FC3F7"></span><i><u>light blue</u><b>#4FC3F7</b></i></div> <div class="color"><span style="background:#4DD0E1"></span><i><u>cyan</u><b>#4DD0E1</b></i></div> <div class="color"><span style="background:#80CBC4"></span><i><u>teal</u><b>#80CBC4</b></i></div> <div class="color"><span style="background:#81C784"></span><i><u>green</u><b>#81C784</b></i></div> <div class="color"><span style="background:#9ccc65"></span><i><u>light green</u><b>#9ccc65</b></i></div> <div class="color"><span style="background:#DCE775"></span><i><u>lime</u><b>#DCE775</b></i></div> <div class="color"><span style="background:#FFEE58"></span><i><u>yellow</u><b>#FFEE58</b></i></div> <div class="color"><span style="background:#FFD54F"></span><i><u>amber</u><b>#FFD54F</b></i></div> <div class="color"><span style="background:#FFB74D"></span><i><u>orange</u><b>#FFB74D</b></i></div> <div class="color"><span style="background:#FF8A65"></span><i><u>deep orange</u><b>#FF8A65</b></i></div> <div class="color"><span style="background: #4cf"></span><i><u>baby douche</u><b>#44ccff</b></i></div> <div class="color"><span style="background: #d00"></span><i><u>stabwound</u><b>#dd0000</b></i></div> <div class="color"><span style="background: hotpink"></span><i><u>Bimbo</u><b>hotpink</b></i></div> <div class="color"><span style="background: #f70"></span><i><u>Fire</u><b>#ff7700</b></i></div> </div> <hr> <h2>Use</h2> <ol> <li>Create animation or transition</li> <li>Get <a href="https://github.com/tommiehansen/base/tree/master/js/animation.stagger" target="_blank">Stagger Animation at Github</a></li> <li>Include the helper in your page </li> <li>call it ie <code>stagger.init(".color"); // use default options</code></li> <li>Start your animation or transition with any method you desire</li> </ol> <p><b>Options</b></p> <ol> <li><b>Stagger</b> in ms (milliseconds, 1000 = 1 second)<br><span>stagger.init(".myClass", <b>120</b>); // stagger 120ms</span></li> <li><b>Stop after</b> <em>n</em> elements<br><span>stagger.init(".myClass", null, <b>4</b>); // stop after 4th element</span></li> <li><b>Delay type</b><br><span>stagger.init(".myClass", null, null, <b>'transition-delay'</b>); // Use transition-delay</span></li> </ol>
</div>
<!-- / #right -->
<style id="keyframes"></style> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/tommiehansen/base/master/js/animation.stagger/animation.stagger.js'></script>
<script src='https://cdn.rawgit.com/tommiehansen/base/master/js/korklar/korklar.js'></script> <script src="js/index.js"></script>
</body>
</html>
Stagger animation helper - Script Codes CSS Codes
@import url(https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css);
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,200,300,500,600,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css);
/* LESS VARs */
/* OTHERS */
/*-------------- ANIMATION
----------------*/
.animation { animation: in 0.5s forwards cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0; animation-duration: 0.5s;
}
@keyframes in { from { transform: translateY(200px) rotateZ(15deg); opacity: 0; } to { transform: none; opacity: 1; }
}
/*-------------- MAIN
----------------*/
body { font-family: 'Work Sans', arial, helvetica; color: rgba(0, 0, 0, 0.9); background: #fafafa;
}
i { font-style: normal;
}
h1,
h2,
h3,
h4,
h5 { color: rgba(0, 0, 0, 0.95);
}
h1 { font-weight: 300;
}
h5 { font-weight: 600;
}
b { font-weight: 600;
}
/*----------------------------------------------------- OTHER STUFF
-----------------------------------------------------*/
body { display: table; table-layout: fixed; max-width: 1120px; margin: 0 auto;
}
.row { display: table-row;
}
#left,
#right { display: table-cell; vertical-align: top;
}
body button.ani { background-color: #4dd0e1; border-color: #4dd0e1; width: 100%; color: #fff; backface-visibility: hidden; font-weight: 300; transition: transform .1s ease;
}
body button.ani:hover { background-color: #37cadd; border-color: #37cadd; color: #fff;
}
body button.ani.on { background: #5c6bc0; border-color: #5c6bc0; color: #fff;
}
#korklarMarker { margin: -6px 0 0 0px !important;
}
#demo { background-color: #f06292; border-color: #f06292; width: 100%; color: #fff; backface-visibility: hidden; font-weight: 300; transition: transform .1s ease; disply: inline-block; padding: 3px 6px; border-radius: 5px; cursor: pointer; font-weight: 400;
}
#demo.green { background-color: #9ccc65; border-color: #9ccc65; width: 100%; color: #fff; backface-visibility: hidden; font-weight: 300; transition: transform .1s ease; animation: fadeInOut 1s ease infinite;
}
#demo.green:hover { background-color: #90c652; border-color: #90c652; color: #fff;
}
#demo:hover { background-color: #ee4b82; border-color: #ee4b82; color: #fff;
}
@keyframes fadeInOut { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; }
}
a { color: #4fc3f7; text-decoration: none; border-bottom: 1px solid #4fc3f7;
}
/*----------------------------------------------------- COLOR BOXES
-----------------------------------------------------*/
#boxColors { margin-top: 6rem;
}
body .btn-primary,
body .btn-secondary { font-weight: 400;
}
body .btn-primary { background-color: #4fc3f7; border-color: #4fc3f7; width: 100%; color: #fff; backface-visibility: hidden; font-weight: 300; transition: transform .1s ease;
}
body .btn-primary:hover { background-color: #37bbf6; border-color: #37bbf6; color: #fff;
}
body .btn-s { background-color: #f74fc3; border-color: #f74fc3; width: 100%; color: #fff; backface-visibility: hidden; font-weight: 300; transition: transform .1s ease;
}
body .btn-s:hover { background-color: #f637bb; border-color: #f637bb; color: #fff;
}
.color { display: inline-block; width: 130px; margin: 0 30px 30px 0; background: #fff; color: #666; border-radius: 5px; border-bottom: 2px solid #ddd; font-size: 1.2rem; font-weight: 600; will-change: transform, opacity;
}
.color span { display: block; position: relative; height: 60px; width: 100%; border-radius: 4px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.color i { padding: 9px 15px; display: inline-block; text-transform: uppercase;
}
.color i u { text-decoration: none;
}
.color i b { display: block; font-weight: 400;
}
#left,
#right { padding: 6rem 4rem; height: 100%;
}
#left { max-width: 200px;
}
#right p { font-weight: 400; font-size: 1.6rem;
}
#right p.intro { font-weight: 300; font-size: 2.1rem; margin-bottom: 4rem;
}
#f p { display: block;
}
#f input { width: 100%;
}
Stagger animation helper - Script Codes JS Codes
var color = $('.color'); // run at pageload stagger.init(".color"); // use default options (paint) color.addClass('animation'); // add animation // short func function removeAdd(s){ s.removeClass('animation'); setTimeout(function(){ s.addClass('animation'); }, 16); } // do some binds $('#btns').on('click', '.stag', function(){ var delay = $(this).attr('data-stagger'); // check if there's a 'stopAfter' value and add it if(delay.indexOf('|') > -1) { delay = delay.split('|'); stagger.init('.color', delay[0], delay[1]); } else { stagger.init('.color',delay); } removeAdd(color); }) $('#btns').on('click', '.ani', function(){ var $t = $(this), kf = $('#keyframes'), str = '', attr = $t.attr('rel'); $t.parent().find('.ani').removeClass('on'); $t.addClass('on'); // default if(attr == '1'){ str = "\ .animation {\ animation: in .5s forwards cubic-bezier(0.165, 0.840, 0.440, 1.000); opacity: 0;\ animation-duration: 0.5s;\ }\ \ @keyframes in {\ from { transform: translateY(200px) rotateZ(15deg); opacity:0; }\ to { transform: none; opacity: 1; }\ }\ "; } else if(attr == '2'){ str = "\ .animation {\ animation: in .5s forwards cubic-bezier(0.175, 0.885, 0.320, 1.275); opacity: 0;\ animation-duration: .7s;\ }\ \ @keyframes in {\ from { transform: translateY(200px) rotateZ(35deg) skewY(-30deg) skewX(70deg); opacity:0; }\ to { transform: none; opacity: 1; }\ }\ "; } else { str = "\ .animation {\ animation: in .5s forwards cubic-bezier(0.175, 0.885, 0.320, 1.275); opacity: 0;\ animation-duration: .7s;\ }\ \ @keyframes in {\ from { transform: translateY(60px) rotateY(180deg) rotateX(180deg) skewY(-20deg) skewX(20deg); opacity:0; }\ to { transform: none; opacity: 1; }\ }\ "; } kf.html(str); $('#btns').find('.stag').eq(1).trigger('click'); }) // the form var f = $('#f'), color; f.on('submit', function(e){ e.preventDefault(); var inputs = f.find('input[type=number]'), delay = inputs[0], stop = inputs[1], str = ''; delay.value !== '' ? delay = delay.value : delay = null; stop.value !== '' ? stop = stop.value : stop = null; stagger.init('.color', delay, stop); removeAdd(color); }) $('#demo').on('click', function(e){ e.preventDefault(); var $t = $(this); $t.addClass('green'); $('.demoFirst').trigger('click'); $('.color:last').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ $(this).unbind('webkitAnimationEnd oanimationend msAnimationEnd animationend'); korklar.run('.demo', 'click', 1700, function(){ f.find('input:eq(0)').focus().val(500); setTimeout(function(){ f.find('input:eq(1)').focus().val(2); setTimeout(function(){ f.find('button').focus().trigger('click'); $t.removeClass('green'); }, 500); }, 500); }); }); })
Developer | Tommie Hansen |
Username | tommiehansen |
Uploaded | August 22, 2022 |
Rating | 3 |
Size | 7,989 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Tmp 5 | 7,376 Kb |
Velocity.js scroll stuff | 6,254 Kb |
A Pen by Tommie Hansen | 3,321 Kb |
Velocity.js vs CSS3 animation performance | 5,745 Kb |
Velocity.js sequence | 6,096 Kb |
Velocity.js custom transitions | 3,804 Kb |
Stagger animation helper | 7,989 Kb |
Button pusher | 2,220 Kb |
RangeCalendar | 7,213 Kb |
Optimized SVG URI replacer tool | 9,911 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Sketchy Box | Mnicpt | 3,033 Kb |
Map Controls | Iliadraznin | 3,721 Kb |
Konami Code Easter Egg | Teolitto | 3,051 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
Wave Lines | Mikehobizal | 4,023 Kb |
Content Changer | Cliffpyles | 4,538 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!