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: codepen.io/jlengstorf/pen/ExbqOON


Links:

greensock.com/docs/v3/Plugins/ScrollTrigger

greensock.com/forums/

codepen.io/

twitter.com/jh3yy

www.learnwithjason.dev/topic/animation

www.cassie.codes/

Watch future episodes live at twitch.tv/jlengstorf

This episode was sponsored by:
Netlify (lwj.dev/netlify)
Nx (lwj.dev/nx)
Backlight (lwj.dev/backlight)

Live transcription by White Coat Captioning (whitecoatcaptioning.com/)

Credits:

Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (creativecommons.org/licenses/by/4.0/)
Source: incompetech.com/music/royalty-free/index.html?isrc…
Artist: incompetech.com/

Busybody by Audionautix is licensed under a Creative Commons Attribution license (creativecommons.org/licenses/by/4.0/)
Artist: audionautix.com/

Additional sound effects obtained from www.zapsplat.com/