We make the tools. You make the magic. 💚 Here's our favourite GSAP-powered animations and interactions from 2024, or as we're calling it - the year of the pixel transition. 👾 Honoured to serve such an inspiring community.

Built a quick editorial image-mask slider component with GSAP and NextJS. ​GitHub Repo: github.com/Saur0w/fol #gsap #web #webdev #nextjs

Built card-motion: animated playing cards for React, powered by @greensock Shuffle, deal, drag & drop, 3D tilt. Ships a ready table a headless engine to build your own card game. Demo heavily inspired by Balatro 🃏❤️ npm i card-motion

Today’s #SOTD goes to @GetBuzzworthy for "Bucks Sauce". awwwards.com/sites/bucks-sau… A small-batch BBQ sauce brand built around bold flavor, real ingredients, and a personality as sharp as its taste. Congratulations! 🏆 #ecommerce #GSAP #microinteractions

playing with liquid edges with @greensock and @threejs

also had a lot of fun experimenting with this infinite marquee where pictures fray into flying threads at the edges, with @greensock and @threejs

👀

💚 Site of the Day - Horizonte Smooth and creative scroll animations complement a great and beautiful design that really stands out. Great interatcions everywhere in the site completes the experience. credit: The First The Last Agency (thefirstthelast.agency) ⚙️ ScrollTrigger SplitText ScrollToPlugin CustomEase DrawSVGPlugin MorphSVGPlugin 🛠️ @vuejs @nuxt_js @LenisSmooth site → horizonte-village.com showcase → gsap.com/showcase

💚 Site of the Day - Cheese & Pixels Visitors are encouraged to explore every corner of the experience, with hidden easter eggs woven throughout the site to reward curiosity. Each discovery unlocks a notification and contributes to a running collection count, inviting visitors to uncover every playful interaction and hidden surprise. Can you collect them all? credit: Ben Graves: (linkedin.com/in/ben-graves-6…) Jamie Currie, Developer: (linkedin.com/in/jamie-currie…) Andrew Fiddy, Senior Designer : (linkedin.com/in/andrew-fiddy…) Marcell Rideg, 3D Artist: (linkedin.com/in/rideg3d) ⚙️ ScrollTrigger SplitText 🛠️ @threejs WebGL React site → cheeseandpixels.com showcase → gsap.com/showcase

🏆 Site of the Week - Noomo Showcase Instead of a standard showreel, we built an immersive showcase of our latest work for brands like Salesforce, AMD, and Coinbase. credit: IG @NoomoAgency ⚙️ ScrollTrigger ScrollSmoother SplitText 🛠️ @threejs WebGL @vuejs site → showcase.noomoagency.com showcase → gsap.com/showcase

💚 Site of the Day - SSTR Friction Reduction A dark, editorial site for SSTR, a company making friction-reduction tools for oil drilling. The whole animation layer runs on GSAP: a scripted preloader, ScrollTrigger scroll reveals, SplitText headline reveals, and seamless Barba page transitions with Lenis smooth scroll. Animation timing is tuned to how the real hardware moves. credit: Dmitry Golub (linkedin.com/in/dmitry-golub…) ⚙️ ScrollTrigger SplitText 🛠️ @astrodotbuild site → sstr.tech/en showcase → gsap.com/showcase

💚 Site of the Day - RISK Modern design plus creative motion, interaction and animation, completes a great experience where creative boundaries are pushed in order to deliver a unique experience. Produced by: FLOT NOIR (flotnoir.studio) Creative Direction & Design: Clément Merouani (linkedin.com/in/clementmerou…) Creative Dev: Thomas Carré (carre.studio) ⚙️ ScrollTrigger Observer 🛠️ @threejs WebGL @webflow site → risk.film showcase → gsap.com/showcase

Creating with GSAP is not always about a large or massive project, sometimes is just about having fun and making something fun, like this project by Tom Harrison(tombo.dev) : deathxscroll.com/

💚 Site of the Day - Program Studio The website is designed around a system of interactive widgets that allow users to shape their own experience. Core features include editable layouts, a shared drawing canvas, digital sticky notes, and a custom AI chatbot, creating a playful and collaborative environment for exploration and creativity. credit: Program Studio (program.studio) & SMLXL (smlxl.company) ⚙️ ScrollTrigger SplitText Draggable 🛠️ @threejs WebGL Matter.js 3D Gaussian Splatting (3DGS) Spark.js Weather API site → program.studio showcase → gsap.com/showcase

💚 Site of the Day - Robin THOMAS Présentation This site was created to challenge myself to see how far I could push a project solo, covering every aspect: design, 3D, code, and performance. It's also my way of introducing myself to the creative coding world. credit: Robin THOMAS (linkedin.com/in/robin-thomas…) ⚙️ SplitText 🛠️ Three.js WebGL React site → robin-thomas.me showcase → gsap.com/showcase

💚 Site of the Day - Voyeur Verite Welcome to Voyeur Verite—a digital space where we stop pretending and start presenting things as they truly are. When designing this website, our mission was simple: make it bold, make it clean, and make it impossible to look away. credit: @blackleadStudio ⚙️ ScrollTrigger ScrollSmoother MorphSVG SplitText 🛠️ @webflow site → voyeurverite.com showcase → gsap.com/showcase

🏆 Site of the Week - TRIONN TRIONN® is an independent AI-powered digital design and development studio helping ambitious brands create meaningful digital experiences through strategy, design, and technology. credit: Sunny Rathod (linkedin.com/in/sunnyrathod) & Trionn (linkedin.com/company/trionns…) ⚙️ ScrollTrigger ScrollSmoother DrawSVG MotionPath SplitText Draggable 🛠️ @threejs WebGL site → trionn.com showcase → gsap.com/showcase

💚 Site of the Day - Komma Komma A custom intro loader animated entirely with GSAP timelines, plus a bundle-independent failsafe so the page can never get stuck behind it. All easing runs through a shared CustomEase curve for a consistent feel across the whole site. A 3D orbiting "Featured Projects" carousel where the tiles rotate around a ring on a GSAP ticker while staying upright, with a cursor-driven perspective tilt and SplitText title reveals on selection. credit: Óliver Samúelsson (instagram.com/oliversamuelss) & Freyr Elí (instagram.com/freyrelii) ⚙️ ScrollTrigger Observer SplitText Draggable Inertia CustomEase 🛠️ @threejs WebGL @astrodotbuild site → kommakomma.is showcase → gsap.com/showcase

💚 Site of the Day - Son Daven Great and smooth scroll animations, also we loved all the details using WebGL for the videos with ASCII feeling, plus all the interactions and little details all over the site. Design & Development: Ivan Chopei (linkedin.com/in/ivan-chopei) Producer: Maks Stepenko (linkedin.com/in/maksstepenko) Agency: The First The Last (thefirstthelast.agency) ⚙️ ScrollTrigger Observer Flip SplitText 🛠️ WebGL @webflow site → sondaven.com/en showcase → gsap.com/showcase

The amazing this is really how many different motion styles and possibilities flow out of @crnacura's brain 💚

New effect added today, Effect 105: as you scroll, each title nudges to the right to reveal its image, then slides back to the left as it moves past! No WebGL, fully mobile-friendly and built with @greensock 💚 Made With Gsap 2 is out! Get access now. ↳ madewithgsap.com