Curated Collection of GSAP Examples for Inspiration, with Code?

[GreenSock]

1 minute ago, iDad5 said:

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. 

Exactly the opposite of what we want

 

The community overall benefits far more when it's not just a couple of people answering every single question - we want a rich diversity of minds coming at things from different angles, even if that means some of the answers are a little rough around the edges or need tweaking. That's okay! 

 

We celebrate when other people wade into the waters and risk answering a question or two (or more) - we recognize how much of a risk that feels like initially. But keep doing it and you'll find a new level of confidence after a while. We're cheering you on. I hope others jump in too. ? 

[smallio]

On 5/19/2022 at 11:43 PM, 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.

 

 

great list dude

[mrshadowstreet]

hey mate!
try this playlist

https://www.youtube.com/watch?v=FqWonfHJV9o&list=PLMx8Q-fDx3-HylBQfitDcoOMQTFbEjTae

was very helphul for me

you can find the code below video

[SpaceMoney-01011000]

I would like to add an example I made. 

It's not the most original idea, but I'm actually elated I made this, and kind of proud of the results.

See the Pen VwxWwRj by scottonanski (@scottonanski) on CodePen.

[Reela]

On 5/20/2022 at 12:44 AM, Cassie said:

Oh also maybe?

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

Can you advise and guide me how to develop this kind of website - https://www.goliath-entertainment.com/

and which plugins require to develop such kind of website.

Thanks.

[GSAP Helper]

@Reela We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[YEVGENIY S.]

On 20.05.2022 at 01:19, TimTh said:

Thanks a lot to everyone who shared their collection links — it’s really helpful! Right now, I’m mainly working with GSAP for web animations and just started building my portfolio in this direction. I’d love to get some feedback or ideas for improvement, and I’m open to suggestions for interesting animation concepts!

It’s a hobby for me at the moment, so I’m happy to contribute and share my code on GitHub or CodePen. If you have any challenges or requests, I’d be glad to try them out.  I’d be glad to keep working in this field and join an exciting project in the future.

CodePen: https://codepen.io/YEVGENIY_S

GitHub:  https://github.com/LingNorsk

 

 

[finniansturdy]

Maybe not exactly what the thread is asking for but there is CustomEasy.dev — CustomEase animation curves made easy

Here you'll be able to skip the coordinate chaos & browse this handpicked collection of custom curves with:

• Descriptions that make sense – understand the feel instantly
• Visual previews – see before you leap
• Real-world use cases – know exactly when to use each one
• Copy-paste code – works immediately

Browse. Copy. Paste. Animate. Happy easing ✌️

 

Oh and if you've got a CustomEase you use that think others would like, submit it to be added in.

 

👉 https://customeasy.dev/

 

 

 

 

 

[luigipdt]

Hello @TimTh (and everyone reading this topic)

 

I don't think I've seen mentioned here Codrops, they have lots of free tutorials and demos about thing built with GSAP.

You can check their website at https://tympanus.net/codrops/ or go straight to their GitHub (you'll find links to tuts and demos in each repo).

 

If you're also into paid resources, you can also check:

- https://madewithgsap.com/ (one-time)

- https://www.osmo.supply/ (subscription)

 

I think these 3 websites adhere to what you are looking for: you'll find a tutorial, a live demo and the relevant code in all 3 cases.

 

Disclaimer:

I am non sponsoring any of the listed sources; these are the ones, alongside with CodePen items ad official resources, that allowed me to get started with GSAP (matter of fact, I personally paid for access to the 2 paid websites).

Happy tweening!