Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<html ng-app="myApp">
  <head>
<meta name="description" content="This is a template for angular experiments" />
    <link href='http://fonts.googleapis.com/css?family=Signika+Negative:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    <script src="http://s.cdpn.io/16327/sizzle.min.js    "></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
  </head>
  <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
  <body>
<div id="banner">
 <div class="panel" id="panel1">
 <h1>hungry?</h1>
 </div>
 <div class="panel" id="panel2">
 <h2>How about now?</h2>
 </div>
 <div class="panel" id="panel3">
 <div id="info">
 <h1>Burger Boy</h1>
 <ul>
 <li>Free delivery in NYC</li>
 <li>Open 24hrs</li>
 </ul>
 <div id="orderNow">order now</div>
 </div>
 </div>
</div>
    
    
    
    <div id="stats">
 <div>duration: <span id="duration">0</span> 1 iteration</div>
 <div>totalDuration: <span id="totalDuration">0</span> all iterations including repeatDelays</div>
 <div>repeat: <span id="repeatCount">0</span> of <span id="totalRepeatCount"></span></div>
 <div>time: <span id="time">1</span></div>
 <div>totalTime: <span id="totalTime">1</span></div>
 <div>progress: <span id="progress">1</span></div>
 <div>totalProgress: <span id="totalProgress">1</span></div>
 <button id="restart">restart()</button>
</div>
  </body>
</html>
 
var $ = Sizzle,
 $panel1 = $("#panel1"),
 $panel2 = $("#panel2"),
 $panel3 = $("#panel3"),
 $panel1Text = $("#panel1 h1"),
 $panel2Text = $("#panel2 h2"),
 $info = $("#info"),
 $list = $("li"),
 $orderNow = $("#orderNow"), 
 tl;
var tl = new TimelineMax({delay:0.5, repeat:3, repeatDelay:2, onUpdate:updateStats, onRepeat:updateReps, onComplete:restart});
//banner animation code (only 11 lines)
 tl.from(panel1, 0.5, {autoAlpha:0})
 .from($panel1Text, 0.5, {scale:0.5, autoAlpha:0, ease:Back.easeOut})
 .set($panel2, {top:0}, "+=2")
 .from($panel2, 0.2, {autoAlpha:0, scale:1.5})
 .from($panel2Text, 0.2, {top:250}, "+=0.5")
 .to($panel2Text, 0.2, {top:250}, "+=2")
 .set($panel3, {top:0}, "final")
 .from($info, 0.5, {top:250}, "final")
 .to($panel2, 0.5, {top:-60}, "final")
 .staggerFrom($list, 0.3, {autoAlpha:0, left:50}, 0.1, "+=0.2")
 .from($orderNow, 0.5, {scale:0, autoAlpha:0, ease:Back.easeOut});
var duration = document.getElementById("duration"),
 totalDuration = document.getElementById("totalDuration"),
 repeatCount = document.getElementById("repeatCount"),
 totalRepeatCount = document.getElementById("totalRepeatCount"),
 time = document.getElementById("time"),
 totalTime = document.getElementById("totalTime"),
 progress = document.getElementById("progress"),
 totalProgress = document.getElementById("totalProgress"),
 restart = document.getElementById("restart"),
 reps = 0;
function updateReps() {
 reps++;
 repeatCount.innerHTML = reps;
}
function updateStats() {
 time.innerHTML = tl.time().toFixed(2);
 totalTime.innerHTML = tl.totalTime().toFixed(2);
 progress.innerHTML = tl.progress().toFixed(2);
 totalProgress.innerHTML = tl.totalProgress().toFixed(2);
}
function reset() {
 reps = 0;
 duration.innerHTML = tl.duration().toFixed(2);
 totalDuration.innerHTML = tl.totalDuration().toFixed(2);
 repeatCount.innerHTML = reps;
 totalRepeatCount.innerHTML = tl.repeat();
}
function restart() {
 TweenLite.to(restart, 0.4, {autoAlpha:1})
}
restart.onclick = function() {
 reset();
 TweenLite.set(restart, {autoAlpha:0})
 tl.restart();
}
reset();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mreis1pro
0viewers