Carl

Suggestions Needed: Getting Started with GSAP

Recommended Posts

Hey folks,

 

I could use your help as people with unique insights into what "worked best" or what you found "most important" during your first encounters with GSAP. We are looking to revamp / gut our Getting Started article. When it was first created GSAP for JS was in its infancy and we needed to do a lot of explaining about what GSAP is and does. It turned into a monster of an article that is quite intimidating to try to absorb. We created the Getting Started video to help people fast-track to the most important on-boarding aspects: Load GSAP, create a tween, mess around with different properties. It definitely helped a lot of people. However, some people don't like investing in watching a video or have language problems.

 

We also added the Jump Start to act as a "feature tour" of sorts, but we are feeling that it is also quite dated right now.

 

So the challenge here is how do we make the Getting Started page easier to absorb for people touching GSAP for the very first time. The goal is NOT to make them experts on the whole API, it is to make their first 2 or 3 hours pleasant without any major roadblocks. 

 

My question is: What are the top 5 features or concepts that you would want to see as someone using GSAP for the first time. What works best for you as a learner of something new.

 

Thanks!

 

 

  • Like 4

Share this post


Link to post
Share on other sites

For me, the things that stood out to me in the first few weeks were ...

 

  • Chaining and offsets to create perfectly timed sequences of animations
  • Labels!
  • That I could rely on eases to make visually complex animations very simply
  • Don't underestimate FromTo and Stagger!
  • That you can animate any property of any object ... huge!

 

The biggest feature of the platform ... the community! This forum is second to none.

  • Like 5

Share this post


Link to post
Share on other sites

Great Topic and question @Carl

 

Top 5 features or concepts would be:

  1. how to use the position parameter (like when to use position parameter versus delay, relative values verse absolute values, and labels)
  2. gotchas when using all from() tweens (like immediateRender, etc)
  3. when to use the add() method
  4. when to use TweenMax (TimelineMax) versus TweenLite (TimelineLIte)
  5. organizing child timeline functions for use in a master timeline

Just my two cents on this :)

  • Like 5

Share this post


Link to post
Share on other sites

I could see some importance to let the first timer's know about the prerequisites to learn GSAP, for example minimum knowledge on javascript helps us to understand and learn GSAP easier, a person who has no idea on javascript might feel difficult to understand/retain the syntax/concepts of GSAP.

 

not sure if this is important, just putting out my initial thoughts when I first visited getting started page.

 

 

 

  • Like 6

Share this post


Link to post
Share on other sites

GSAP can cover so many topics, so I think a choose your path option might be the best thing.

 

I want to...

  • Learn the basics
  • Animate SVG
  • Animate UI components
  • Create a banner
  • Drag stuff

When I first started learning, I was only interested in dragging stuff, but I had to sit through and watch a bunch of videos about making a Burger Time banner, which I didn't care about.

 

And dedicating a section on animating UI components would be huge. Showing people how to animate stuff with click and hover events would eliminate half the questions you get on this forum. 

  • Like 5

Share this post


Link to post
Share on other sites

Thanks, for all the feedback. Interesting to see the different perspectives.

 

Share this post


Link to post
Share on other sites

I see where your struggle is at, and I can see exactly what you mentioned in the site.

One large thing that shouldn't be overlooked is the psychological aspect of confronting a challenge such as learning a new skill. Having someone provide even a tiny bit of encouragement and motivation can go a long way for their success. (Even simple motivational pictures posted each week can create the spark)

Having an approachable image is your brands largest asset, and it's a large reason you have been so successful. I feel you should continue to embrace that angle with a lot of super simple downloadable .html pages (CodePen can be a little intimidating to those so green)  and encourage paid subscribers to ask questions and receive answers. I agree that the technical docs are needed, but not to lead with. Let them find those when they are ready.

Have a Beginner section and an Advanced section.
You sort of do this already with Lite and Max. Keep It Simple. 2 levels.

I would archive the videos.

Biggest thing, don't forget...a little encouragement and motivation from a brand can go a long way in helping others tackle a new skill, and if you help them do that, you gain a lifelong customer. Don't lose the personal aspect, it's your brand's largest asset. 

shutterstock_553995328.jpg

  • Like 2

Share this post


Link to post
Share on other sites

In my expercience the sequencing is really important.

(functions,master timeline, labels )

 


What i find to be missing sometimes are some free in dept tutorials.

example: How to create a smiley face and animate the eyes so it looks like he winks. 

Things that make you go like: "Ohw thats how they do it, or : I wouldnt have thought about that"

Just some tips and tricks and really take a long animation appart.

 

There is allot of documentation on this website wich is great. But for people like me showing me would be much more interesting.

I would suggest to look at the paid gsap courses out there and create something similar.

 

 

Share this post


Link to post
Share on other sites

Hi @timdt,

 

Sure, good ideas and executions encourage, motivate people to try something for themselves.

That's how I felt about this character. I saw the illustration in a magazine and wanted to animate it:

 

 

 

Best regards
Mikel

 

P.S .: On CodePen you can find plenty of good executions.
Just try with a few keywords ...

 

 

Share this post


Link to post
Share on other sites

@mikel Nice this is awesome! Thats really funny, im going to save it and try to recreate this later. Thanks allot :)

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

  • Recently Browsing   0 members

    No registered users viewing this page.