Skip to content

Instantly share code, notes, and snippets.

@EduardoLopes

EduardoLopes/animation_optimization.html

Last active August 29, 2015 14:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save EduardoLopes/6168a894d111e2cfbbaf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save EduardoLopes/6168a894d111e2cfbbaf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
animation_optimization.html
<!DOCTYPE html public "html5 rocks">
<html>
<head>
<meta charset="utf-8">
<title>Animation - Post Fixes</title>
<style>
.mover {
position: absolute;
width: 100px;
height: 100px;
background: url("http://i.imgur.com/Kcl6Pun.png") center no-repeat;
left: 90%;
-webkit-transition: left 1.3s ease-out;
-moz-transition: left 1.3s ease-out;
-ms-transition: left 1.3s ease-out;
-o-transition: left 1.3s ease-out;
transition: left 1.3s ease-out;
}
.mover.left {
left: 10%;
}
</style>
</head>
<body>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<div class="mover"></div>
<script>
var movers = document.querySelectorAll('.mover'),
lastScrollY = 0,
ticking = false,
//Distance between each elements
distance = 10,
elementHeight = 100;
/**
* Set everthing up and position all the DOM elements
* - normally done with the CSS but, hey, there's 1,500
* of them so we're doing it here!
*/
(function init() {
for(var m = 0; m < movers.length; m++) {
movers[m].style.top = (m * distance) + 'px';
}
})();
/**
* Callback for our scroll event - just
* keeps a track on the last scroll value
*/
function onScroll() {
lastScrollY = window.scrollY;
requestTick();
}
/**
* Calls rAF if it's not already
* been done already
*/
function requestTick() {
if(!ticking) {
requestAnimFrame(update);
ticking = true;
}
}
/**
* Our animation callback
*/
function update() {
var mover = null,
moverTop = [],
halfWindowHeight = window.innerHeight * 0.5,
offset = 0,
//Normalize the scrollY position.
//This will give me the index of the first element on screen.
start = Math.floor((lastScrollY - elementHeight) / distance);
//Normalize the bottom of the screen plus the scrollY position.
//This will give me the index of the last element on screen.
stop = Math.floor( (lastScrollY + window.innerHeight) / distance);
start = Math.max(0, start);
// first loop is going to do all
// the reflows (since we use offsetTop)
for(var m = start; m < stop && stop < movers.length; m++) {
mover = movers[m];
moverTop[m] = mover.offsetTop;
}
// second loop is going to go through
// the movers and add the left class
// to the elements' classlist
for(var m = start; m < stop && stop < movers.length; m++) {
mover = movers[m];
if(lastScrollY > moverTop[m] - halfWindowHeight) {
mover.classList.add('left');
} else {
mover.classList.remove('left');
}
}
// allow further rAFs to be called
ticking = false;
}
// only listen for scroll events
window.addEventListener('scroll', onScroll, false);
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment