Gsap 2.1.3

[Klacee Sawatzky]

Thegsap object serves as the access point for most of GSAP's functionality. It's just a generic object with various methods and properties that create and control Tweens and Timelines, two of the most important concepts to understand.

A Tween is what does all the animation work - think of it like a high-performance property setter. You feed in targets (the objects you want to animate), a duration, and any properties you want it to animate and then when the Tween's playhead moves to a new position, figures out what the property values should be at that point applies them accordingly.

Create as many Timelines as you want. You can even nest them which is fantastic for modularizing your animation code! Every animation (Tween and Timeline) gets placed onto a parent timeline (the globalTimeline by default). Moving a Timeline's playhead cascades down through its children so that the playheads stay aligned. A Timeline is purely about grouping things and coordinating time/playheads - it never actually sets properties on targets (Tweens handle that).

Do that as many times as you want. Notice we're calling .to() on the timeline instance (the variable tl in this case), not the gsap object. This creates a tween and immediately puts it into that particular Timeline. gsap.to(), on the other hand, creates a standalone tween. By default, the animations will be sequenced one-after-the-other. You can even use method chaining to simplify your code like this:

Hey!

We have curated codepen collections - is that kind of what you're after?

I'm interested in hearing more about what you're looking for and also where you searched - I'm aiming to do a bit more curation of our content in general. Feel free to get very specific - it's likely to be helpful information

To answer your follow-up question, I was just searching Google, CodePen, the GSAP site, etc. for terms like "GSAP examples with code" or "best GSAP animations", or more specifically for things like "gsap photo gallery examples", etc. If I were to describe the ideal collection it would be:

3) Tagged by feature type rather than GSAP element. So for example cool animations for cards, great hero animations, creative button animations, amazing photo gallery animations, etc. rather than ScrollTrigger animations and Observer animations etc. Sort of the way the Relume library or Flowbase have their components categorized.

And I'd be remiss if I didn't also say how completely frickin' awesome GSAP is and how much the community appreciates your contributions and those of others who put so much time into this forum. Thank you!

Ah! I see - I think the issue here is that GSAP doesn't make our own 'components' like webflow, tailwind reflume etc. And we don't have the right to share code from people's live commercial websites.

I'm planning on making an area to search for UI patterns in the learning center, but those will be more along the lines of minimal functional demos. Mainly to show how the GSAP side of things work. e.g. this draggable slider

See the Pen PojYwPp by GreenSock (@GreenSock) on CodePen

for 'get inspired by' (if you're looking for real world live websites) that would be awwwards or our showcase.

It's pretty hard to bridge that gap in between. I'll ponder on it! Thanks so much for the input.

While I'm here, and on the subject of potential ways to make this awesome community even better, I've been thinking for a while now that a less "official" forum for discussing and seeking advice/inspiration on particular projects or designs would make a nice complement to the main help forum: a place where there's no expectation of assistance from the GSAP team, but where the community itself could provide its own help and advice. It's where, for example, people who post requests for help on coding logic (i.e. outside the ambit of "issues relating to gsap functionality only") could be referred. (After dutifully heeding instructions by spending an hour and a half on a CodePen demo, receiving a referral to such a forum in reply would be much less painful than being told one's question is an issue of code logic, not GSAP, and is thus ineligible for assistance. I've since recovered , but I should confess that particular experience didn't represent this community well!)

While it's a lovely thought (a forum where a whole community is just waiting to help you solve logic issues and other general questions), I fear it isn't terribly realistic unless a lot of those people are eager to spend time helping others in their spare time.

Yeah, I completely understand your point, it's really hard to be left in the lurch.

I've been attempting to refer people to these discord channels - and my own SVG animation slack community when we can't answer their questions here.

In theory this is great - friendly unofficial communities where helpful experts can help with more vague questions.

In reality I've ended up answering the majority of these referred questions myself in the evenings or weekends. They usually get met with silence, or worse - with incorrect/confusing answers.

The web animation community is very small, so another space is often just another route to the same people. Be sure this is a problem area we're aware of and would love to solve. It's just a tricky one.

Also. To anyone reading this -

If you like the sound of a helpful, active community to lean on. One way to encourage this is to lead by example. See if you can give a go at answering some unanswered questions here in the forums. If you see someone battling with logic issues that we don't have capacity to solve - see if you can help. Join the other communities I've mentioned and offer a hand to people that are struggling.

Definitely a nice idea @Eunomiac, but I wouldn't want to see a bunch of unanswered logic questions. There are active community members answering questions around here, but by and large, most are answered by Admins/Mods so I'm not sure many people would jump on the 3rd party, logic type questions. Most of us on the GSAP team wouldn't really have time either. That's pretty much the main problem. We're all trying to get all the GSAP related questions answered so diving deep into other code is a bit of a stretch. Most of the Mods are volunteers and have full-time jobs too so it's a balancing act.

That's some of the best advice you can get. Helping others is how I learned GSAP and probably 50%+ of what I know about vanilla JS. You'd be amazed how much you'll learn just by answering some questions. You might make a few mistakes (I made many), but that's how we learn.

(After dutifully heeding instructions by spending an hour and a half on a CodePen demo, receiving a referral to such a forum in reply would be much less painful than being told one's question is an issue of code logic, not GSAP, and is thus ineligible for assistance. I've since recovered , but I should confess that particular experience didn't represent this community well!)

I definitely hear and understand everything that's been said on the difficulty of managing expectations of assistance, but I think this may have been lost in the shuffle (of course, me putting it in parentheses and presenting it as an afterthought may have had something to do with that ). Because there's certainly the potential for a great deal of frustration when, on one hand, the forum rules request that community members spend time creating a CodePen demo to illustrate their problem while, on the other hand, there's the very real "risk" that all that work will prove to have been in vain --- as @GreenSock put it:

To be clear, I'm not complaining about any particular treatment I've received --- the frustration I describe above happened only once to me, and my every other experience here has been wonderful --- but I wanted to shine a light on this specific issue in particular. Moreover, it may be difficult for you to get a good read on just how many people have been frustrated by similar experiences if most people react the same way I did: grumble and silently depart, bemoaning the time wasted. I wish I had a solution, and perhaps it isn't as much of a concern as I'm making it out to be, but definitely something to be aware of!

Don't worry, I read your post and took it all onboard. I definitely didn't miss that bit. I totally understand the frustration there.

It's just unfortunately impossible for us to know ahead of time where the issue lies without seeing a demo. We do state when people initially create a forum post that we can't help with logic issues, third party tools or recreating effects people have seen elsewhere on the web - so hopefully people assess at that point and don't go through the process of creating a forum post or demo for something we can't assist with.

Debugging code is a frustrating and time consuming process, but even if people don't get help from us - I don't really see the work of putting a demo together to be in vain. It may not have helped in your case, and that's frustrating. But often isolating the problem is a useful debugging step in and of itself.

I couldn't agree more. I've been doing this for many years and I think the single most powerful way to troubleshoot (which far too few people take advantage of) is to isolate, isolate, isolate. So that minimal demo exercise may feel like a waste of time when after doing it you get an answer here like "sorry, that's a logic issue...it's not something we have the bandwidth to help with" but I really think that the habit will pay dividends in the long run. Sorry it was frustrating for you, though.

3a8082e126