Challenges and Solutions when using Svelte with Andrew Smith on Web Rush #114
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?
Challenges and Solutions when using Svelte
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}
<p
transition:fly="{{ y: 200, duration: 2000 }}"
on:introstart="{() => status = 'intro started'}"
on:outrostart="{() => status = 'outro started'}"
on:introend="{() => status = 'intro ended'}"
on:outroend="{() => status = 'outro ended'}"
>
Flies in and out
</p>
{/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.