Scrawl 101 - the boilerplate stuff

Extensions: core, block

In this first lesson, we show you how to:

  • include the Scrawl-canvas JavaScript library in a web page
  • add functionality to the core code by loading extensions
  • create and display a rectangle on a canvas element
  • add a new canvas element to the web page

Use the CodePen below to follow the tutorial. Feel free to change stuff and play with the code as you go along.

Basic animation

Extensions: core, phrase, animation

In this lesson, we show you how to:

  • use the Phrase entity
  • add an animation object to update the canvas display

Fun with images - magnifier effect

Extensions: core, images, block, animation

In this lesson, we show you how to:

  • load images into the Scrawl library
  • display those images in a <canvas> element
  • code up a simple magnifier effect

Drag and drop entities on a canvas

Extensions: core, block, phrase, animation

In this lesson we show you how to pick up, move, and drop Scrawl entities

Irregular shapes - drawing an interactive arrow

Extensions: core, path, factories, animation

In this lesson, we show you how to:

  • build an irregular shape using the Path entity
  • manipulate the arrow to fix its tail to the center of the canvas
  • animate the arrow

Animate text along a path

Extensions: core, path, factories, animation, wheel, phrase

In this lesson, we show you how to:

  • build a bezier path whose curve can be updated interactively by drag-drop handles
  • animate text along this path

Sprite animation

Extensions: core, animation, images

In this lesson, we show you how to:

  • import a sprite sheet into the Scrawl library
  • define a SpriteAnimation object to use with the sprite sheet
  • define and run the sprite animation in a Picture entity

Using filters in canvas elements

Extensions: core, animation, images, block, shape, path, factories, filters

In this lesson, we show you how to:

  • learn about the perils of the browser's 'same-origin' policy
  • build and apply a filter to an entity
  • animate that entity to move the filter across the canvas

Freehand drawing using Shape entitys

Extensions: core, animation, shape

In this lesson, we show you how to construct and display user-drawn lines

Fun with gradients

Extensions: core, animation, block

In this lesson, we show you how to:

  • define linear and radial gradients
  • apply the gradients to entitys
  • animate a gradient

Basic tween animations

Extensions: core, animation, wheel

In this lesson, we show you how to:

  • define a simple tween animation
  • assign one or more entitys to a tween
  • start a tween
  • apply different easing engines to different entity attributes

Controlling tweens

Extensions: core, wheel, phrase, animation

In this lesson we show you how to run, halt and resume a tween.

Tweens and Tickers

Extensions: core, animation, shape, factories

In this lesson, we show you how to:

  • create a ticker object to control and sequence multiple tweens
  • trigger an action function every time a tween ticks
  • use percentage values to define a tween's duration and start time
  • build our own easing engine for use by a tween

Build a timeline

Extensions: core, animation, wheel, images

In this lesson, we show you how to:

  • use the globalCompositeOperation attribute to change how entitys are stamped on the canvas
  • plan out, and define, a timeline animation
  • delete a tween from the Scrawl library
  • use the ticker event emitter to update an HTML5 range input element

Action objects

Extensions: core, animation, wheel, images

In this lesson, we show you how to:

  • add action objects to a ticker
  • clone a tween
  • control a timeline animation by dragging a range input element

title

Extensions: core, ???

In this lesson, we show you how to:

  • aaa
  • bbb
  • ccc

Related demos

Additional information