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

I somehow just saw this thread :)

 

I think, for me, all the stuff about the position parameter, chaining methods, etc. was all fairly easy to grasp and conveyed clearly by the docs.

 

The thing that took me a while and still sometimes catches me off-guard is that fundamentally GSAP isn't necessarily focused on animation at all, like I've seen in another thread it's more of a data manipulation platform than purely an animation tool.

When I first learnt about GSAP I was looking for an animation tool to replace CSS or Velocity, which isn't surprising because that's how it's advertised. But that approach severely limits what you can do, and even sometimes makes you do all kinds of inefficient or even just plain wrong things.

 

For instance, I used to believe you should set up all your animations right after page load, and then just play/pause them whenever. That they were basically independent, static objects. This led me to think that GSAP was nice but just not what I needed for basically anything that needed user input, or was dynamic in even the smallest ways. I used to think I couldn't use GSAP to move something outside of the viewport because maybe the window had been resized since and so the animation would be incorrect!

 

Now I know that you can (and should) just make tweens and timelines on the fly whenever, use invalidate() if you have to, build tweens dynamically with functions that you call from inside timelines, etc.

The debounce/throttle thing I made is a good example of how versatile GSAP is, it really doesn't need to be just about pre-made immuable animation.

Heck, now I use just TweenLite to toggle css classes, just because I'm used to the format.

 

(On a related note, it would be so nice to have a way to make a tween or timeline self-invalidate every time it's played! maybe there is already and I'm not aware...)

  • Like 1

Share this post


Link to post
Share on other sites

Good insight, @Acccent. I hadn't realized that perhaps we haven't done a good enough job of helping people understand just how flexible GSAP is (and that it's not just a CSS/Velocity replacement, using the same old mindset of "declare everything on page load...only"). I'm so used to thinking in the more "dynamic" way that I just assumed it'd be obvious to everyone. I'll watch for ways we can improve on our communication in this regard. If you've got specific suggestions, I'm all ears. 

 

Quote

it would be so nice to have a way to make a tween or timeline self-invalidate every time it's played! 

 

Do you mean every time it repeats? Or literally whenever yourTween.play() or yourTween.restart() is called? Once I understand your goal, I'll offer my thoughts, but I'm a little fuzzy on what you're looking for and why you think it'd be good to have it automated. 

Share this post


Link to post
Share on other sites

No worries! I don't have anything super specific in mind... It's a whole lot of things to be honest, I'm afraid if you wanted to seriously address this and make sure perception of the platform improved in this regard, you'd have to consider a big reworking of the communication. As it is now, the major selling points seem to be that it's easy to create complex animations, thanks to the features and the ability to create timelines that you can then manipulate easily. But in my own experience (and I don't claim it to be any more than that), complex animations (like a logo animation or a character doing a little dance or whatever) is a tiny percentage of what I'm using GSAP for; I'm more interested in moving around parts of the web page, adapting to user inputs on the fly, creating interactive content etc.

 

I guess on a more easy-to-implement level you could make sure to present TweenLite as not only the fundamental atom of animations, but also the default way to leverage GSAP's power for any kind of operation. The front page doesn't have a lot of things to really convey what GSAP can do; there's the video that goes too fast to really understand anything beyond "this is a powerhouse", then a list of plugins that don't really mean anything to you the first time you see them. If you go to https://greensock.com/gsap you'll see an animated banner (which furthers the impression that you will only use GSAP for static, self-contained animations) and then paragraphs saying that it's fast, robust and compatible – that are convincing, but don't work to expand your understanding of what the platform can do.

 

I'd say the best thing would be to try to get the user to see clear, impressive examples as soon as possible. If you go on https://threejs.org/ or http://animejs.com/, there's almost no words, they let the examples speak for themselves; it makes for pages that are maybe a bit too intimidating or obscure, but are very good at giving you a sense of what these tools are for and what they can do. Having a simpler, more friendly homepage for GSAP that immediately shows embedded examples (not just gifs or videos) of a big variety of uses, from the most basic tweens to more unconventional uses like delayedCall() and SVG manipulation and ScrollTo plugin, etc., would go a long way towards saying "look, you can basically create a movie with this, but also you can use it in tons of creative and web-specific ways".

 

7 hours ago, GreenSock said:

Do you mean every time it repeats? Or literally whenever yourTween.play() or yourTween.restart() is called? Once I understand your goal, I'll offer my thoughts, but I'm a little fuzzy on what you're looking for and why you think it'd be good to have it automated. 

 

I don't know for sure – I'm thinking the latter. Every time you explicitly perform an action on a tween or it restarts, it would recalculate. The use case is, say I want an animation of a frog jumping every X seconds towards the cursor; right now I'd probably have to call a function that creates a timeline with passed arguments. But I think it'd be nice to be able to create the timeline beforehand, and have a parameters to let it know that the direction of the jump should be reevaluated every time it runs.

(To be clear, I know this is doable now – what isn't with GSAP? ;) – but I think it would be more intuitive and faster to have a parameter of its own inside the TweenLite and TimelineLite vars.)

  • Like 1

Share this post


Link to post
Share on other sites

Thanks again for the suggestions around clearer communication of GSAP's value/capabilities.

 

On 2/17/2018 at 9:47 AM, Acccent said:

I don't know for sure – I'm thinking the latter. Every time you explicitly perform an action on a tween or it restarts, it would recalculate. The use case is, say I want an animation of a frog jumping every X seconds towards the cursor; right now I'd probably have to call a function that creates a timeline with passed arguments. But I think it'd be nice to be able to create the timeline beforehand, and have a parameters to let it know that the direction of the jump should be reevaluated every time it runs.

 

I can see how it'd save a little effort in that particular use case, but we've always gotta weigh the potential benefits with the costs in terms of performance, file size, and API expansion. Doing something like this means adding a new special property that may have to get checked inside every method that restarts (play(), restart(), resume(), paused(), etc.) but also give folks a way to disable it after the fact (like "I know I set invalidateOnPlay:true, but when the user hits this particular scenario I don't want that to happen, so how do I override that?" kinda thing). Since it's pretty simple to just tuck an invalidate() call wherever you want it (yourTween.invalidate().restart()), I'm struggling to see the potential benefits outweighing the costs. See what I mean? 

 

Here's an example: 

 

Does that help at all? 

  • Like 2

Share this post


Link to post
Share on other sites

Of course, I totally see what you mean.

 

I guess this is all linked in a sense; the fact that I came to GSAP expecting a more static animation platform and still sometimes forget to step out of that way of thinking, that I come from games where if you say "move this object towards the cursor" it reevaluates that by default on every frame, etc.

 

Regardless even though I sometimes wish for a way to create tweens that don't 'cache' values, I also completely understand what you're saying, and like I said I knew all of this is possible to do, even if it means taking a few detours :) All the more reason to really strive to make it clear to newcomers, from the get-go, that it can all be super dynamic and there's no need to be trapped into a mindset of needing to declare everything at the start and then not touch it anymore! "Tween.to(el, 1, {x:"+=10"})" doesn't mean "create a tween that moves el by 10 pixels" but just "move el by 10 pixels" and you should be able to do that as often as you need without feeling bad about the fact that you're creating one-time tweens or somehow polluting the browser's memory, haha.

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.