Jump to content
Search Community

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

Scarybelles test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Hi Kim :)

 

This is one of those subjective questions where 10 different people will most likely give you 10 different answers. I think a lot depends on your individual learning process. Do you prefer books, online tutorials, videos, demos, classes etc... I'm not sure there is a one-size-fits-all approach. You said you're a beginner, but I'm not sure if that means you've been coding for a month or a year. I've been doing this for a few years and there are days I still feel like a beginner. :D

 

Our resident 'AI from the Matrix that escaped to the human world' @OSUblake will probably tell you that creating little games is an excellent way to learn as that will help you to think logically step by step. It's advice he's given before and I second it. It's one of the things I've been doing lately and it's a lot of fun in addition to being a wonderful learning experience. 

 

As far as real world projects go, I think what you're doing by reverse engineering CodePen demos is an excellent way to learn.  I'm not sure about any particular classes that take you from concept to conclusion. Others may have some links and ideas about that. 

 

I think the biggest thing is just keep writing code. Everyone writes bad code and starts out knowing nothing at the beginning of their coding journey. Write code, write code, write code and then write more code. If you do that and learn a new thing each day, everything will start to click and you'll have may 'ah-ha' moments as you progress. 

 

I'm sure others will jump in here, but that's my little 'ol two cents worth for you.

 

Happy tweening.

:)

 

 

 

  • Like 6
Link to comment
Share on other sites

Quote

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?

 

Hey Kim,

 

Welcome to the forums :)

 

I'm still relatively new to greensock but I've been designing for as long as I can remember. I've come to believe the two are actually very symbiotic. As @OSUblake said the other day on here. All the best developers he knows have come from a design background (I believe also the Greensock team).

 

As far as design process goes dribble is really incredible for me for a few reasons. People post progress of their work as they are going along & other people rebound them. It helps me see the process & I can deconstruct how things are made a lot easier. For me at least 80% of the things I make come from some sort of visual inspiration. From there it's really just a question of "can I code this from scratch?" No matter what the answer is here, I'll go straight to after effects/in vision/webflow & make a prototype.

 

From here I have pretty much everything I need to start coding it, general idea of structure/easing/colours etc. If I'm still unsure I head to Codepen and see if anyone has achieved anything close to what I'm trying to do and reverse engineer it, as you're doing already! If you're still struggling at this stage you can post your progress on a forum and see if anyone has done something close or can help you towards understanding the hard parts.

 

Absolute worst case scenario: It's too complex & you can save the idea for later, or try and render your animation from after effects using bodymovin & GASP together (super powerful combo)!

 

I also recommend The Futur (they literally have a series called the process which talks about... you guessed it, the creative process). IMO this is the best channel on YouTube... I've learnt more on here in an hour, then I have in some days at university.

https://www.youtube.com/user/TheSkoolRocks

 

Finally here's a cool bodymovin' tutorial if you're interested in that as well - 

 

Hope at least a tiny bit of that was useful :) as I say I'm still a nublet.

 

All the best,

Smallio

  • Like 6
Link to comment
Share on other sites

Hi @Scarybelles

 

That's a really neat animation!

 

11 hours ago, Scarybelles said:

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.

 

I like your approach to learning. That's kind of how I got started. I rebuilt a pretty complicated project from scratch, adding one line of code at time, making sure I understood what everything did. It took awhile, but it was worth it.

 

 

11 hours ago, Scarybelles said:

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.

 

Here's the basics of the getCoords function. It starts off by creating a div and span. It copies the text from the input to the div, and copies every single style from the input to div. Basically, it creates a clone of the input, but as a div, and appends it to the body. 

 

A dot character "." is added to the span, and the span is appended to the div, so it will be right after the text. It calculates the position of the span, giving you the width of the text. That width is then added to position of the input giving you the coordinates of the caret.

 

From there the function calculates the angle from certain points on the SVG to the coordinates of the caret, which are used to calculate other coordinates that are used in the tweens. And at the very end it removes the div so you don't see it.

 

I modified the animation so you can see what's going on a little better.

 

See the Pen qxJqdR by osublake (@osublake) on CodePen

 

 

Creating elements and copying styles is a rather involved approach for getting the width of the text

 

 

Tip of the Day

You can use <canvas> to get the width of text, and it requires no DOM manipulation.

 

var cs = getComputedStyle(email);
var context = document.createElement("canvas").getContext("2d");
var spacing = parseFloat(cs.letterSpacing) || 0;
context.font = cs.font || [cs.fontStyle, cs.fontVariant, cs.fontWeight, cs.fontSize, cs.fontFamily].join(" ");

function getCoords(e) {  
  ...
  var metrics = context.measureText(email.value);
  var textWidth = metrics.width + spacing * email.selectionEnd;
}

 

 

For help understanding some of the trig used in the demo. Note that JavaScript math functions use radians instead of degrees.

 


Angle between two points

 

var dx = point2.x - point1.x;
var dy = point2.y - point1.y;

// Note that dy is the first parameter
var angle = Math.atan2(dy, dx);

 

 

See the Pen yvRXbX by osublake (@osublake) on CodePen

 

 

 

Rotate around point

 

var x = centerX + Math.cos(angle) * radius;
var y = centerY + Math.sin(angle) * radius;

 

 

See the Pen XZxgoP by osublake (@osublake) on CodePen

 

 

 

Distance between two points

 

var dx = point2.x - point1.x;
var dy = point2.y - point1.y;
var distance = Math.sqrt(dx * dx + dy * dy);

 

 

 

Convert radians to degrees and degrees to radians

 

var RAD = Math.PI / 180;
var DEG = 180 / Math.PI;

var radians = 180 * RAD; // => 3.14
var degrees = 0.7854 * DEG; // => 45

 

 

 

Tween with radians

 

// Just add a _rad string on the end
TweenLite.to(foo, 1, {
  rotation: Math.PI + "_rad"
});

 

 

  • Like 6
Link to comment
Share on other sites

I would suggest you first try to identify what it is your goal is. Animation is a fairly broad topic.

 

For instance in my case I haven't made the leap to very sophisticated OOP or math based animation or canvas stuff. My goal is design and communication oriented, mostly how to create effective pluggable functions and frameworks and trying to create efficient workflows for using basic animation in user interfaces etc... Although that Yeti is some pretty sharp UI work so maybe it's time I upped my game.

 

Others here are interested in more esoteric or creative pursuits, so follow your interest, find examples break them down. If it's GSAP based ask questions here, I think you've probably already experienced the value of this forum. Even if it isn't there's almost always someone to point you in the right direction.

 

Good Luck, and welcome to the forum!

 

 

 

 

 

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...