GSAP has been the OG go-to tool for awwwards masters and next level web animations. The concepts of timelines, tweens, and scroll triggers are simple to understand but require meeting both visual imagination and coding expertise to make it happen.
Some really cool resources by creative developer-designers has opened the door of the GSAP wizards. It’s never been easier to go from G-Crappy to G-Savvy. Below is a list of these libraries and collections and why you might try them out.
Osmo
osmo.supply is a growing “vault” of over 150 GSAP powered animations focused on navigations, menus, galleries, text and UI effects. They have a dope button collection and provide Webflow code copy. Check out the Barba.js page transitions course to setup your code with super smooth page animations that address many of the edge cases you will encounter with a modern complex project setup.
This is the best all around resource for taking your designs to the next level and the variety of useful components.
Made With GSAP
Made With GSAP has over 100 modern clean motion effects. If you need some really great creative text and image effects, this is a great resource. Each effect has a tutorial walk through which explains the code and how it works. It’s a great way to learn how GSAP can build these motion animations.
Codegrid
One of the longest running youtube channels and OG’s of reverse-engineering top awwward winning motion effects. Codegrid has an extensive youtube library for anything and everything with GSAP.
Becoming a member get’s you a monthly full website template along with working code repos for all the demos on the youtube page.
This is a great beginner resource to get started.
Annnimate
Annnimate provides a component based library for motion effects for commercial projects. I haven’t used the service but there pitch is great: component ready code that allows a developer to quickly integrate into a production project. This saves you days of time reverse engineering and making it plug-and-play with your codebase.
They have a great blog with tons of great articles on the practical uses for SplitText, ScrollTrigger and there learning page is a go-to get G-Savvy.
VWLab.io
vwlab.io was the first course I took and it introduced me to all the basics of GSAP. It’s a solid overview of the API and how it relates to writing code for modern web apps. There are several courses offered, I’ve only taken the basic web animations course. I would recommend this for a beginner.
Take-aways
| site | cost | use case |
|---|---|---|
| osmo.supply | $28.60/month | page transitions, menus, navigations, buttons, and all the other parts to putting together a full gsap-ified website, also has a discord |
| madewithgsap | $28.60/month | dope motion effects and how to tutorials for each, lots of scroll, gallery and text effects, also has discord |
| codegrid | $5/month | reverse engineer awwwards website with how to tutorials and code for use in projects, you can watch the youtube video and copy the code to learn for free, also has a discord |
| annnimate | $33.18/month | production ready components for real world projects |
| vwlab.io | $82 course | beginner and advanced courses focused on learning and building with gsap |