Jump to content
GreenSock

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

Curated Collection of GSAP Examples for Inspiration, with Code?

Recommended Posts

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!

  • Like 1
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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!

  • Like 4
Link to comment
Share on other sites

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.

:)

 

  • Like 7
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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.
 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

This community is great, thanks all.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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. 
 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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.

:)

 

  • Like 3
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
  • Thanks 1
Link to comment
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.
×