Skip to content

Instantly share code, notes, and snippets.

@ryarwood

ryarwood/timeline.html

Created February 4, 2016 22:35
Show Gist options
  • Save ryarwood/f6ea9510119f44ca97da to your computer and use it in GitHub Desktop.
Save ryarwood/f6ea9510119f44ca97da to your computer and use it in GitHub Desktop.
Download ZIP
Simple Timeline Example
Raw
timeline.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TimelineLite.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js'></script>
</head>
<body>
<h2 id="homecaption1" class="animelem">Grander than</h2>
<h2 id="homecaption2" class="animelem">anything Houston</h2>
<h2 id="homecaption3" class="animelem">has ever seen.</h2>
<h2 id="homecaption4" class="animelem"><img src="http://www.nicenicejpg.com/300/350"></h2>
<h3 id="homecaption5" class="animelem">A new level of luxury.</h3>
</body>
</html>
Raw
timeline.js
var $homecaption1 = $('#homecaption1'),
$homecaption2 = $('#homecaption2'),
$homecaption3 = $('#homecaption3'),
$homecaption4 = $('#homecaption4'),
$homecaption5 = $('#homecaption5'),
tl = new TimelineLite();
tl.fromTo($homecaption1, 2, {autoAlpha: 0}, {autoAlpha: 1, display: "block"}, 0.15)
.fromTo($homecaption2, 2, {autoAlpha: 0}, {autoAlpha: 1, display: "block"}, 1)
.fromTo($homecaption3, 2, {autoAlpha: 0}, {autoAlpha: 1, display: "block"}, 2)
.fromTo($homecaption1, 1, {autoAlpha: 1}, {autoAlpha: 0, display: "block"}, 5)
.fromTo($homecaption2, 1, {autoAlpha: 1}, {autoAlpha: 0, display: "block"}, 5)
.fromTo($homecaption3, 1, {autoAlpha: 1}, {autoAlpha: 0, display: "block"}, 5)
.fromTo($homecaption4, 2, {autoAlpha: 0}, {autoAlpha: 1, display: "block"}, 5.5)
.fromTo($homecaption5, 2, {autoAlpha: 0}, {autoAlpha: 1, display: "block"}, 6);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment