Search the Community

Hello everyone, I’m looking to create a product grid similar to the one on this site: https://landonorris.com/ I’ve tried many approaches, but they haven’t worked very well. I’ve implemented several workarounds that are far from ideal. Could you please share how you would approach this? Thank you for your help!

I tried to make a RAW version of toggle animation. This includes only methods and library files fetched from GSAP. Anyone can copy this code and apply in their RAW projects. Note: This will only work in raw HTML, CSS and JavaScript. No framework included.

I’m trying to accurately reproduce a reveal animation I saw in a reference video, and I’m confused about the correct technical approach. This is not a hover animation — it’s a page-load reveal from nothing. Visually, the element appears as a very thin vertical slice and then expands smoothly to full width. What I’m trying to understand is what is actually being animated, because it doesn’t look like a normal scale animation. If any one know please help . Quality Video : https://firebasestorage.googleapis.com/v0/b/chat-app-chatify.appspot.com/o/Screen Recording 2026-01-26 at 8.45.52 AM.mov?alt=media&token=5aefb1fd-40d9-4146-81dd-a7c0f60efc86 output.mp4

I have a sentence with three words, for example: Modern Watch Style I am applying one continuous gradient across the entire sentence using: background: linear-gradient(to right, #00ff1e 0%, #cf1512 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; So visually, the gradient flows smoothly from the first word to the last. Now I need to split the sentence into individual words (using GSAP SplitText or similar) so that I can animate each word separately (stagger, transform, etc.). But its not working correctly . If we are not using the gradient css code then the animation working fine . if anyone knows , Please help .

Hi Everyone, Urgent! I want to create banner just like it did on https://www.chooseplasticfreewipes.com/ Wave like banner that shows waves infinite when cursor enters it behaves with the cursor direction. Can anyone help me to create and if you have any demo like this using GSAP you can share with me. It would be great for me, Thanks in advance! Hamza Azeem

I’m trying to animate buttons like the ones shown in the video I shared. If anyone knows how to do this, please help. screen-recording-2026-01-22-at-103657-pm_r4rSsM6O.mp4

Hello fellow GSAP users, I am a Swedish frontend developer, currently featured in the GSAP Showcase with my Folio, https://www.thomasthorrstensson.com I know GSAP inside out, but also use libraries such as Curtains.js, Pixi.js, Three.js, and Lenis. I have over 15 years with JavaScript, and quite a few with TypeScript. Can build sites and landings front to back in Vue, Nuxt and Svelte. Interaction, motion coding, is my speciality. Here are some recent labs: https://nasa-apods.vercel.app/ https://mp3visualizer.thomasthorstensson.com/ https://atictactoe.vercel.app/ https://palestine-awareness.thomasthorstensson.com/ Open to collaborations and available, so feel free to get back to me here at any time to setup an e-meet. Many Thanks, 🧦 Thomas

Hi, I want to add animations like the Monogrid website (https://monogrid.com/) to a WordPress site. How can I do this in WordPress? Should I use GSAP, any plugin, or custom code? Please guide. Thank you.

I’m trying to recreate the scroll-driven cards animation used on https://www.garcy.studio/ Target behaviour (reference attached via screenshot): Cards start offscreen (bottom / slight right). On scroll, the whole cards wrapper moves diagonally (up + left). Once the first card fully enters the viewport, the wrapper pins. While pinned, cards translate horizontally in a smooth, continuous way. No jumps, no resets, and no sudden position corrections after pinning. I’ve attached screenshots of the reference animation and shared a minimal CodePen demo showing the issue. Please help me here.

Hi everyone I’m trying to recreate the title animation no image only title from this website . I’ve already tried using GSAP + SplitText and made some progress, but I’m still not getting the exact wheel-style animation. https://www.accordion.net.au/about-us If anyone can help me refine the animation or point out what I should change in GSAP/SplitText to match the Accordion website effect more closely, I’d really appreciate it!

Hi everyone! I need some help. I want to recreate the words-carousel section like on the site: https://c2montreal.com/ It's a section with three titles Learn, Experience, Connect. Section is full screen and on scroll have SplitText in some like roller/carousel effect. Here is my CodPen (scroll): https://codepen.io/NGrdanjski/pen/XJXwyOq Thank you very much everyone.

Hey, I'm trying to apply a zoom masking effect where, as I scroll down, the text scales up. But when I scroll back up quickly, the masking doesn't align properly with the scroll speed.

Hi, I used to be a proficient GSAP user until 2016, as a Creative Technologist in the Creative industry, Agencies, etc. Since 2015, I've been mainly working as a full-stack developer, interface or Frontend develop; and my focus and priorities have changed completely. Much has changed since, from Popmotion to Motion, GSAP becoming free? Etc. Although I worked with GSAP and similar libraries occasionally; I'm planning to pick GSAP again, as I'd like to focus more on design + engineering for some time. GSAP seem to have a good starting point at https://gsap.com/ui, which I'll use as a reference. If any of you have any good practices and conventions when working with React + Components + Vanilla CSS or Tailwindcss, is appreciated. Thank you!

Hi GSAP team, I’m running into an issue with ScrollTrigger pinning. I have a section with a .menu__image__wrapper that I want to pin while scrolling. On first page load, the pin doesn’t work (the image disappears). If I switch categories in my app (which destroys and re-inits the triggers), the pin suddenly works correctly. I also noticed earlier that I had a y transform (GSAP.set(..., { y: ... })) on the pinned element itself. Removing that transform fixed some glitching, but I still sometimes see the pin fail on first load. Video Of Issue:https://www.loom.com/share/f02251051e0d40a5b0595020b76bd8b7?sid=2a13507c-e9aa-4d87-9644-47d2f085eb01 Here’s a simplified version of my setup: Here is the animation class code for the menuPIN only: import GSAP from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; GSAP.registerPlugin(ScrollTrigger); export default class MenuPin { constructor() { this.mm = null; // matchMedia instance this.triggers = []; // ScrollTrigger instances this.clickHandlers = []; // mobile click handlers this.currentSection = null; } setupSection(section) { if (!section) return; const runSetup = () => { // destroy previous triggers/spacers this.destroy(); this.currentSection = section; this.mm = GSAP.matchMedia(); const initDesktop = () => { this.setupDesktop(section); }; // Desktop this.mm.add("(min-width:1024px)", () => { const firstImg = section.querySelector(".menu__image"); if (firstImg && !firstImg.complete) { firstImg.addEventListener("load", initDesktop, { once: true }); setTimeout(initDesktop, 300); } else { initDesktop(); } return () => { }; }); // Mobile this.mm.add("(max-width:1023px)", () => { requestAnimationFrame(() => this.setupMobile(section)); return () => { }; }); }; // Run immediately if DOM is ready, otherwise wait for DOMContentLoaded if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", runSetup); } else { runSetup(); } } setupDesktop(section) { const imageWrapper = section.querySelector(".menu__image__wrapper"); if (!imageWrapper) return; const images = Array.from(section.querySelectorAll(".menu__image")); const imageHeight = section.querySelector(".menu__image").getBoundingClientRect().height const items = Array.from(section.querySelectorAll(".menu__item")); const itemHeight = section.querySelector(".menu__item").getBoundingClientRect().height if (!items.length) return; // spacer at the end let spacer = section.querySelector(".menu__spacer"); if (!spacer) { spacer = document.createElement("div"); spacer.classList.add("menu__spacer"); section.appendChild(spacer); } spacer.style.height = `${imageHeight - itemHeight - 41}px`; const pinDuration = section.scrollHeight; // Pin image wrapper const pinTrigger = ScrollTrigger.create({ trigger: section, start: "top top", end: () => `+=${pinDuration}`, pin: imageWrapper, pinSpacing: false, markers: false, }); this.triggers.push(pinTrigger); // Set first image visible right away // GSAP.set(images[0], { autoAlpha: 1 }); // Then set up triggers items.forEach((item, i) => { const t = ScrollTrigger.create({ trigger: item, start: `top-=25 top`, end: `bottom-=25 top`, // onEnter: () => this.showImage(images, i), // onEnterBack: () => this.showImage(images, i), markers: true, }); this.triggers.push(t); }); } setupMobile(section) { const images = Array.from(section.querySelectorAll(".menu__image")); const items = Array.from(section.querySelectorAll(".menu__item")); // remove previous handlers items.forEach(item => { if (item._menuPinHandler) { item.removeEventListener("click", item._menuPinHandler); delete item._menuPinHandler; } }); // add click handlers items.forEach((item, i) => { const handler = () => this.showImage(images, i); item.addEventListener("click", handler); item._menuPinHandler = handler; this.clickHandlers.push({ el: item, handler }); }); // show first image // this.showImage(images, 0); } showImage(images, index) { images.forEach((img, i) => { GSAP.set(img, { autoAlpha: i === index ? 1 : 0, border: i === index ? "3px solid red" : "none" }); }); GSAP.to(images[index], { autoAlpha: 1, duration: 0.25, ease: "expo.out" }); } destroy() { // kill triggers this.triggers.forEach(t => t && t.kill()); this.triggers = []; // remove click handlers this.clickHandlers.forEach(({ el, handler }) => { el.removeEventListener("click", handler); if (el._menuPinHandler) delete el._menuPinHandler; }); this.clickHandlers = []; // remove spacer if (this.currentSection) { const sp = this.currentSection.querySelector(".menu__spacer"); if (sp) sp.remove(); } this.currentSection = null; } } import Page from '@classes/Page'; import MenuPin from '@animations/MenuPin'; import MobileCategorySwipe from '@animations/MobileCategorySwipe'; import GSAP from 'gsap'; import { ScrollTrigger } from "gsap/ScrollTrigger"; GSAP.registerPlugin(ScrollTrigger); export default class Menu extends Page { constructor() { super({ element: '.menu', elements: { wrapper: '.menu__wrapper', section: '.menu__section', button: '.menu__category__label', }, }); } create() { super.create(); this.menuPin = new MenuPin(); const categoryEl = document.querySelector(".menu__category"); if (categoryEl) { new MobileCategorySwipe({ element: categoryEl }); } const firstSection = document.querySelector(".menu__section.--active"); if (firstSection) { this.menuPin.setupSection(firstSection); } // bind buttons this.elements.button.forEach(btn => { btn.addEventListener("click", () => { const category = btn.dataset.category; this.showCategory(category); }); }); } showCategory(category) { // Hide all sections first this.elements.section.forEach(section => { const isActive = section.dataset.category === category; if (isActive) { section.classList.add('--active'); console.log(section); // Make section visible so ScrollTrigger can measure GSAP.set(section, { autoAlpha: 1 }); // Destroy old triggers before setting up the new one if (this.menuPin) this.menuPin.destroy(); // Setup the pin/animations for the new section this.menuPin.setupSection(section); // Refresh ScrollTrigger after layout changes requestAnimationFrame(() => ScrollTrigger.refresh()); } else { section.classList.remove('--active'); GSAP.set(section, { autoAlpha: 0 }); } }); // Update buttons this.elements.button.forEach(btn => { const isActive = btn.dataset.category === category; btn.classList.toggle('--active', isActive); GSAP.to(btn, { color: isActive ? "#000" : "#CBC4B1", duration: 0.5, ease: "expo.out" }); }); } }

Hey guys, I finished my portfolio website, and going through it, I notice one error. As you can see, there is a strange movement on the left card. On the first visit to the website, everything is normal, but once you click the FAQ item, it moves to the left and shrinks, and if you continuously click the FAQ item, it flickers. I am 100% sure this is GSAP code. I use Smooth Scroller, and I pin the left card. When I remove the GSAP code and go with sticky on the left card, everything works normally. What could be the problem? Here is the read-only link https://preview.webflow.com/preview/veljko-portfolio-bb1f89?utm_medium=preview_link&utm_source=designer&utm_content=veljko-portfolio-bb1f89&preview=2e29e1d3721c84bd8fed760aba33f39c&workflow=preview and website https://veljkov.me/

Hello I have a fixed container in a fixed-width screen website. From this container, I want to add multiple images, each representing a project, along with text information about the project. The animation I want to achieve is that when you scroll the page, the images and the corresponding project information will be displayed one by one. The faster you scroll, the faster the images and text will change or switch. All of this animation should be in a loop, and each image and text should be connected to the CMS webflow. Some reference here: https://brunoarizio.com/ http://iamrossmason.com/ http://lagutalaguta.com/

Hello there, I’m encountering an issue with the GSAP animation I’ve implemented, which you can review in the CodePen link. Overall, the animation works fine, but there is one problem: The logo follows us as we scroll downward (it's sticky) and shrinks to a certain point. During the shrinking (or enlarging when scrolling back up), the motion isn’t smooth. It produces small “jumps,” making the scaling appear uneven instead of fluid. This issue becomes even more noticeable when reducing the viewport width. Essentially, it looks as if the logo’s width decreases in steps (e.g., 200px → 198px → 196px → 194px, etc.) rather than in smaller increments that would make the scaling truly smooth. I’d greatly appreciate any suggestions on how to resolve this so that the resizing feels smooth and continuous. Additionally, any recommendations for improving or optimizing the JavaScript code used here would also be very welcome, so we can achieve the best possible overall result. Thanks

I'm requested to create something like this but I find really complex to create it, the easy way is to just listen to mouse hover event over a element but as u can see and test in the website : https://epica.ru/ the hover effect is way complex then regular add addEventListener("mouseover" do u have any idea from to start ?

Hello everyone, I'm running into some issues with ScrollTrigger and could use some guidance. I'm trying to create multiple scroll animations where images slide in from the side. I managed to get this working by pinning the container itself (https://codepen.io/zumpel96/pen/OPyBboy). However, this isn't the behavior I want, because I'd like all other content to remain pinned or "frozen". As you can see in my working pen, the other content continues to scroll. I've also tried using a single common pinned container, but that approach doesn't work either: https://codepen.io/zumpel96/pen/empPJzY Wrapping only the "visible" part in a container isn't an option either. In my pen, there's content between the animated scroll containers that's visible for both. This means that content would need to belong to both the first and second scroll containers, which isn't possible. Any advice or suggestions on how to achieve this effect would be greatly appreciated. Thank you so much!

Implementing a circular time picker where a line rotates toward the pointer on click with a short tween, and should immediately hand off to drag if the pointer moves. However, when clicking and then quickly dragging, the rotation glitches or remains bound to the tween briefly rather than following the drag instantly. onDragStart appears to fire on simple clicks (tiny pointer movement).

I’m building a loader based on the Hermann grid: a field of ghost nodes (intersections). Choreography: nodes are always visible; for each phase the nodes that form L then A are emphasized and edges are drawn between successive nodes. Next phase repeats at a different orientation/position (90° rotations + offsets). Questions Is my approach to connect nodes with DOM edges sound, or should I switch to SVG paths for precision/perf? Any cleaner pattern to define letter sequences? I’m using small helpers (row/col/diagDR/diagDL, offset, rotate90) and explicit arrays for L/A. Best practice to clear edges between phases without flashing? (I’m fading & removing.) For the intro ripple, is using from:[(N-1)/2,(N-1)/2] the right way to stagger from the true center on even grids?

Hi community, Im' a beginner with GSAP and ScrollTrigger and I'm running into an issue. My goal is for the user to scroll horizontally through 6 sections, and after the 6th section, the scrolling should switch back to vertical to display the final section (simply as that, ahah). Right now, instead of that, a large (undesired) section appears after the 6th sectoin (maybe a problem with the "pin"?). I've tried many things to debug it, but I just can't figure it out. Code here : https://codepen.io/Nathan-Loheac/pen/gbaPeXW Thank you so much for any help or advices

Hi Everyone, Long time GSAP dabbler, but first time posting in the forum. Looking for some help and advice. I'm trying to create a scroll triggered and pinned section of a site that scrolls through content within a 'frame' inside the section. This is on desktop only. on mobile the animations are killed. What I'm struggling with managing is the height of the container and how long it is pinned for before the content below naturally appears and the scroll continues as normal. I have created an example of what I'm trying to achieve here. https://codepen.io/nickylew/pen/RNWWMop I feel as thought I may be over complicating things, trying to set the height of the section dynamically based on the number of 'boxes' there are to scroll through. These 'boxes' will be dynamic, pulled from a CMS, so there could be 5 of them, could be 10+. Which is why I was trying to get the height and uses that to dynamically set things up. Any help greatly appreciated! As I'm getting a little spun round in circles. Additionally, improving performance would be amazing to know as well. As this is janky! But, that might be because it is trying to work out heights.

Hi, Im new here! I just started to use GSAP in order to animate things in my website, but the thing is that I'm not sure what's the best way to make a complex button like for example this one, I know I have to use useGSAP, useRef and Timeline in order to make complex animations, But I'm not sure how to trigger mouseenter or mouseleave and how would look a button component with the best use guides for performance.