Fun, festive, interactive web animation with Cassie Evans

Many of the websites we love most are fun and interactive. In this episode, Cassie Evans will teach us how to add a little festive whimsy to our web projects with Greensock. Demo https://codepen.io/jlengstorf/pen/xxMoGoq Upcoming episodes: https://lwj.dev/schedule Links & Resources: - https://github.com/greensock/react - https://gsap.com/resources/React/ - https://gsap.com/resources/Wordpress - https://twitter.com/cassiecodes - https://gsap.com/docs/ - https://gsap.com/docs/v3/ - https://gsap.com/resources/get-started - https://www.youtube.com/@GreenSockLearning/videos Watch future episodes live at https://twitch.tv/jlengstorf This episode was sponsored by: - Netlify (https://lwj.dev/netlify) - Vets Who Code (https://lwj.dev/vetswhocode) Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/) 0:00 Learn with Jason with Cassie Evans 00:22 Introducing Brody 01:08 Who is Cassie Evans? 02:11 What is GSAP? 07:31 What is new with GSAP? 13:15 Why choose GSAP over Framer Motion?c 15:07 Can you use GSAP with WordPress? 15:43 Do you recommend adding GSAP as a dependency or with a script tag? 21:52 Starting to animate a snow globe with GSAP 26:12 Making the snow globe draggable 29:05 How does inertia work in GSAP? 30:04 Figuring out numbers for velocity values 33:11 What is velocity in GSAP? 36:56 Adding GSAP's ticker 44:43 Using Clamp 52:43 Changing a transformer into a function 54:55 Creating snowflakes 58:12 Passing in an array with set values for controlled randomness 01:08:02 What's the most performant image to use for animations? 01:08:39 Animating the snow relative to the velocity 01:13:06 Doing a bit of bike shedding on our code 01:15:45 Making the snow flurry with GSAP tween controls 01:20:24 Where can I learn more about GSAP?