Curated Collection of GSAP Examples for Inspiration, with Code?

[TimTh]

Does anyone know of a good place to go for a collection of inspirational GSAP examples, sort of a Behance for GreenSock, but with links to code? I'm hoping for something more detailed than GreenSock Showcase and more curated than just searching CodePen. Apologies if there is an obvious answer, I couldn't find anything amazing after a bit of searching.  Thank you!

[Cassie]

Hey!

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

https://codepen.io/GreenSock/collections

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  

[Cassie]

Oh also maybe?

https://www.awwwards.com/websites/?award=sites_of_the_day&technology=gsap-animation

[TimTh]

Hey Cassie - Great suggestions, thank you! I will definitely dig into both. 

 

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:

 

1) Real life examples, from live commercial websites (i.e. not tutorials)

2) Linked to code so I can see how the magic was done - sort of how Webflow Showcase examples often link to cloneables.

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.

 

Clearly my goal is to get inspired by and build off of others' best work - respectfully of course. 

 

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!

[PointC]

Just to throw my two cents out there - some CodePen accounts to bookmark and/or follow.

 

Talented coders that feature a ton of GSAP:

Cassie Evans: https://codepen.io/cassie-codes
Blake Bowen: https://codepen.io/osublake
Carl Schooff: https://codepen.io/snorkltv

Pete Barr: https://codepen.io/petebarr

Steve Gardner: https://codepen.io/ste-vg

Ryan Mulligan: https://codepen.io/hexagoncircle

Tom Miller: https://codepen.io/creativeocean

Chris Gannon: https://codepen.io/chrisgannon

Darin Senneff: https://codepen.io/dsenneff

Craig Roblewsky: https://codepen.io/PointC/ (this guy is awesome ?)

 

It may not be exactly what you need, but there should some good inspiration in those accounts.

 

Happy tweening.

 

[TimTh]

Fantastic, can't wait to dive into these. Thank you PointC.

[Cassie]

10 hours ago, TimTh said:

Real life examples, from live commercial websites (i.e. not tutorials)

2) Linked to code so I can see how the magic was done - sort of how Webflow Showcase examples often link to cloneables.

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.

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

Whereas It sounds like you're looking more for polished, designed, production examples for inspiration. But also access to the code. That's a tricky middle ground because it's up to the developers (and clients) whether they open source the code and many are under NDA.

 

10 hours ago, TimTh said:

Clearly my goal is to get inspired by and build off of others' best work - respectfully of course. 

 

for 'building off' codepen is probably the best place to go for this,

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.
 

[TimTh]

Thanks Cassie. I agree it is a tricky middle ground, so probably unrealistic. Just wishing! Good luck with your curation work and thanks again.

[Eunomiac]

18 hours ago, PointC said:

Just to throw my two cents out there - some CodePen accounts to bookmark and/or follow.

 

Talented coders that feature a ton of GSAP:

Cassie Evans: https://codepen.io/cassie-codes
Blake Bowen: https://codepen.io/osublake
Carl Schooff: https://codepen.io/snorkltv

Pete Barr: https://codepen.io/petebarr

Steve Gardner: https://codepen.io/ste-vg

Ryan Mulligan: https://codepen.io/hexagoncircle

Tom Miller: https://codepen.io/creativeocean

Chris Gannon: https://codepen.io/chrisgannon

Darin Senneff: https://codepen.io/dsenneff

Craig Roblewsky: https://codepen.io/PointC/ (this guy is awesome ?)

 

It may not be exactly what you need, but there should some good inspiration in those accounts.

 

Happy tweening.

 

 

I feel this might be the most important thing I've found on the Internet all year. Thank you!

[Cassie]

noted - I'll make sure to add 'people to follow' to the learning center.

[GreenSock]

10 minutes ago, Eunomiac said:

I feel this might be the most important thing I've found on the Internet all year. Thank you!

Indeed. Especially that Craig Roblewsky guy. 

 

In case you missed it, he's got a site dedicated to teaching people cool motion tricks: https://motiontricks.com which is very much worth digging into. Lots of GSAP articles there.

[TimTh]

This community is great, thanks all.

[Eunomiac]

13 hours ago, Cassie said:

noted - I'll make sure to add 'people to follow' to the learning center.

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

[GreenSock]

9 hours ago, Eunomiac said:

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.

That's a very understandable and reasonable request. The tricky things are:

