COAP:COAP-3000/week5: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
mNo edit summary |
||
Line 4: | Line 4: | ||
|page_previous=COAP:COAP-3000/week4 | |page_previous=COAP:COAP-3000/week4 | ||
|page_next=COAP:COAP-3000/week5 | |page_next=COAP:COAP-3000/week5 | ||
|objective=create animations with GSAP | |objective=create animations with GSAP, | ||
use jQuery to get a handle on elements | use jQuery to get a handle on elements | ||
|cat_syllabus=COAP-3000 | |cat_syllabus=COAP-3000 |
Revision as of 21:14, 15 April 2018
Monday
Creating animations with 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>
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