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
🤖 I now use AI-powered code completions thanks to Kite. You should too so grab it FREE: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________
📢 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
source
