COAP:COAP-3000/week5

Objectives

• create animations with GSAP
• use jQuery to get a handle on elements

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

• https://greensock.com/jump-start-js

Also on codepen

• https://codepen.io/collection/ifybJ/#

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