Jump to content
Search Community

I want to create my own (simplified) GSAP library

chenxin 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

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.

 

 

 

Link to comment
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
Link to comment
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.

Link to comment
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
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...