en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en de en en en en en en en en en en en en en en en en en en en en en en en en en en en de en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en ms en en de en en en en en pl en en en en en pt en fr en hu en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
As you all have been in the way of learning GSAP, on your way you might have recognized best ways(resources, methods, etc) of learning it, that help's me and some newbies who wants to start with it, thank you in advance as you are taking some time to answer this
Shaun Gorneau    2,020 Likes (Superhero)
The best way, as I see it, is to watch a few videos and define some small projects for yourself (e.g. click a DOM element and make it move across the screen and then disappear). Then start tackling small, practical projects. Visit CodePen to both look at projects and to develop small projects. Experiment.
Starting small and with specific goals quickly reveals the immense power in GSAP ... because bigger projects are really just a bunch of small projects strung together.
Share on other sites
Carl    10,905 Likes (Superhero)
Posted October 26, 2017
Thanks for asking. As the others have noted, there are various resources on this site that should help. As GSAP has grown in popularity there are many more free tutorials on other sites as well. The GSAP API is fairly large with 4 main classes,  many plugins,  and 100 or so methods for creating things, inspecting things, controlling things. It can be a bit overwhelming.
I'd have to echo the advice above: Start small. Get comfortable animating one or 2 things, build some basic sequences. Slowly add in some interactivity. Too often we see people coming here saying: I'm just starting with GSAP and I'm building a ScrollMagic site that has 30 svgs that I want animate in and out of the viewport and do this kind of 3D parallax thing and make it swipeable  and... You get the idea;)
Although we've put a lot of work into beginner resources like our Getting Started page, Getting started video, and Jump Start, there's always room for improvement. So we're very interested in hearing what people think we could be doing better for beginners... especially from beginners.
Check out this new thread:
Although my point isn't to sell you on anything, It would be remiss of me not to mention that we recently released an extremely comprehensive video course available that will walk you through the GSAP API via a series of small, modular projects with detailed step-by-step instructions. In addition to having paid options available we certainly want to make sure that people can get up and running quickly for free, so hopefully we will get some good feedback on the Getting Started article.
Share on other sites
PointC    14,034 Likes (Superhero)
Posted October 26, 2017
In addition to the advice above, I'll offer one piece that helped me. I started by copying and pasting tweens from the work of other members. That's fine for your first few, but after that, you'll learn more by typing out every character of every tween.
It gives you a better feel for the syntax and you're going to make mistakes. You'll invariably miss a comma or semicolon and sometimes forget to close your curly braces. This will cause errors that will need to be fixed in order for everything to work. Those mistakes will teach you a lot more than having everything work perfectly from a copy and paste.
Just my two cents worth. Happy tweening.
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 5
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Best way to start with GSAP
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
“@greensock is just pure awesomeness. What more can be said?”
“Reading through the GreenSock docs; been amazed like 14 times so far! How can a library be SO complete? Been using that for about 2 years now but man... This the first time I feel this way about a library.”
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“...obviously GSAP is incredible.”
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“Truly, you folks on this forum are the nicest, least judgmental, helpful people I've ever encountered.”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.