Jump to content
GreenSock

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

Best way to start with GSAP

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

Hello,

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 :)

Share this post


Link to post
Share on other sites

 

https://greensock.com/get-started-js

 

That's where you can start quickly. There are other videos on the channel which are essential. After that spend some time reading docs so you get familiar with all available options/features. That should be enough to get started.

  • Like 2

Share this post


Link to post
Share on other sites

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.

  • Like 4

Share this post


Link to post
Share on other sites

Hey Abhinay,

 

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:

https://greensock.com/forums/topic/17332-suggestions-needed-getting-started-with-gsap/

 

 

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. 

 

Thanks!

 

 

  • Like 3

Share this post


Link to post
Share on other sites

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.

:)

  • Like 2

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×