Intro TimelineLite - finished
How do I make an intro timelinelite - finished?
View the video explanation and blog post here: http://www.greensock.com/sequence-video/. What is a intro timelinelite - finished? How do you make a intro timelinelite - finished? This script and codes were developed by GreenSock on 11 June 2022, Saturday.
Intro TimelineLite - finished - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Intro TimelineLite - finished</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="demoWrapper"> <div id="bg"></div> <div id="content"> <h1>Freakishly Robust</h1> <h2>With features that makes other engines look like cheap toys</h2> <div id="info"><img src="http://www.greensock.com/wp-content/uploads/custom/codepen/feature_robust.png" width="240" height="151" id="feature"> <p id="description">Animate colors, beziers, css properties, arrays, scrolls and lots more. Round values, smoothly reverse() on the fly, use relative values, employ virtually any easing equation, and manage conflicting tweens like a pro. GSAP does all this and much more with ease.</p> </div> <div id="nav"> <img src="http://www.greensock.com/wp-content/uploads/custom/codepen/icon_robust.png" width="83" height="59"><img src="http://www.greensock.com/wp-content/uploads/custom/codepen/icon_overwrite.png" width="43" height="59"><img src="http://www.greensock.com/wp-content/uploads/custom/codepen/icon_compatible.png" width="73" height="59"><img src="http://www.greensock.com/wp-content/uploads/custom/codepen/icon_support.png" width="83" height="59"><img src="http://www.greensock.com/wp-content/uploads/custom/codepen/icon_plugin.png" width="76" height="59"> </div> </div>
</div>
<div> <button id="play">play</button> <button id="pause">pause</button> <button id="reverse">reverse</button> <button id="resume">resume</button> <button id="restart">restart</button>
</div>
<div id="sliderWrapper">
<div id="slider"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Intro TimelineLite - finished - Script Codes CSS Codes
body, h1, h2, h3, p { font-family: Arial, Helvetica, sans-serif; margin: 0; color: #fff;
}
body { background-color:#000;
}
h1 { position: relative; margin-top: 10px; font-size: 36px; font-weight: normal;
}
h2 { position: relative; font-size: 22px; font-weight: normal; color: #cfcfcf;
}
#demoWrapper { width: 600px; height: 350px; -webkit-font-smoothing: antialiased; color: black; overflow: hidden;
}
#bg { position: absolute; background-image: url(http://www.greensock.com/_img/codepen/black_textured_background.png); width: 600px; height: 350px;
}
#content { padding-left: 15px; visibility: hidden;
}
#info { margin-top: 20px;
}
#feature { position: relative; float: left;
}
#description { position: relative; float: left; margin-left: 20px; width: 290px; font-size: 16px; line-height: 24px;
}
#nav { position: absolute; top: 285px; left: 140px; white-space: nowrap;
}
#nav img { position: relative; margin-right: 20px; float: left;
}
button { padding: 10px; margin-top: 10px;
}
button:nth-child(1){ margin-left:10px;
}
#slider{ width: 580px; margin:10px; background-color:#ff0;
}
Intro TimelineLite - finished - Script Codes JS Codes
var tl = new TimelineLite({onUpdate:updateSlider});
tl.set("#content", {visibility:"visible"}) .from("h1", 0.5, {left:100, autoAlpha:0}) // autoAlpha handles both css properties visibility and opacity.
.from("h2", 0.5, {left:-100, autoAlpha:0}, "-=0.25") //add tween 0.25 seconds before previous tween ends
.from("#feature", 0.5, {scale:0.5, autoAlpha:0}, "feature") // add feature label at start position of this tween
.from("#description", 0.5, {left:100, autoAlpha:0}, "feature+=0.25") // add tween 0.25 seconds after the feature label
.staggerFrom("#nav img", 0.5, {scale:0, rotation:-180, autoAlpha:0}, 0.2, "stagger");
$("#play").click(function() { //play() only plays forward from current position. If timeline has finished, play() has nowhere to go. //if the timeline is not done then play() or else restart() (restart always restarts from the beginning). if(tl.progress() != 1){ //carl just changed this again tl.play(); } else { tl.restart(); }
});
$("#pause").click(function() { tl.pause();
});
$("#reverse").click(function() { tl.reverse();
});
$("#resume").click(function() { tl.resume();
});
$("#restart").click(function() { tl.restart();
});
$("#slider").slider({ range: false, min: 0, max: 100, step:.1, slide: function ( event, ui ) { tl.pause(); //adjust the timeline's progress() based on slider value tl.progress( ui.value/100 ); }
});
function updateSlider() { $("#slider").slider("value", tl.progress() *100);
}
Developer | GreenSock |
Username | GreenSock |
Uploaded | June 11, 2022 |
Rating | 4 |
Size | 3,311 Kb |
Views | 54,648 |
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!
Name | Size |
SVG progressive line render | 3,514 Kb |
Basic Tween | 1,905 Kb |
GSAP JS Banner Example | 6,467 Kb |
MorphSVGPlugin from GreenSock | 24,861 Kb |
Easing | 2,043 Kb |
Simple 3D Hover Flip | 2,559 Kb |
Support Starter Pen | 2,157 Kb |
Simple GSAP Demo for CSS3 Transitions Cage Match | 2,333 Kb |
GSPreloader | 3,864 Kb |
GreenSock Home Page Animation | 7,093 Kb |
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!
Name | Username | Size |
Exploring css spinners | Akagr | 3,569 Kb |
Donald Trump - The New Yorker | Agbales | 2,502 Kb |
Css3 only dropdown menu | Riogrande | 2,519 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
Mesmerizing octopus | Jllodra | 3,549 Kb |
Layout 11 | Altynai | 1,690 Kb |
Simple yet functional | Matheusxaviersi | 2,025 Kb |
TimelineMax Circular loader | Nicolund | 2,649 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!