Search the Community

I tried to create an on-scroll horizontal carousel by nesting it inside a GSAP timeline (tl), but it’s not working. I’ve been attempting this for a while without success. Please help me fix it. and after whole carousel get completed uncomment these codes in js : // .to(".black-screen", { visibility: 'visible' }) // .to(".ourProjects-wrapper", { bottom: '0%', duration: .5 }) These commented codes are incomming animtions.

Ho installato gsap sul mio sito wordpress con elementor. Solo da iphone, al caricamento della prima sessione mi disabilita tutti i link della pagina, con un refresh il problema si risolve. Da pc e android non ho nessun problema. I plugin che utilizzo sono ScrollTrigger e ScrollTo. Ho installato la verisone 3.12.5. Quale puo essere la risoluzione? -- TRANSLATION -- I installed gsap on my wordpress site with Elementor. Only from iPhone, when loading the first session it disables all the links on the page, with a refresh the problem is solved. From PC and Android I have no problem. The plugins I use are ScrollTrigger and ScrollTo. I installed version 3.12.5. What can be the resolution?

Hi, I am using a gsap animation. The problem is I want to hide the bottom left navigation when the inner side is opened. But there is not way, I can do it. I only want to show the navigation when the main slide is opened. Here is my website:https://www.judexaya.com/anomalies

I've found a reference site for scroll animation, but I'm unsure how to create this effect. You can check it out here: https://webisoft.com/advisory#:~:text=APPLICATION. In the services section, you'll notice that the animations change depending on whether you scroll up or down. Here is the CodePen example. I'm experiencing an issue with the scrolling effect. Can anyone help me with this?

Hi! When an accordion item is expanded or when text is displayed (the Read More button), the yellow section of the wrap moves down, but the triggers do not. That's why the animation does not work as expected. I understand that it is necessary to use ScrollTrigger.refresh(). But what is the most correct way to do this? It's just that so far I can only think of ideas where one is worse than the other... For example, tracking clicks on the accordion and on a button like "Read More". Maybe there is a special method for this in GSAP?

Hey GSAP Community, I'm currently working on a page transition using GSAP's flip plugin, and I'm encountering an issue where the element seems to "jump" from a lower position during the transition, which affects the UX. I'm using Barba.js for page transitions, and GSAP/Flip are used to animate the transition. The element in question is cloned and moved to a new container during the transition. I've attached a video that better explains my problem, and here's my JavaScript code that handles the transition. If you need more elements (HTML content, styles), don't hesitate to let me know! gsap.registerPlugin(ScrollTrigger, CustomEase, Flip); const $ = (el) => document.querySelector(el) let scroll; const BASIC_DURATION = 1.2; let transitionOffset = 1100; let staggerDefault = 0.07; CustomEase.create("primary-ease", "0.42, 0.1, 0.05, 0.89"); CustomEase.create("primary-ease-out", ".34, 1.56, 0.64, 1"); function leaveWorkSingle(container) { const tl = gsap.timeline({ default: { duration: BASIC_DURATION, ease: "primary-ease" } }) let transitionElements = document.querySelector('.transition-work-single'); let transitionElementsFooterImage = transitionElements.querySelector('.img-next'); let cloneTransitionElements = transitionElements.cloneNode(true); let transitionElementsNewContainer = document.querySelector('.transition-work-single-container'); let transitionElementsOldContainer = document.querySelector('.transition-work-single-old-container'); let transitionElementsState = Flip.getState(".transition-work-single"); transitionElementsNewContainer.classList.add('transitioning'); transitionElementsNewContainer.appendChild(transitionElements); transitionElementsOldContainer.appendChild(cloneTransitionElements); tl.set('main.main', { autoAlpha: 0 }) tl.add(Flip.from(transitionElementsState, { ease: "primary-ease", duration: 1.2, absolute: true, }), 0.5); tl.set(cloneTransitionElements, { autoAlpha: 0 }); } function enterWorkSingle(container) { // todo const tl = gsap.timeline({ default: { duration: BASIC_DURATION, ease: "primary-ease" } }) tl.set('main.main', { autoAlpha: 1, onComplete: () => { console.log('done') let r = $('.transition-work-single-container.transitioning .transition-work-single') console.log(r) r.remove() } }) } function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } function initLenis() { scroll = new Lenis({ duration: 1 }) scroll.on('scroll', ScrollTrigger.update) gsap.ticker.add((time) => { scroll.raf(time * 1000); }) gsap.ticker.lagSmoothing(0) } function initTransitions() { history.scrollRestoration = "manual"; barba.hooks.afterEnter(() => { window.scrollTo(0, 0); ScrollTrigger.refresh(); }); barba.init({ sync: true, debug: false, timeout: 7000, transitions: [ { name: 'from-to-work-single', from: { namespace: ['work-single'] }, to: { namespace: ['work-single'] }, async leave(data) { leaveWorkSingle(data.current.container); await delay(1700); }, async enter(data) { enterWorkSingle(data.next.container); }, async beforeEnter(data) { // ScrollTrigger.getAll().forEach(t => t.kill()); initSmoothScroll(data.next.container); // initScript(); }, } ] }); function initSmoothScroll(container) { initLenis(); ScrollTrigger.refresh(); } } initTransitions(); Thank you in advance for your help. w_ybkKeqbJ.mp4

