COAP:COAP-3000/week5
Jump to navigation
Jump to search
Monday
The GSAP library
The GreenSock Animation Platform (GSAP) is a powerful and relatively easy to use suite of animation libraries for HTML5. As of April 2018, it includes:
- TweenLite -handles animating just about any property of any object.
- TweenMax - adds some extras.
- TimelineLite a container for tweens to control them as a whole and precisely manage their timing in relation to each other
- TimelineMax - adds some extras.
In this class, we will work with TweenMax.
- Either download it from here or
- include the library as CDN, like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
Creating animations with TweenMax and TweenLite
There are are two ways of creating animations:
- Use a simple static method like
Tweenlite.to. e..g
TweenLite.to(thing, 2, {left:"542px"});
- Create a tweening object that you then can control with various methods.
var tween = new TweenLite (thing, 2, {left:"542px"});
tween.play();
Hands on
Also on codepen
Simple example
Also: https://codepen.io/danielkschneider/pen/LdKKLx
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GreenSock: Animate Multiple Properties</title>
<style>
body {
background-color: #000;
}
#demo {
width: 692px;
height: 70px;
background-color: #333;
padding: 8px;
}
#logo {
position: relative;
width: 150px;
height: 60px;
/* background: #90E500 url(img/logo_transparent.png) no-repeat; */
background-color: green;
color: #000;
font-family: Arial, Helvetica, sans-serif;
border-bottom: solid #000 10px;
}
#logo p {
margin-top: 0px;
margin-left: 50px;
line-height: 60px;
}
</style>
</head>
<body>
<div id="demo">
<div>
<input id="btn" type="button" value="click" />
<input id="btn2" type="button" value="back" />
</div>
<div id="logo">
<p>COAP 3000</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script>
//we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one.
window.onload = function() {
var logo = document.getElementById("logo");
var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2");
btn.onclick = animate;
btn2.onclick = animateback;
};
function animate() {
TweenLite.to(logo, 2, {
left: "542px",
backgroundColor: "black",
borderBottomColor: "#90e500",
color: "white"
});
}
function animateback() {
// using object syntax
var motion = new TweenLite(logo, 2, {
left: "0px",
backgroundColor: "red",
borderBottomColor: "#90e500",
color: "white",
rotation: "180"
});
motion.play();
var motion2 = new TweenLite(logo, 2, {
rotation: "360",
backgroundColor: "green"
});
// add motion 2 after motion 1
motion2.delay(3);
}
</script>
</div>
</body>
</html>
Wednesday
- GSAP continued
- Midterm (1hour)
Project 5
Create an animation with the GSAP library.
Requirements:
- At least three animations
- A start and a stop button for at least one animation.
Due:
- Wednesday, week 6 before class
- Upload to the worldclassroom