MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Add HTML5 Animation to Your Web Pages Using CreateJS

Course Summary

Learn how to animate graphics & text on the HTML5 canvas element with basic Javascript & no complicated CSS or HTML.

  • +

    Course Syllabus

    • Introduction and Setup
      • The Suite Of Libraries
      • HTML Practice File
      • Installation and Bootstrapping
    • Drawing Shapes and Tweening 101
      • Introducing The EaselJS Library
      • How to Draw A Circle in EaselJS
      • Introducing TweenJS and Ticker
      • How to Animate a Shape With TweenJS
    • Tweening Beyond The Basics
      • How to Change and Test Frame Rates
      • How to Reverse a Tween Using Chaining
      • How To Add a Delay In A Tween
      • Introducing Tween Easing
      • How to Add Easing to a Tween
    • Drawing Shapes With Gradient Fills
      • How to Add a Linear Gradient Background
      • Introducing Radial Gradients in EaselJS
      • How to Add a Radial Gradient Fill
    • ABCs of Displaying Text
      • Introducing Text in EaselJS
      • How to Add Text and Shadow with EaselJS
      • Making a Rotational Tween for EaselJS Text
      • Creating a Fly In Fly Out Tween for EaselJS Text
      • Styling EaselJS Text Over Tweens
    • Using Strokes and Fills with Shape Drawing Methods
      • Introducing Strokes In Shape Drawing Methods
      • Adding Strokes to Shape Drawing Methods
      • Adding Fills to Stroke Perimeter Shapes
    • Stage Mouse Event Handling
      • How to Handle Stage Mouse Events
      • Controlling a Rotation Tween Using Stage Mouse Events
      • Drag and Drop Using Stage Mouse Events
      • Drag and Drop Tween Using Stage Mouse Events
    • Using Ticker For Animation
      • Basics of Using Ticker For Animation
      • Adding a Reverse Loop to the Basic Ticker Animation
      • Adding a Duration to the Basic Ticker Animation
    • Positioning and Tweening with Shape Drawing Methods
      • Relative Shape Positions and Stroke Perimeters
      • Tweening Shapes with Stroke Perimeters
    • Final Section
      • Additional Examples
      • Wrap-Up Summary

Course Fee:
USD 29

Course Type:


Course Status:



1 - 4 hours / week

This course is listed under Development & Implementations and Digital Media & Games Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top