Crafting Web Comics with Ember

on YouTube ↗28m

" summary

An Ember app serves chapters and chapter-detail URLs from a small backend, loads page-and-panel data, and composes layered sprite-sheet panels into frame animations using the Web Animations API. Keyframes use steps easing for discrete frames, layers add keyframe effects into a group effect so one Animation controls play/pause, and a viewport add-on triggers playback on enter. The demo shows concrete code patterns: router-driven state, per-panel keyframes, animation options, and polyfill notes for browser support.

AI-written summary · about

" chapters (13)

1. 0:00Start
2. 7:34Asset Management
3. 10:10Comic Panels
4. 16:21The Web Animations Api
5. 16:41Web Animations
6. 17:20Keyframe Effects
7. 18:49Animation Options
8. 20:57Ember Component
9. 21:42Sprite Sheet Animations
10. 22:13Steps Easing
11. 23:31Group Effect
12. 25:08M1 Viewport
13. 27:20How Do You Solve the Browser Support for this Web Animation Api

" related talks

• 34mCrafting Web Comics with EmberJessica Jordan · Mirror Conf 2018
• 31mCrafting Web Comics with EmberJessica Jordan · EmberConf 2019
• 23mAnimate the Web with Ember.jsJessica Jordan · RuhrJS 2017
• 32mAnimate the Web with Ember.jsJessica Jordan · EmberConf 2017
• 32mAnimate the Web with Ember.jsJessica Jordan · jsDay 2017
• 32mAnimations and Transitions in an Ember AppEdward Faulkner · EmberConf 2014
• 27mCrafting Comics for Literally EveryoneJessica Jordan · ReactiveConf 2019
• 26mInteraction Design with Ember 2.0 and PolymerBryan Langslet · EmberConf 2015