Hello, First off, I just want to say how excited I am about GSAP going completely free for everyone—thanks to Webflow’s support. The community is buzzing, and I honestly can’t wait to see what’s coming next! I’m reaching out for some guidance and clarification as I prepare to dive into a new personal project that will heavily rely on GSAP animations, along with WordPress and Elementor Pro. 🔧 Project Setup – My Current Plan The project will involve a variety of animations and page-level interactions. Here's a brief outline of how I plan to manage everything: ----------- Layer Purpose Key Tools / Locations Local Dev Safe playground for building & testing. Local by Flywheel → (my local Browser URL) running Hello Elementor + Hello Child Theme. Source Code Modular animation code & global styles. hello-theme-child-master/src/… • js/animations/*/index.js • css/animations/*.css • js/app.js (aggregator) Bundling Turn scattered modules into a single, optimized payload. Webpack (installed via npm) + custom webpack.config.js; output enqueued by PHP. Version Control Single source of truth & change history. Git (repo lives in child‑theme folder) → push to GitHub main via VS Code’s Git Bash. Deployment Ship the latest build to production with one click. WP Pusher (monitors main branch). After each push, click Update in WP Pusher. Runtime (Browser) Execute GSAP timelines inside Elementor’s markup. GSAP CDN + your compiled app.js & animation CSS, loaded in the order you defined. ----------- ❓My Main Question Is this the right approach for a GSAP-heavy WordPress project using Elementor, or would it be more practical to simply use a Code Snippet Manager plugin and embed everything there? I’m aiming to be as structured and intentional as possible from the start, but if this direction is overcomplicating things, I’d rather adjust now than burn time later. Your insight would be invaluable and honestly a huge time-saver. I deeply appreciate your time, and apologies for the long message — I just wanted to provide full context. Looking forward to your response. Warm regards, George

