GSAP Typing Animation | Tween & Timeline Basics (2020)

[@codeSTACKr]

👉 Sign up for my newsletter to stay up-to-date on my new course: codestackr.com

[@AshikKhan]

Hi, I have tried to subscribe, but it doesn't go through giving error...

[@devhypercoder6772]

What is the cursor extension? Couldn't find it

[@olaidealaka6802]

You do teaching right! Your voice, pace, articulation, pronunciation, tone, pitch... Thank you!

[@guillermomazzari4983]

gsap could be a language on its own, it's so massive lol, love it!

[@bhagabatiprasad2612]

Awesome! This is what I was looking for. Thank you for this video. Need more on Gsap. loved it !!!

[@codeSTACKr]

You got it!

[@daughterdiary]

very amazing sir. I'm from Bangladesh. we want more from GSAP

[@amirThePiper]

Thanks for the very good explanation

[@codeSTACKr]

Glad it was helpful!

[@najimali32]

That looks pretty cool😻will try it.

[@codeSTACKr]

Have fun!

[@nickui]

Seems quite useful for big projects that rely on tons of animations!

[@codeSTACKr]

It is!

[@random__weeb]

Amazing! You taught so well! Thanks alot

[@kaporos]

Very cool ! We want more Gsap :p

[@chasingdownchano]

you, my friend, are amazing. Thanks for the tutorial

[@subhadipadhikary270]

Tnx for this video Gsap is best

[@xman3666]

Very nice video and thank you for sharing! I couldn’t find a playlist with only GSAP animation, can u creat one please? Also I’m very interesting to see more videos from you about GSAP!

[@finan-tech121]

Can you please do a GSAP tutorial... u did for..html,cssflexbox,css grids those gave me a lot of knowledge.... GSAP tutorial will be appreciable ❤️

[@markanthonyoccena7345]

Thank you for this!

[@davidgodinez7146]

This was amazing!

[@abulfazlhaidary2002]

Sure, more GSAP please!!

[@vedvardhangyanmote8079]

Wow! Will surely try that in my projects

[@codeSTACKr]

Go for it!

[@Orhanozkercin35]

Gsap tutorial would be more tha great!

[@mehmettemell]

great content. more videos with other plugins might be nice

[@dishantchaudhary7856]

❤️

[@muhammedsamsad3030]

i getting this error Invalid property text set to Jesse. Missing plugin? gsap.registerPlugin()

[@clem6991]

Hi Jesse! Thanks for the video, super useful as always :) Tho I was wondering how can I stop the animation on the last word ? If I change the repeat on masterTimeline it stops the animation after the first round but I don't have any text left beside 'Hi'

[@kikicoding423]

Hi Clem, this code works for me to stop it on the last word. Hopefully it works for you too. Maybe you've worked it out already though. words.forEach((word, key) => { let repeatAmount = Object.is(words.length - 1, key) ? 0 : 1 let tl = gsap.timeline({repeat: repeatAmount, yoyo: true, repeatDelay: 1}) tl.to('.text', { duration: 1, text: word, }) masterTl.add(tl) }) So I set repeatAmount to be 1 if it's not the last in the array and 0 if it is :) Let me know if you've worked out a better way!

[@khusbookumari2149]

please add more cool videos on gsap

[@xman3666]

Hi! It was amazing to see it, but now I’m facing a problem with this code. I put the method reverse.( ) but the words inside the array kept going on, they won’t reverse until the loop finishes. I tried kill.( ) and clear.( ) but it doesn’t work like I would like to. I would like that, once the elements .box and .hi starts reversing the masterTl should stop typing, even if the loop didn’t finish, and reverse like other elements. How do I do this?

[@flaviolonzi8684]

his congratulations on the video, I was wondering if it was possible to make the text Plugin and the Scroll Trigger coexist in a single effect it's possible????

[@xcg1234]

Nice video

[@codeSTACKr]

Thanks

[@israelnoah18]

Could you make a tutorial on gsap like that of sass.. at least in the projects one can follow along after getting some theory-practice session... Thanks

[@amirThePiper]

I want to write code with highlighting capability. any help?

[@arcbase]

thanks

[@sadev0]

Gsap with Reactjs

[@SkNasimPC]

Bro added one whole plaguing and customise an ease effect, copy and past the code from the documentation for that ease effect 😂... Some time front-end can be crazy 😂

[@iUmerFarooq]

Can you please make a Navbar with drop-down mega menu? In which when we click on drop down button it will show options even *Images.* I hope it make a scene. Like Samsung site. Thank you

[@codeSTACKr]

Great idea!

[@iUmerFarooq]

@@codeSTACKr Thank you ❣

[@andreykamenev3279]

React or Vue?

[@herms2525]

Thanks for sharing this. You make this easily understandable, and for that i thank you. I will consider more gsap in my projects indeed. its quite enjoyable to mess around with. Though, i have a problem with the typewriter effect. I seem to have the code and the plugin installed right, well, i do the exact same thing you do in this vid, but my console keep showing me 3x "gsap.min.js:10 Invalid property text set to I'm Stian. Missing plugin? gsap.registerPlugin()" I cant seem to figure this out. Does anyone have a suggestion?

[@Irzani938]

Damn. Frontend looks so complicated.

[@mildlyinteresting1000]

bro what a weird text you chose... I'm Jesse, I'm a father, I'm a husband... is that from some novel

[@lokeshgujjar177]

jai shree ram