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
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