"use client"; import { useRef } from "react"; import gsap from "gsap"; import { useGSAP } from "@gsap/react"; import { ScrollTrigger } from "gsap/all"; // Register plugins gsap.registerPlugin(ScrollTrigger, useGSAP); const AnniverseryAnimationLargeScreen = () => { const container = useRef(); useGSAP( () => { const tl = gsap.timeline({ scrollTrigger: { trigger: ".number-container", markers: false, pin: true, start: "top 10%", end: "+=400%", scrub: 1, }, }); tl.to(".inside-number", { y: "-250%", }); tl.to(".inside-number", { opacity: 0, duration: 0.3, }); tl.to(".number-container", { scale: 16, duration: 4, }); }, { scope: container } ); return ( <section className="mt-4 hidden md:block"> <div className="w-full mx-auto flex flex-col bg-black text-white" ref={container} > <div className="w-full "> <ul className="number-container w-1/2 font-normal mx-auto bg-transparent text-[30vw] flex justify-evenly items-center font-fragmentSans "> <h2>9</h2> <h2 className="relative "> 0 <p className="inside-number absolute text-sm lg:text-base right-1/2 translate-x-1/2 top-1/2 -translate-y-1/2 underline font-bold text-nowrap"> Of Returning <br /> Customer </p> </h2> <h2 className="relative text-transparent"> %{" "} <span className="absolute left-0 bottom-[35%] translate-y-1/2 font-serif text-9xl text-white"> % </span> </h2> </ul> <div className=" w-full "> <div className="textContainer flex flex-col justify-center items-center pt-[900px] lg:pt-[800px] pb-[100px] mx-auto w-full p-4 gap-y-6 md:gap-y-12"> <p className="text-base lg:text-xl font-light"> Over 1500 Projects completed </p> <p className="flex flex-col items-start text-9xl"> <span>FEATURED</span> <span>PROJECTS</span> </p> </div> </div> </div> </div> </section> ); }; export default AnniverseryAnimationLargeScreen; Hey ! I'm creating an animation using React, Tailwind CSS, and GSAP. I'm facing an issue where the textContainer div appears too late while scrolling vertically. I want it to animate when the edge of the "0" digit (or element) almost touches the edge of the inner window (viewport). Can anyone help me fix this? Also, is there any specific logic behind using the duration in ScrollTrigger? Sometimes it affects the animation, and other times it doesn’t seem to do anything. Thanks! I have also attached the animation I want to acheive. Now.mp4 target.mp4

Hi GreenSock team 👋 I'm working with Next.js 15 and trying to orchestrate animations across multiple components using a shared masterTimelinethrough context. Each component defines its own gsap.timeline() and then adds it to the global timeline via masterTimeline.add(). For example: I have two components: Boxand Nav. - Box has its tl with 4 tweens and inserts a label after the second tween (addLabel('afterSecondTween')). - Nav defines its own timeline and tries to insert it at that label inside the master timeline using masterTimeline.add(navTL, 'afterSecondTween'). 🎯 My goal is to synchronize timelines between different components, so that they run in sequence or in specific positions. 💣 The result: Nav always animates at the start of the timeline. ✅ I’ve confirmed that: - The Nav timeline is added with the same label name. - But it still plays immediately (as if the label had time = 0). 💬 My question is: Is it correct to insert timelines at labels from other components in GSAP + React? Is this synchronization possible? What is the correct or recommended way to synchronize animations between different components in GSAP and React? Is this pattern okay: 1. Each component creates its own timeline 2. One of them defines a label at a specific point 3. Another component inserts its timeline at that label Or... is there a better / more robust way to orchestrate animations across components in React using GSAP? Thanks in advance for your insights 🙏 Here’s a minimal CodePen that replicates the problem: 📎 CodePen

This post is not a question or help request, just sharing findings with the community who might be having same issues as we do with pnpm and gsap. Problem For a long time we've been struggling with pnpm installs of gsap shockingly green. The issue stems from how pnpm handles private packages and its package alias resolution. On first install pnpm seems to read the proper alias when installing via gsap@npm:@gsap/shockingly however all further pnpm install commands seem to look in to a lockfile and only read the gsap bit then try to resolve it back to non shockingly package which leads to both - integrity check failure and in some cases reverting shockingly package back in to normal gsap package, or corrupting the gsap package in general rendering it unreachable from code. We've been looking for solutions to this and this forum has some threads on the topic, however there's no concrete solutions other than downloading the package and installing it manually or pruning pnpm before each install... Since pnpm v10 it's possible to overtake and modify the package resolution which was what let us come up with a way to bypass the pnpm resolution and make it work with gsap. Solution To suppress the failure on package integrity checks and make sure the package is always authorized the .npmrc file should look like this: .npmrc strict-store-pkg-content-check=false always-auth=true //npm.greensock.com/:_authToken=YOUR_AUTH_CODE @gsap:registry=https://npm.greensock.com To ovveride pnpm's tries to fall back to free gsap version instead of shockingly version add .pnpmfile.cjs next to where package.json is. .pnpmfile.cjs function readPackage(pkg) { if (pkg.name === 'gsap') { pkg.name = '@gsap/shockingly'; } return pkg; } module.exports = { hooks: { readPackage, }, }; If you've found a better way to deal with it, please share it. 😄

