Stagger animation helper

Developer
Tommie Hansen
Size
7,989 Kb
Views
38,456
  1. Stagger animation helper Previews
  2. Stagger animation helper HTML Codes
  3. Stagger animation helper CSS Codes
  4. Stagger animation helper JS Codes

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 Previews
IQ Test

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); }); }); })
Stagger animation helper - Script Codes
Stagger animation helper - Script Codes
Home Page Home
Developer Tommie Hansen
Username tommiehansen
Uploaded August 22, 2022
Rating 3
Size 7,989 Kb
Views 38,456
Do you need developer help for Stagger animation helper?

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!

Tommie Hansen (tommiehansen) Script Codes
Name
Velocity.js custom transitions
Stagger animation with LESS CSS
Velocity.js sequence
Velocity.js scroll stuff
Cash animate, card sequencing
Velocity.js custom stagger
Table paginator
Velocity.js reverse sequence
Velocity.js vs CSS3 animation performance
A Pen by Tommie Hansen
Create amazing love letters with AI!

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!