In this episode, Amy and James talk about adding CSS and JavaScript animations to your project: things to consider, the best properties, methods, and libraries to use.

Sponsors

Vercel

Vercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.

For more information, visit Vercel.com

ZEAL is hiring!

ZEAL is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.

ZEAL believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, ZEAL looks for collaborative, object-oriented, and organized individuals to apply for open roles.

For more information visit softwareresidency.com/careers

DatoCMS

DatoCMS is a complete and performant headless CMS built to offer the best developer experience and user-friendliness in the market. It features a rich, CDN-powered GraphQL API (with realtime updates!), a super-flexible way to handle dynamic layouts and structured content, and best-in-class image/video support, with progressive/LQIP image loading out-of-the-box."

For more information, visit datocms.com

Show Notes

0:00 Introduction
2:48 Parenting Tip
4:04 Rant: Learning Multiple Languages
6:37 Our Fantastic Sponsors
6:51 What We've Been Up To
9:59 Why use animations?
- Jason Lengstorf
- Josh Comeau
- CSS for JS
12:27 Adding Context for Users
14:34 Games and Animation
- Val Head
16:28 Speed of Animation
17:33 Sponsor: Vercel
18:40 Transitions vs Animations
23:06 Animations in CSS
- Cubic Bezier Curve
28:02 Transition Property
32:16 Sponsor: DatoCMS
33:10 Green Sock
- YouTube Video on Tweening SVGs with GreenSock
35:45 Framer Motion
- Matt Perry
- Will Johnson (Egghead Course on Framer Motion)
- Pete Cape Cod - Hashnode Article on Framer Motion
- Motion.dev
39:10 React Spring
39:52 Remotion
- Johnny Burger on Twitter
41:15 Sponsor: ZEAL
42:08 Built into SvelteKit
- Swortle
- Wand Selector
45:09 Grab Bag Question
45:21 Grab Bag Question #1: What would you prefer? CSS Animations? Vanilla CSS? JS? Or an animation library like GSAP or Framer Motion?
46:59 Grab Bag Questions 2: What are the cheapest and most expensive (performance) types of animation?
48:24 Picks and Plugs
48:37 Amys Pick: Camo Studio
50:07 Amy's Plug: SelfTeachMe on YouTube
52:25 James's Pick: Logitech Lights
53:59 James's Plug: James Q Quick on YouTube