Hi everyone I'm learning Gsap, and I managed to set up a GSAP animation on a collection list with multiple items (currently 3, but the client will add more later). My animation works, but once the last item has been made visible, the page doesn't scroll again. I don't know if the scroll is blocked on the animation section, or if the scroll takes place behind the animation. see here the issue : https://www.awesomescreenshot.com/video/37492533?key=fa46aceeb47f8291b1c8089e8edf0289

Admittedly, I installed Parcel after the project was underway. However, as you can see in the screenshot, I receive error messages only in reference to conflcts with code inside GSAP modules. I love GSAP. I am having a blast. But I do not understand these compatibility issues, and I don't want to touch the code inside the GSAP modules. In addition, I also receive a MODULE NOT FOUND or a "Build Failed" error regardless of whether I use "npm" or "npx" and whether I run "npx parcel index.html", "npx parcel build"; or I use the script names in package.json as in "npx run dev (or build)". It does not seem to matter. The conflicts remain the same. I searched the docs and I reviewed the other questions in this forum. I added the code below to help resolve the resolver-default issues. It was suggested in several forums: "@parcel/resolver-default": { "packageExports": true } But it does not solve the problem. I have uploaded index.html and package.json file for this project. Please note Parcel insisted I place "type=module" before the extracted GSAP modules, or Parcel would not run. So that's not the problem, I assume. The index.html file has all the Javascript above the closing body tag. It works perfectly in my local development server and on Codepen without the build tool. Do I need a build tool? I'm new. If you have any insights or - even better - solutions, I would appreciate any feedback when you can respond. The screenshot above shows the error messages I receive. I have not seen others except as noted above. I added the Codepen link, though I have not installed parcel there. I will work on making a Codepen with the current code. Since the problem lies in the package.json file, it's probably not that helpful. to produce a second codepen. Otherwise, the problematic changes are in the uploaded documents below. (EDIT: I have now forked the functional site, pasted in the code from the dysfunctional site with Parcel, and replaced the Codepen link above). I duplicated the project before I installed the build tool. I'm glad for that! Thank you , Robert index.html package-lock.json

The revealed images are not syncing correctly with the image headings. When an image heading reaches the top of the image box section (p-wrap), the image box still displays Image 1. Additionally, the pinning should stop once all images have been revealed. Please help me here...

Hi everyone, I’m trying to create a 3D animation with GSAP where a square rotates like a disk, respecting the perspective. The square is tilted with rotationX and rotationY, but I want it to rotate around its own Z-axis in 3D, like spinning on its edges. The rotation currently feels flat and clockwise, and I want it to rotate in the direction of the square itself, taking the 3D perspective into account. Any tips on how to achieve this? Thanks in advance! Codepen: https://codepen.io/ramonv/pen/pvoEKaX

Hey everyone, I'm new to the forum. I've come across an issue on a site I'm building. Oddly enough, it works fine on my phone (iPhone X). My brother's phone is an iPhone 14 Plus and when I click into a new page on the nav, and swipe to go back a page, my SplitTyped text behaves as you can see in my screenshot. Why is this happening? Just so you all know, I'm working within Webflow. <style> .word { overflow: hidden; display: inline-block !important; } .char { display: inline-block !important; } </style> Is in my Page Settings Head code. I'm initializing GSAP and SplitType with GSAP and GSAP ScrollTrigger first, following by SplitType. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> <script src="https://unpkg.com/split-type"></script> Each section in my project has an Embed with GSAP. I'm Splitting individual text elements (with unique classes) into words and characters. I tried creating a custom attribute which I could apply to all texts to do this, but it wasn't working for me. Has anyone run into this issue before? Any and all help is much appreciated. Shall I post my project's read-only link here? Here is the staging link: https://a-frame-staging.webflow.io/ Any and all help is much appreciated. Thank you!

