presstube / scrolltime

Binding a createjs/canvas timeline to a scroll for flip-book fun.

Home Page:http://scrolltime.surge.sh/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Scrolltime

Rough spike of binding a timeline-based canvas animation to a vertical scrolling page.

Rough inital steps:

  • make a simple demo animation ✓
  • wire animation up fullscreen 'fixed' ✓
  • setup a scrolling DOM element of arbitrary length ✓
  • listen for scroll event ✓
  • normalize scroll position to a number between 0-1 ✓
  • apply that scroll percentage to the timeline ✓

Potential next steps:

  • re-center animation on resize ✓
  • Bind a DOM Node position to a canvas object ✓
  • resolution independent
    • on startup
    • on resize (only matters for multi-monitors)

Notes:

  • explore why stage is getting passed in as a callback to the tick listener
  • come up w/ a good story for importing createjs (maybe submit a PR for gskinner?)
  • build isn't watching html and copying to build
  • we have multiple files not being watched: index and assets
  • explore whether or not to scale the animation in this
  • explore scroll boundary 'bounce' and cross platform differences (safari hello?)

About

Binding a createjs/canvas timeline to a scroll for flip-book fun.

http://scrolltime.surge.sh/


Languages

Language:JavaScript 90.2%Language:HTML 9.8%