1. Usually people don't have a solid understanding of where that line is, nor do they like making decisions about which forum their question belongs in. They'll likely think "I'm using GSAP...so my question belongs in the GSAP forum...". We could, of course, MOVE posts that don't belong. Not a deal-breaker, but I'm just pointing out that I don't think it'll be a clean solution. 
2. In my experience, it's hard enough to get people to pitch in to answer GSAP-specific questions - the other ones about logic, 3rd party libraries, etc. are often much more complicated and I fear the forum you're suggesting would end up being a ghost town where lots of questions go to die Like...tons of unanswered questions which can ultimately reflect poorly on the brand. I don't know about you, but the vast majority of people in the forums want to take way more than they give. They've got busy lives, deadlines looming, etc. 

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. 

 

I do appreciate the suggestion, though, and I'm curious to hear what other people think. 

[Cassie]

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.

• Web animation at work discord community Animation focused, friendly, we have a channel in there!
• Front end horse discord community More focused on general web development, with a creative twist.
• Lunch dev discord community Lots of React experts here, but very friendly to beginners.

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. 
 

[Cassie]

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.

 

We always appreciate people mucking in and helping, even if they're just learning themselves and fancy just taking a stab at an answer.

[PointC]

I'd echo Jack and Cassie's thoughts from above.

 

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.

 

2 hours ago, Cassie said:

See if you can give a go at answering some unanswered questions here in the forums.

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.

 

All the best and happy tweening to everyone.

 

[Eunomiac]

On 5/21/2022 at 3:14 AM, Eunomiac said:

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

 

On 5/21/2022 at 1:11 PM, GreenSock said:

Usually people don't have a solid understanding of where that line [between ineligible logic questions vs. eligible GSAP help] is

 

... which only exacerbates the problem. 

 

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!

[Cassie]

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.

[GreenSock]

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.

 

12 hours ago, Cassie said:

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.

This is such powerful advice! @PointC is a great example of exactly that, as are many of the other moderators around here. ?

 

Thanks again for the input. 

[iotron]

This thread is a goldmine. Kindly pin it. Much love and kudos to the whole community and specially the core GSAP team. ❤️

[fluxus]

Just to chime in, this guy has some nice GSAP examples - https://codepen.io/cameronknight

 

Nothing too code heavy, yet quite nice effects!

[iDad5]

On 5/21/2022 at 7:11 PM, GreenSock said:

That's a very understandable and reasonable request. The tricky things are:

1. Usually people don't have a solid understanding of where that line is, nor do they like making decisions about which forum their question belongs in. They'll likely think "I'm using GSAP...so my question belongs in the GSAP forum...". We could, of course, MOVE posts that don't belong. Not a deal-breaker, but I'm just pointing out that I don't think it'll be a clean solution. 
2. In my experience, it's hard enough to get people to pitch in to answer GSAP-specific questions - the other ones about logic, 3rd party libraries, etc. are often much more complicated and I fear the forum you're suggesting would end up being a ghost town where lots of questions go to die Like...tons of unanswered questions which can ultimately reflect poorly on the brand. I don't know about you, but the vast majority of people in the forums want to take way more than they give. They've got busy lives, deadlines looming, etc. 

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. 

 

I do appreciate the suggestion, though, and I'm curious to hear what other people think. 

I do like trying to help others here, when time permits and mostly when I'm involved with gsap - which is only a percentage of my time. I'm not sure if it is only me, but I very often find it very hard to find questions to answer,  as the team of mods is so quick and active 24/7 that oftentimes it happens, that when I have looked at a problem and starting to answer it, I already was too late with my answer. 

I generally agree that there may not be too many like me, and I'm also somewhat frustrated with all those framework questions - hate most of them for good reasons. On the other hand the knowledge found here in those forums is so great, and the culture is too, so that I often whish, that there were forums for frontend questions not (directly) related to gsap - as StackOverflow with ist catastrophic culture is dominating the market and is less and less helpful by the hour. Those could be a place to see if the community still might work a bit like in the olden times - thinking for example of the AS-forums on Flash, those were a great place to exchange ideas and get help even with Adobe sucking and not providing anything but the platform. 
But I'm getting sentimental.

[Cassie]

Ah, I hate to hear this! We'd love for you to chip in more. ?

If you see a question you'd like to answer, why don't you go ahead and comment on it with a little placeholder - just 'Hi there, I'm taking a look at this question for you, standby!' or something similar. Then we'll know you're working on it and can give you the space and time to figure it out.

We always appreciate the help!

[iDad5]

Thank you, I will consider that. I feel a bit like a fraud right now though, as I haven't been around for quite some time and didn't want to make anyone feel bad, you are all doing a great job, and as much I like to contribute, and much I love GSAP since it's AS2 days, your knowledge is so much deeper and I would hate to take away the opportunity of getting the better answer.