I'm trying to make the elements resizeble with drag, with vuejs but when placing the mouse inside the handler of each axis to reseize it is doing the drag and not the resize. I don't know what I should adjust, I'm wearing vuejs. https://stackblitz.com/edit/gsap-reseble?file=app.vue I want to do the same as the example here , but it doesn't work Could you help me?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div class="box"></div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> <script> window.addEventListener("load", () => { gsap.to(".box",{ x: 100, duration: 1}); }); </script> </body> </html> I am new on using GSAP and I am just really starting to follow the basics and I have already encountered something weird. Above is my code, and upon initial load, or every reload I always see the animation just starts above halfway through, And what's also weird is if I add any sort of text inside the document, the animation now works perfectly, It starts on its original position. I don't know what is the cause of this problem on this simple example. Can you please help me. I tried placing this code on codepen but the issue doesn't show up on there. It's only on my local browser.

Hi, I'm just started learning gsap animations and i'm trying to make a text animation but i don't know how. By scrolling, I want to show the new text and minimize the old text. The final result should look like this: Can you give me any advice? Thank you so much.

Hello, GSAP Community! I'm facing an inconsistent performance issue when using GSAP for animations on iOS devices, specifically in the Safari browser. The same code works perfectly in Chrome for iOS and in browsers on Android, but in Safari the animations have a noticeable lag, appearing to miss frames, especially in animations synchronized with scrolling. Tested browsers: • Safari on iOS: has lag. • Chrome on iOS: runs smoothly. • Browsers on Android: perfect performance. We've tried a few solutions: 1. Optimizing CSS properties for transformations (translate3d, will-change, etc.). 2. Adjusting the refresh rate of animations and force3D. 3. Reducing the complexity of animations to see if it's a load issue. 4. We've consulted other forums and followed tips like enabling/disabling specific GSAP settings, but to no avail in Safari. This behavior appears to be specific to the Safari browser on iOS and seems to be a common issue reported by other developers. I would like to know if the community has any more specific recommendations or solutions to work around this Safari limitation. Any tips on how to improve the performance of animations in Safari for iOS? Code Example: https://codepen.io/Vinicius-Gouveia/pen/vEBdQVZ?editors=1111

