Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
chenxin

I want to create my own (simplified) GSAP library

Recommended Posts

I have been using GSAP for several months now, and I really love it. Recently I start to wondering how GSAP works under the hood, and I want to create my own animation library from scratch because I think that is a good way to learn animation.

I tried to read the GSAP source code, but I can't really understand it... Is there any good way to start? Books or articles ? or I should stick on the source code.

 

 

 

Share this post


Link to post
Share on other sites

Hey chenxin and thanks for being a Shockingly Green member.

 

14 minutes ago, chenxin said:

I want to create my own animation library from scratch because I think that a good way to learn animation.

What do you mean "learn animation"? If you mean how to create things like what Chris Gannon or other animators make, reading the source code of GSAP probably won't help very much. For learning how to create animations like that, creating demos and breaking down demos of other animators is probably the best way to learn.

 

14 minutes ago, chenxin said:

Is there any good way to start? Books or articles ?

GSAP is just specialized JavaScript, so if you're having trouble understanding the source code it'd be good to get a more full understanding of JavaScript itself. There are online courses, articles, videos, and books that can help you there. But again, I find that creating demos  and breaking down other peoples' is one of, if not the best, ways of learning. 

 

Ultimately it depends on what your end goals are - if you want to be a developer like Jack (@GreenSock) who spends most of his days working on the backend of an animation library like GSAP, then understanding the source code could really help. If you want to be more like Chris Gannon, understanding the source code probably won't help very much. 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Hey Zach, thank you for your answer. By "learn animation" I mean learn how to create an animation library. I have been using GSAP for several month and I think it is time to know what is going on under the hood. Like you said , I will get a more full understanding of JavaScript itself, and hope finally I can understand the source code.

Share this post


Link to post
Share on other sites

This post may also interest you for a general description of why GSAP is fast:

 

Share this post


Link to post
Share on other sites

If you hang around the GreenSock forums and contribute for a while I bet your understanding of how GSAP works will also increase a good bit. We'd love to have you around contributing wherever you can :) 

  • Like 4

Share this post


Link to post
Share on other sites
7 hours ago, chenxin said:

I tried to read the GSAP source code, but I can't really understand it

 

GSAP probably isn't the best library to learn from. It's written in a very optimized way, which adds complexity, and makes it hard to follow. Maybe look at a bare-bones tweening library, like tween.js.

https://github.com/tweenjs/tween.js/blob/master/src/Tween.js

 

To learn how easing and tweening works, I would recommend checking out some of the Coding Math videos on YouTube.

https://www.youtube.com/user/codingmath/videos

 

Source code for videos: 

https://github.com/bit101/CodingMath

 

To get started, I would recommend watching:

  1. Math mini #1: Normalization
  2. Math mini #2: Linear interpolation
  3. Math mini #3: Map
  4. Episodes 27, 28, 29, 30, 31

 

 

  • Like 4

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×