<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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |