Search the Community

what's this easiest way to create a infinite marquee using GSAP like this Screencast From 2026-06-14 15-51-41.webm

Hi everyone, I'm trying to recreate the scrolling effect shown in the attached GIF. The layout appears to be a grid/masonry-style gallery where: Images are arranged in multiple vertical columns. As the user scrolls, different columns seem to move at different speeds (parallax-like effect). The scrolling feels very smooth and cinematic. The grid remains aligned while creating depth and motion. It doesn't look like a traditional masonry layout that simply scrolls normally. I'm trying to understand: What is this effect generally called? Is it implemented using CSS transforms, GSAP, Lenis, Framer Motion, Locomotive Scroll, or something else? Are the columns individually translated based on scroll position? Is there a common pattern for implementing this efficiently without hurting performance? Does anyone have a complete example (React, Next.js, or even vanilla JS) that creates a similar effect? Any explanations, code samples, GitHub repositories, CodePens, or tutorials would be greatly appreciated. Thanks!

Hello everyone, I’m currently looking for a senior front-end / Vue developer to help finalize and maintain the infrastructure of an existing cinematic transmedia project website currently in development. The website is already built and functional. I’m specifically looking for someone comfortable stepping into an existing architecture and continuing development from the current base. Current stack: • Vue 3 • Firebase (Hosting, Auth, Firestore, Cloud Functions) • OVH (domain + SMTP) • GSAP animations The website functions as a private cinematic presentation environment for selected collaborators, industry partners, and investors, and is part of a larger interconnected narrative and systems architecture. What I’m looking for: • Strong front-end + implementation skills • High attention to detail • Ability to execute existing creative direction precisely • Comfort working with cinematic/editorial aesthetics • Organized communication and autonomy • Comfort navigating an English-based project environment and content structure • Comfort signing an NDA • Experience with premium artistic or storytelling-driven projects is highly valued This is initially a freelance collaboration focused on finalizing and stabilizing the current website structure, with possibility for future ongoing collaboration depending on project evolution and alignment. Remote collaboration is completely fine. International applicants are welcome. If interested, feel free to reach out with: • portfolio / previous work • relevant experience • stack familiarity • availability Contact: [email protected]

I built a cinematic scroll-controlled experience using GSAP, ScrollTrigger and Lenis. The demo uses a pinned scrubbed timeline with a central Motion Orb, a 5-stage scroll progression, component convergence, and a final interface blueprint reveal. The goal was to make scroll feel like it controls a cinematic transformation, rather than simply triggering separate animations. I’d love feedback on: - ScrollTrigger pacing - scrub timing - pinned section duration - performance - the final convergence reveal Project page: https://jkimdd.gumroad.com/l/premium-scrollytelling

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 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 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’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 with two decades experience within Frontend, from gaming, learning, to UI/UX development. View my portfolio @ https://www.thomasthorstensson.com View my green web project @ https://co2audit.app 🛠️What I offer: High-end Micro-interactions: Smooth, performance-focused animations. WebGL Expertise: Interactive 3D experiences using Three.js, PixiJS, and CurtainsJS. Full-stack Delivery: Modern frontends (Vue/React) integrated with CMS and deployment. ⭐ I know the entire GSAP suite—not just ScrollTrigger, but Draggable, Flip, SplitText, and so on. 🧪 Recent Labs --- Motion.dev (Framer Motion) https://atictactoe.vercel.app/ WebGL / Three.js / Web Audio API https://mpthree-beta.vercel.app/ MapboxGL / Dynamic Data https://palestine-awareness.thomasthorstensson.com/ WebGL / Curtains.js / NASA API https://github.com/thorstensson/nasa-apod I’m currently open to new collaborations and projects. Feel free to reach out anytime to discuss how we can bring your ideas to life! Take care, 🧦 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, I added lightGallery framework to my gsap project, it works fine, but there is a scroll problem. When I turn off the lightbox, it shifts up and down. How can I prevent this? Can you help me? I guess scroll is not locking

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