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