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}