COAP:COAP-3000/week4

Objectives

• use JavaScript libraries
• create animations with AniJs
• create animations with Greensocks

Week 3 topics - Some cool CSS

This week you will learn how to create animations with JavaScript libraries.

Monday lesson

• Using JavaScript libraries (principles)
• Creating animations with AniJs

AniJS language

AniJS uses the HTML <code>data-</code> attribute to define a simple language to create interface elements and animations.

You can compose sentences with the following logic:

If: Event(click, scroll, mouseover and more) , On: Html element (css selector) , Do: Actions or Animations (Rotate animation) , To: Html element to modify

Element	Purpose	Examples	HTML Example
if	defines an event	click,	If user clicks on footer element, then header will swing. <header data-anijs="if: click, on: footer, do: swing">
On	defines the owner with a CSS selector. If "on" is missing then it is the current element.	header, #my, .things
Do	Define an action. You either can define your own CSS classes, or take the Animate.css Youlibrary. You furthermore can clone or remove HTML and add/remove CSS classes.]
To	Similar as "On", this defines the elements affected by the response action or animation. You can use a CSS selector.

In addition, Before, After, and can be used. See Sentence Definitions

• Go to
  http://anijs.github.io/
• Click on squares at the bottom of the page.
• Look at:
  https://daneden.github.io/animate.css/

Examples on code pen

• http://codepen.io/darielnoel/pen/trnzk

How to make it work ?

Important resources

• AniJS sentence definitions

Wednesday lesson

(TBA, probably use of the Greensocks library)