Animation with GSAP - the basics [ A beginners guide to SVG part 5 ]

One of the best things about SVGs is how easy it is to animate the individual parts of them. It opens up a world of possibilities. CSS keyframes and animations work fine, but GSAP, or the Greensock Animation Project, can make our life easier (once we learn how to use it!).

This is a long video so I've put *timestamps* down below to make life easier :)

This video is an introduction to GSAP. To make it easier and try to show how it relates to CSS animations, I start with a CSS animation, then move into using GSAP to do the same thing, and then expand on that and make it better.

Perhaps the best thing with GSAP is not having to worry about keyframes, especially when adding new parts to your animation, whether they be at the start, middle, or end of it. It's an amazingly versatile tool that I only touch the VERY basics of in this video.

#gsap #svg

It's a long video, so here are some timestamps (only works on desktop):
CSS Animation: 2:51
GSAP Intro: 6:48
GSAP Basics: 12:20
GSAP Stagger: 19:20
Making the X on click: 23:40
GSAP animations at the same time: 31:32
GSAP Eases: 39:40
Making a cooler animation: 44:20

---

I have a newsletter! https://www.kevinpowell.co/newsletter

New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass

---

My Code Editor: VS Code - https://code.visualstudio.com/

How my browser refreshes when I save: https://youtu.be/h24noHYsuGc

---

Support me on Patreon: https://www.patreon.com/kevinpowell

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

Видео Animation with GSAP - the basics [ A beginners guide to SVG part 5 ] канала Kevin Powell