I've been tinkering with fabric.js in a SharePoint React webpart today, which worked fine - allowing me to render shapes. I added gsap to test animating shapes, and for basic movement of shapes it worked straight away. However - if I use the "rotation" property, it immediately throws "Invalid property", and "Missing Plugin" errors. I've narrowed it down specifically to rotation - moving shapes around, and easing them seems to work perfectly. Here the core code of the component in the webpart: import * as React from 'react'; import type { IMySharePointMenuProps } from './IMySharePointMenuProps'; import * as fabric from 'fabric'; import { gsap } from 'gsap'; export default class MySharePointMenu extends React.Component<IMySharePointMenuProps> { private canvasRef = React.createRef<HTMLCanvasElement>(); private canvas: fabric.Canvas | null = null; public componentDidMount(): void { if (this.canvasRef.current) { // instantiate canvas this.canvas = new fabric.Canvas(this.canvasRef.current, { backgroundColor: 'lightgray' }); // create a rectangle const rect = new fabric.Rect({ left: 100, top: 100, width: 30, height: 30, fill: 'blue', angle: 0, hasControls: false }); // add the rectangle to the canvas this.canvas.add(rect); // render this.canvas.renderAll(); // add a click handler to the rectangle rect.on('mousedown', function(options){ // when clicked, animate the rectangle to a new location, and rotate it gsap.to(rect, { duration: 2, left: 200, top: 100, rotation: 45, ease: "power1.inOut", onUpdate: () => { if (this.canvas) { this.canvas.renderAll(); } }, onComplete: () => { // do something else } }); }); } } public render(): React.ReactElement<IMySharePointMenuProps> { return ( <div> <canvas ref={this.canvasRef} style={{ width: 500 , height: 500 }}></canvas> </div> ); } // Clean up the canvas object public componentWillUnmount(): void { if (this.canvas) { this.canvas.dispose(); this.canvas = null; } } } Any ideas what's causing it ?

Hey, everybody. I am developing wordpress themes. In many projects I use GSAP animations. In large multi-page sites I face the problem of poor performance of GSAP scrolltriger property pin. Probably I am lacking experience to optimize it. Perhaps someone can share his experience how to better optimize animations in such projects (in the context of Wordpress and in general)? Perhaps it makes sense to separate all pages by block and load js-code animations only when there is a block? Thanks for any information PS. To understand the Wordpress problem I will add. That in most sites I create my custom theme from scratch. Pages are separated by blocks. These blocks work with the help of ACF Gutenberg plugin.

I use GSAP’s ScrollTrigger in my React app, and everything works perfectly in the local environment. However, after deploying to Vercel, I’ve encountered an issue with ScrollTrigger when switching routes. Here’s the behavior: When I navigate to a page, the ScrollTrigger positions (start and end markers) are not aligned with the actual content. For example, the start and end markers appear above the intended elements. (I noticed it in all my sections) If I refresh the page, the ScrollTrigger recalculates correctly, and everything works perfectly. Navigating to another route causes the same issue to arise until I refresh the page again. I’ve also noticed that I’m using the Swiper component in two routes at the bottom of the page, reusing the same component. This seems to cause similar issues even in my development server. (I have properly used context for this component) [Note: I have added lazy loading for components and don't have any lazy loading images] const Home = lazy(() => import("@/pages/Home/Home")); Here is a minimal useGsap code from my code: useGSAP(() => { const cards = gsap.utils.toArray( ".card" ) as HTMLElement[]; cards.forEach((item, i) => { gsap.from(item, { y: 50, duration: 1, opacity: 0, delay: i * 0.1, ease: "power2.out", scrollTrigger: { trigger: item, start: "top 90%", toggleActions: "play none none none", markers: true, }, }); }); }, []); Any advice on how to ensure ScrollTrigger recalculates properly? And the best practices to follow when using GSAP with React or Next.js

Hi everyone, I’m working on a project to animate a laptop. The animation is working perfectly. However, when I scale the red screen to 1, the lines animation starts and show 2nd section in appears inside the lines Here’s what I’m trying to do: When the scale is set to 1, I have a line shutter animation, but when the red screen scales to full size and I start scrolling, 20 lines animate from the middle. I then make the screen black, and the second section becomes visible as the lines are used as a mask or clip-path code. The pen link is attached. Can anyone help me resolve this issue? I’m not sure why it’s behaving this way, and any assistance would be greatly appreciated!

Original: https://codepen.io/GreenSock/pen/XWzRraJ I want to achieve the following: I want to scroll through the page in a normal way. So first, I scroll through the intro. Then, when div.wrapper reaches the top of my screen, I want to pin it using ScrollTrigger. At that point, I only want to swipe through the swiper using this Observer. Once I reach the end of my swiper, I want to continue scrolling through the page, and the Observer can stop at that point. I'm having trouble making this work. Can anyone help me?

I have seen many posts about problems installing gsap/business (or club) Tried everything, read all threads, abused ChatGPT, watched the installation but without luck. I have a vite project with GSAP/business installed, locally everything works offcours but when I want to deploy I get the following error: npm ERR! 404 Not Found - GET https://registry.npmjs.org/@gsap%2fbusiness - Not found This is because it wants npm.greensock.com as registry and not registry.npmjs.org. Should be easy right? I have tried this: removed package-lock.json and clean install removed node_modules folder and clean install added .npmrc to root of folder added .npmrc to use_level on machine setting registry through bash uninstalled every version of GSAP (gsap/react, gsap, gsap/business) and installed only business used the .tgz npm installation file to see if this works (no luck) searched my machine for https://registry.npmjs.org/@gsap%2fbusiness to manually remove it I don't know what to do or try, nothing seems to work.