[Beginner - how do I learn how to strategize to build animations]

Thanks to everyone for your responses, especially OSUBlake! I haven't had the chance to take a deep dive look at it, but anxiously look forward to it! 

[Beginner - how do I learn how to strategize to build animations]

Greetings, friends:

 

My name is Kim, and I'm a Javascript developer who is playing with Greensock. I really like doing animations and hope to one day make super amazing animations and such. In my attempts to learn, I've been studying indepthly the codepen that I've attached, including commenting every line of the code that I understand. The getCoords() function is where I get totally lost, and don't feel optimistic that I would ever be able to write something like that step for step. I wouldn't even know where to begin if I tried to create a similar effect on my own. How much practice/skills do you think it would take to start to be able to build something like that?

 

Are there any classes/online resources that truly go indepth on how to build something like that from scratch? Not just the basic commands/'code along with me' but the complete thought process needed to build them. I feel that that's the area where I lack skills.  I would love to hear any suggestions. Does the ihatetomatoes course go over stuff like this?

See the Pen aqaYxr?editors=0110 by kscarabello (@kscarabello) on CodePen

[Triggering GSAP with an event handler]

Thanks OSUBlake! Much appreciation.

[Triggering GSAP with an event handler]

Greetings, friends.

 

Inspired by 

See the Pen aqaYxr?editors=0010 by kscarabello (@kscarabello) on CodePen

 that came out this week (the animal that watches you type in your email, and covers it's eyes when you write in a password), I'm trying to test my skills to see if I can recreate something similar. Where I am at right now is trying to get any sort of animation to work upon focusing on the password input bar. I intended to target the 'star' in the animation, and (in following the model of the other codepen), am wondering what I'm missing to make that animation trigger. Doesn't have to be pretty - just want to get the targeting an animations to work correctly.

 

 

 

See the Pen OQwWRb?editors=1010 by kscarabello (@kscarabello) on CodePen

[Why is my code failing to animate?]

Thanks so much, PointC. Right when you messaged, I applied a different attribute, and it worked. Glad my targeting was correct.  Now I can actually start playing!

 

Thanks so much!

[Why is my code failing to animate?]

Greetings, friends:

 

I am a newb to Greensock and, for the life of me, I can't successfully animate a piece of an svg image. I've included a link to the codepen I'm working from, if you are interested. Basically, I thought I'd try to get the word 'they' to do something, and I'm failing somehow.

 

var they = document.getElementById('they')

TweenMax.from(they, 10, {width:300, height:600})

 

This is the code I'm using to target and animate the word 'they'. In the html portion of the code, it's a path with a lot of different coordinates, but to show that I'm targeting it with an id of 'they', here goes... (didn't include the whole path because it's long)

 

 <path id="they" d="m116.901,428.332c-2.841,1.086 -5.442,2.195...

 

Why is the code doing nothing? Don't necessarily need it to look good, just want it to do something. What's wrong? No errors are showing in the console. I believe that I did successfully plug in the library via the settings.

See the Pen gvvPxb by kscarabello (@kscarabello) on CodePen