Episode 114: Challenges and Solutions when using Svelte - Andrew Smith
Andrew Smith helps animate Ward Bell - and John and Dan as well - with thoughts on using Svelte for animations. Why should you use Svelte? How does Svelte makes animation easier? What about Greensock? And what are Svelte Stores.
John Papa @John_Papa
Ward Bell @WardBell
Dan Wahlin @DanWahlin
Craig Shoemaker @craigshoemaker
Andrew Smith @silentworks
Brought to you by
Resources:
- Andrew Smith
- Fabulous Thunderbirds “Wrap it up”
- BackbonJS
- Svelte 3 with Rich Harris
- Spine JS
- Knockout JS
- Introducing Svelte (Nov 2016)
- CSS Transitions (per MDN)
- Svelte motions
- Svelte transitions
- Fade transition in Svelte
- Transition events
- Can’t believe how simple this one is to implement. Pretty cool
- Greensock animation library
- NY Times election animation with Svelte
- Svelte Recipes
- Amelia Wattenberger
- Cypress testing
- FrontEnd Masters - Animations - Rich Harris
- Native-Like Animations for Page Transitions on the Web - Sarah Drasner
- flip function — flip stands for — from svelte/animate: FLIP = FIRST _ LAST _ INVERT _ PLAY
- Svelte Stores
- Svelte Easing
- Tweened example
- Chronological Order to watch Star Wars Clone Wars
- On ordering Brisket from Aaron Franklin. Mouth watering
- Ngrok
- Compare Svelte with React, Vue and Angular
{#if visible} Flies in and out
{/if}Timejumps
- 01:57:06 Guest introduction
- 04:54:09 Svelte comes out
- 08:07:05 Why go to Svelte?
- 10:21:17 Animations with Svelte
- 15:00:17 Transitions in animations
- 17:07:17 Sponsor: Ag Grid
- 18:10:00 Does Svelte make animation easier to work with?
- 24:52:00 Making animations easier
- 26:31:14 What about Greensock?
- 30:23:12 How to disable animations for testing?
- 35:21:07 Designing for big screens
- 42:02:21 Sponsor: IdeaBlade
- 43:07:09 What does the $ sign and what are Svelte Stores?
- 49:10:18 Final thoughts
Podcast editing on this episode done by Chris Enns of Lemon Productions.