GSAP Typing Animation | Tween & Timeline Basics (2020)

Channel:

codeSTACKr

Subscribers:

296,000

Published on August 7, 2020 3:06:16 PM ● Video Link: https://www.youtube.com/watch?v=ZT66N5hBiCE

Category:

Tutorial

Duration: 20:12

20,583 views

694

In this video, we're going to create a typewriter effect using GSAP. There are no CSS animations. You'll be surprised at how little code this takes. Only about 15 lines of JavaScript.

So, what is GSAP? It's the GreenSock Animation Platform. Their tag line is "Ultra high-performance, professional-grade animation for the modern web".

It's a set of small JavaScript files that help you create animations that look great in modern browsers. This library for animations is super easy to use. I'll show you some basics in this video.

We'll cover tween and timeline basics.

Code: https://github.com/codeSTACKr/gsap-typing-animation

Timeline:
00:00 Intro
00:19 Sponsor (Scrimba)
01:09 What is GSAP?
01:34 HTML
03:12 CSS
04:45 JavaScript - Cursor Animation
07:10 CSS - Box Styles
08:28 JavaScript - Box Animation
12:31 JavaScript - Text Animation
17:52 JavaScript - Flicker Animation
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions

🚢 Deploy for FREE on Vercel: https://vercel.com/ambassadors/codestackr
_____________________________________

📢 Limited Time Offer from Scrimba!! https://scrimba.com/path/gfrontend?utm_campaign=codestackr_launch
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

Watch Next:
Web Development - Beginners Roadmap (2020) - https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #GSAP #Animation