Create Playful, Interactive Animations

Can we make our animations react to user input? We can! Cassie Evans will teach us how to use Greensock to create fun, interactive animations! 00:00:00 Welcome 00:00:20 Guest + dog introduction 00:06:11 How does animation impact in a business sense? 00:11:23 How do you convince stakeholders to spend money on animation? 00:19:27 Get booped animation test 00:22:08 Introducing scroll trigger observe 00:24:07 STarting with a little animation 00:29:30 Timelines vs Keyframes 00:36:45 Full page swipe-y galleries 00:46:05 Using Clamp 00:51:26 New feature: QuickTo 00:58:02 Adding a rainbow tail 01:06:53 Making it a game 01:19:47 Doing hit tests 01:25:50 Where can people learn more? * demo: https://codepen.io/jlengstorf/pen/ExbqOON Links: - https://greensock.com/docs/v3/Plugins/ScrollTrigger - https://greensock.com/forums/ - https://codepen.io/ - https://twitter.com/jh3yy - https://www.learnwithjason.dev/topic/animation - https://www.cassie.codes/ Watch future episodes live at https://twitch.tv/jlengstorf This episode was sponsored by: - Netlify (https://lwj.dev/netlify) - Nx (https://lwj.dev/nx) - Backlight (https://lwj.dev/backlight) Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/) Credits: Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1300012 Artist: http://incompetech.com/ Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Artist: http://audionautix.com/ Additional sound effects obtained from https://www.zapsplat.com