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

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

Example on code pen

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

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 library. You furthermore can clone or remove HTML and add/remove CSS classes.]	In animate.css: bounce, flash, pulse, rubberBand, shake, swing, tada, wobble, jello, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, flip, flipInX, flipInY, flipOutX, flipOutY, lightSpeedIn, lightSpeedOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, slideInUp, slideInDown, slideInLeft, slideInRight, slideOutUp, slideOutDown, slideOutLeft, slideOutRight, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp, hinge, jackInTheBox, rollIn, rollOut
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 Helper 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/

Hands on

Do the following and do not miss a step:

• Download {{goblock|QuickStartTemplate. This template will link to an online library. If you plan to work without Internet connection, take the full distribution
• Create a new directory
• Unzip the files within the new directory.
• Goto {{animate.css library. Save the CSS (right-click and "save as") in the CSS directory of the AniJS directory)
• Open the index.html file. Add the animate.css library.

Important resources

• AniJS wiki!
• AniJS sentence definitions

Wednesday lesson

(TBA, probably use of the Greensocks library)