COAP:COAP-3000/week5: Difference between revisions

The educational technology and digital learning wiki
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

COAP:COAP-3000
◀▬▬▶
2018/04/15
Objectives
  • create animations with GSAP
  • use jQuery to get a handle on elements

Objectives

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



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