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

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}     status = 'intro started'}"        on:outrostart="{() => status = 'outro started'}"        on:introend="{() => status = 'intro ended'}"        on:outroend="{() => status = 'outro ended'}"    >        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](https://lemonproductions.ca/)).