Velocity.js vs CSS3 animation performance

Developer
Tommie Hansen
Size
5,745 Kb
Views
40,480
  1. Velocity.js vs CSS3 animation performance Previews
  2. Velocity.js vs CSS3 animation performance HTML Codes
  3. Velocity.js vs CSS3 animation performance CSS Codes
  4. Velocity.js vs CSS3 animation performance JS Codes

How do I make an velocity.js vs css3 animation performance?

Testing JS (Velocity.js) vs CSS3 animaton performance for benchmarks etc of simple transitional animations.. What is a velocity.js vs css3 animation performance? How do you make a velocity.js vs css3 animation performance? This script and codes were developed by Tommie Hansen on 22 August 2022, Monday.

Velocity.js vs CSS3 animation performance Previews
IQ Test

Velocity.js vs CSS3 animation performance - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Velocity.js vs CSS3 animation performance</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.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! */ /* + Reset.css */
/* + Open Sans @ Google Fonts */
/* + FontAwesome.css */
/* defaults */
html,body { min-height:100%; }
body { font-family:"Open Sans", helvetica,arial,sans-serif; font-size:13px; line-height: 160%; font-weight: 300; color: #444; background: #eee; }
*,*:before,*:after { box-sizing: border-box; } img { display:block; } i { font-style:normal; } em { font-style:italic; }
/* Refresh, add boxes etc */
#a { position:absolute; top:20px; right:20px; display: block; background: #eee; color:#aaa; -webkit-user-select: none; user-select: none; } #a i { cursor: pointer; font-size:11px; padding:8px 10px; border:1px dotted #ccc; transition:all .12s; margin-left:-1px; }
#a .fa { font-family: "Open Sans", sans-serif; }
#a .fa:last-child { background:#d00; border-color:#d00; color:#fff; }
#a .fa:last-child:hover { background: #a00; border-color: #a00; }
#btn { text-align: center; margin-top:-30px; }
#btn i { cursor:pointer; background: hotpink; color:#fff; padding:0 14px; margin:0 2px; line-height:250%; display:inline-block; transition:all .2s ease; }
#btn i:hover { background:#333; }
/* ----- end defaults ---- */
/* Main layout */
#boxes { padding-bottom:1000px; }
#boxes, h1, pre { width: 660px; margin: 40px auto; text-align:center; position: relative; }
/*#boxes, .box { transform: translate3d(0,0,0); }*/
/* Headers */
h1,h2 { font-size: 21px; line-height:100%; font-weight:300; }
h1 { font-size: 24px; font-weight: 700; border-bottom:1px solid #ccc; }
h1 i { font-weight: 300; }
pre { display:block; margin-top:-25px; text-transform: uppercase; color:#888; font-size:11px; letter-spacing:.5px; }
pre i { cursor:help; display:inline-block; margin: 0 0 0 3px; }
pre i:hover { color:#222; }
pre span { color:#aaa; display:block; letter-spacing:0; }
/* Paddings / Margins */
h1 { padding: 20px 0; }
h2,h3 { margin: 0 0 12px; }
h3 { font-size: 16px; white-space: nowrap; width: auto; overflow: hidden; text-overflow:ellipsis; display:block;}
.box { margin: 0 0 30px; } /* inline-block adds +4px margin */
.box img.full { margin: -1px 20px 0 -1px; float:left; }
/* Boxes */
.box { height:150px; _opacity:0; display:block; text-align:left; border: 1px solid #ddd; border-bottom: 1px solid #ccc; background: #fff;
}
.boxRight { padding: 15px 40px 0 0;
}
.boxRight h3 { margin-bottom:0;}
.boxRight i { display:block; font-size:12px; color: #888; font-style:normal; margin: 0 0 10px 0;
}
.boxRight i span { font-family:georgia, serif; font-style: italic; font-size:11px; color:#aaa; }
/* Box CSS3 animation */
#boxes .box { transform-origin: top left;
}
#boxes .box:nth-child(even) { transform-origin: top right;
}
#boxes .box.anim { animation:fromLeft .5s 0 ease-out both;
}
#boxes .box.anim:nth-child(even) { animation:fromRight .5s 0 ease-out both; animation-delay:.1s;
}
@keyframes fromLeft { from { transform:translateY(200px); opacity:0; }
}
@keyframes fromRight { from { transform:translateY(200px); opacity:0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Velocity.js vs CSS3 <i>animation performance</i></h1>
<pre>Testing JS vs CSS3 animations for benching performance etc
<span>v1.0 &ndash; Added code</span>
</pre>
<div id="btn"><i class="js">JS animate</i> <i class="css3">CSS3 animate</i> <i class="loop">Loop <span>(CSS3 animate)</span> 5x</i></div>
<div id="a"><i onclick="window.location=window.location" class="fa">RELOAD PEN</i></div>
<div id="boxes"> <!-- load via JSONP -->
</div><!-- /#boxes --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js'></script>
<script src='https://cdn.rawgit.com/madbook/jquery.wait/master/jquery.wait.js'></script> <script src="js/index.js"></script>
</body>
</html>

Velocity.js vs CSS3 animation performance - Script Codes CSS Codes

/* + Reset.css */
/* + Open Sans @ Google Fonts */
/* + FontAwesome.css */
/* defaults */
html,body { min-height:100%; }
body { font-family:"Open Sans", helvetica,arial,sans-serif; font-size:13px; line-height: 160%; font-weight: 300; color: #444; background: #eee; }
*,*:before,*:after { box-sizing: border-box; } img { display:block; } i { font-style:normal; } em { font-style:italic; }
/* Refresh, add boxes etc */
#a { position:absolute; top:20px; right:20px; display: block; background: #eee; color:#aaa; -webkit-user-select: none; user-select: none; } #a i { cursor: pointer; font-size:11px; padding:8px 10px; border:1px dotted #ccc; transition:all .12s; margin-left:-1px; }
#a .fa { font-family: "Open Sans", sans-serif; }
#a .fa:last-child { background:#d00; border-color:#d00; color:#fff; }
#a .fa:last-child:hover { background: #a00; border-color: #a00; }
#btn { text-align: center; margin-top:-30px; }
#btn i { cursor:pointer; background: hotpink; color:#fff; padding:0 14px; margin:0 2px; line-height:250%; display:inline-block; transition:all .2s ease; }
#btn i:hover { background:#333; }
/* ----- end defaults ---- */
/* Main layout */
#boxes { padding-bottom:1000px; }
#boxes, h1, pre { width: 660px; margin: 40px auto; text-align:center; position: relative; }
/*#boxes, .box { transform: translate3d(0,0,0); }*/
/* Headers */
h1,h2 { font-size: 21px; line-height:100%; font-weight:300; }
h1 { font-size: 24px; font-weight: 700; border-bottom:1px solid #ccc; }
h1 i { font-weight: 300; }
pre { display:block; margin-top:-25px; text-transform: uppercase; color:#888; font-size:11px; letter-spacing:.5px; }
pre i { cursor:help; display:inline-block; margin: 0 0 0 3px; }
pre i:hover { color:#222; }
pre span { color:#aaa; display:block; letter-spacing:0; }
/* Paddings / Margins */
h1 { padding: 20px 0; }
h2,h3 { margin: 0 0 12px; }
h3 { font-size: 16px; white-space: nowrap; width: auto; overflow: hidden; text-overflow:ellipsis; display:block;}
.box { margin: 0 0 30px; } /* inline-block adds +4px margin */
.box img.full { margin: -1px 20px 0 -1px; float:left; }
/* Boxes */
.box { height:150px; _opacity:0; display:block; text-align:left; border: 1px solid #ddd; border-bottom: 1px solid #ccc; background: #fff;
}
.boxRight { padding: 15px 40px 0 0;
}
.boxRight h3 { margin-bottom:0;}
.boxRight i { display:block; font-size:12px; color: #888; font-style:normal; margin: 0 0 10px 0;
}
.boxRight i span { font-family:georgia, serif; font-style: italic; font-size:11px; color:#aaa; }
/* Box CSS3 animation */
#boxes .box { transform-origin: top left;
}
#boxes .box:nth-child(even) { transform-origin: top right;
}
#boxes .box.anim { animation:fromLeft .5s 0 ease-out both;
}
#boxes .box.anim:nth-child(even) { animation:fromRight .5s 0 ease-out both; animation-delay:.1s;
}
@keyframes fromLeft { from { transform:translateY(200px); opacity:0; }
}
@keyframes fromRight { from { transform:translateY(200px); opacity:0; }
}

Velocity.js vs CSS3 animation performance - Script Codes JS Codes

/* + jquery.js + Velocity.js + jquery.wait
*/
/* -----------------------------------------------------
----------------------------------------------------- */
// Define base div
var boxes = $('#boxes');
// Buttons + Clicks
var current = 'CSS3 animate';
var curText = $('.loop').find('span');
$('.js').click(function(){ curText.text('(JS animate)'); current = 'JS animate'; $('.box').removeClass('anim').css('opacity', 0); jsAnim();
})
$('.css3').click(function(){ curText.text('(CSS3 animate)'); current = 'CSS3 animate'; $('.box').removeClass('anim'); setTimeout(function(){ $('.box').addClass('anim'); }, 10)
})
$('.loop').click(function(){ var t = 1500; if(current == 'CSS3 animate'){ var q = $('.css3'); q.trigger('click'); q.wait(t).trigger('click'); q.wait(t*2).trigger('click'); q.wait(t*3).trigger('click'); q.wait(t*4).trigger('click'); } else { var q = $('.js'); q.trigger('click'); q.wait(t).trigger('click'); q.wait(t*2).trigger('click'); q.wait(t*3).trigger('click'); q.wait(t*4).trigger('click'); }
})
/* -----------------------------------------------------
GET SOME CONTENTS
100% unrelated to animation, scroll down the 'real' stuff
----------------------------------------------------- */
boxes.append('<div id="load">Loading data...</div>')
function getStuff(uri){ //$.ajaxSetup({ cache: false }); $.ajax({ url: uri, dataType: 'jsonp', success: function(data) { var html = ''; $(data.responseData.feed.entries).each(function(index, e) { // replace flickr image with X image size, possible values = _t, _s, _m, _b etc e.link = e.link.replace('.jpg','_q.jpg'); html += '<div class="box"><a target="_blank" href="https://www.flickr.com/photos/tommiehansen/"><img class="full" width="150" height="150" src="'+ e.link +'"></a>'; html += '<div class="boxRight"><h3>'+ e.title +'</h3><i>Photo <span>by</span> Tommie Hansen / flickr</i><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text since the 1500 hundreds when some typesetters had a boring day.</p></div></div>'; }); boxes.empty().append(html); $('.css3').trigger('click'); }, error: function () {} });
}
var source = 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=';
source += 'http%3A%2F%2Fwww.degraeve.com%2Fflickr-rss%2Frss.php%3Ftags%3Dtommiehansen,sunset%26tagmode%3Dall%26sort%3Dinterestingness-desc%26num%3D25';
source += '&num=10'; //numb of results, max = 25
getStuff(source);
function jsAnim(){ var box = boxes.find('.box'); var boxEven = box.filter(':even'), boxOdd = box.filter(':odd'), aniDuration = 500, aniDelay = 0, animIn = { opacity: [1,0], translateY: [0, 200], translateZ:0 }, //without translateZ = lag animIn2 = { opacity: [1,0], translateY: [0, 200], translateZ:0 }; // convert to RAW dom nodes boxEven = boxEven.get(); boxOdd = boxOdd.get(); //boxEven.velocity(animIn, { duration: aniDuration, delay: aniDelay }) $.Velocity(boxEven, animIn, { duration: aniDuration, delay: aniDelay }) $.Velocity(boxOdd, animIn2, { duration: aniDuration, delay: aniDelay+100 })
}
Velocity.js vs CSS3 animation performance - Script Codes
Velocity.js vs CSS3 animation performance - Script Codes
Home Page Home
Developer Tommie Hansen
Username tommiehansen
Uploaded August 22, 2022
Rating 3
Size 5,745 Kb
Views 40,480
Do you need developer help for Velocity.js vs CSS3 animation performance?

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
Optimized SVG URI replacer tool
RangeCalendar
Tmp 5
A Pen by Tommie Hansen
Stagger animation helper
Table paginator
Animated CSS loader
Velocity.js custom stagger
Velocity.js scroll stuff
Cash.animate, card animation
Create amazing captions 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!