Web Rush

Episode 114: Challenges and Solutions when using Svelte - Andrew Smith

Episode Summary

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?

Episode Notes

John Papa @John_Papa

Ward Bell @WardBell

Dan Wahlin @DanWahlin

Craig Shoemaker @craigshoemaker

Andrew Smith @silentworks

Brought to you by

• ag-Grid

  

• IdeaBlade

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.