Learn GSAP In 23 Minutes

195,859
0
Published 2020-06-30
Creating complex animation in CSS is difficult. Lining up timings is brittle and reversing an animation is nearly impossible to do properly. Luckily, complex animations can easily be created in JavaScript with the help of the GSAP library. In this video I go over everything you need to know about GSAP in order to get started using it in your next project.


📚 Materials/References:

GSAP Install Page: greensock.com/docs/v3/Installation#CDN?&_rid=93545
GitHub Code: github.com/WebDevSimplified/GSAP-Animation


🧠 Concepts Covered:

- How to install GSAP
- How to create timelines in GSAP
- Modifying animation speed in GSAP
- Reversing GSAP animations


🌎 Find Me Here:

My Blog: blog.webdevsimplified.com/
My Courses: courses.webdevsimplified.com/
Patreon: www.patreon.com/WebDevSimplified
Twitter: twitter.com/DevSimplified
Discord: discord.gg/7StTjnR
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified


#GSAP #WDS #JavaScript

All Comments (21)
  • @briandesign
    "How to learn GSAP in 11.5 minutes on 2x speed"
  • @csablons
    I think the "onComplete" attribute is a handy one you should mention. Ex: gsap.from('.header', {duration: 1, y: '-100%', ease: 'bounce', onComplete: ()=>{doSomething()}) Once the animation is complete the function "doSomething" will be called.
  • @ChillCityNaveen
    when i was learning i thought why gsap is so complicated but now in 23 mins i realised is that easy!!!! Thanks mate for this tutorial... :)
  • @nsharma4981
    I'd been curious about gsap since a long time but always put off learning it coz you didn't have a video on it yet. But now thanks to you, I've familiarised myself with it in just 23 mins! It's crazy how much and how well you teach in such a short video! Thank you so much, Kyle. Appreciate all you do 😊
  • @mohammedrezq
    I don't usually comment on YouTube, but to be clear you're by far one of the best code teachers I have watched on the internet. You have the ability to explain difficult concepts in a very simple way that gets stuck in head. Keep on the good work.
  • @wasukalu
    I just watched this video today & you are not just making the GSAP looks simple to use, but also the CSS tricks in a simple way. Learnt a lot in just this short video. Thanks for your great work & useful video as usual.
  • @LuisReyes-zs4uk
    Videos like this are why this is one of my favorite YouTube channels. I feel like I just learned some useful, powerful stuff. Thanks so much!
  • I'm still learning the basics right now, but had to watch. Your style of instruction made something potentially intimidating way more manageable. Thank you
  • Thank you for clearly explaining these concepts! You have been very helpful. All the best 💪🏽
  • @thecodingowl
    DUDE, it was just 23 min and I added another great Part in my development. DUDE I am following you from when you had like what thousand subscribers, of course, its a different account. but you never cease to amaze me. THANKS :)
  • @pvsagar92
    Always quick and spot on. Thanks for the animation tutorial. Definitely need to know them for professional grade development.
  • @AndyMilne1982
    Brilliant. Your videos are really helpful and incredibly easy to understand. Thank you!
  • @b1mind
    GreenSock!! 💚🧦Best animation library period!
  • @oldlucky1326
    Awesome vid! I would also recommend saying hello and asking any GSAP related question in their forum - the mods and maintainers are some the coolest guys around and regularly go above and beyond to help.
  • @jeffkarr9580
    Thank you for this clear and concise tutorial regarding the use of gsap 3 !
  • @ammarhalees6370
    Kyle you are doing god's work!! By far the best Dev tutorial channel on the internet!
  • Thanks, man You do explain it in a very simple way. Sometimes I see other videos and do not understand but the same thing is easier over here.
  • @someone9493
    You made it look as easy as possible, thanks a lot!
  • Man you really live up to your channel name! You really make the Web Development really simple.
  • @martinkarugaba
    I came back to say thank you for this video. It is on point. Just what I needed.