Search the Community

Hi Everyone, Its a paid task, I need this on urgent bases probably till tomorrow, I want two animations in my Reactjs projject. One is Blue Hero Banner that give waves effect and ripple wave effect on mouse interaction. Reference example https://www.chooseplasticfreewipes.com/ Second animation is 3D Text Slider example that change it text onscroll. I am rferening WHAT, HOW, WHERE section, Only need text slider animation. Reference Example https://immersive.altitude101.com/ Whatsapp me for more details. Best of Luck

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

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.

Hi guys! I would like to create a clients references/works section in the style of Apples Time Machine, but instead of having the explorer I would like to have a company logo and text that switches. Example animation:

Hello, everyone! I’m super new to GSAP and have been trying to recreate this animation for days. I’ve even tried using Claude and ChatGPT, but the results are still not close to what’s in the GIF. Here’s the reference site: https://icggallery.irisceramicagroup.com/en I’m really confused and could use some help. If I at least knew the name of this animation, I could probably find some example code and learn from it—but it seems like there’s nothing like it anywhere!

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 ?

Hi, I am a back end developer and have very least knowledge of JavaScript but I can understand code. I have been finding out whole day the code or logic used by https://travelshift.com/ they used to create top banner/slider which changes the slide/image by long click (about 1 second). I used chrome extension Wappalyzer and came to know that its using GSAP. I have been finding something similar but could not get any working code example. Can anyone please provide some similar example with code or any article link please. Also I want to know this animation name so I can google it better way. willing to get a response, thanks!

Hi, I'm trying to use Gsap to make some advanced animation in Storyline, but I have a serious issue, because the course is resized depending the window size with css transformation : scale(). GSAP seams to ignore this rule because for example 200px is always 200px no matter the scale ratio. For now, I calculate the ratio and create the tweens depending of it (and recreate them on window.onresize), but there is an issue if you change the window size during the animation. Is there any possibilities to get the animation to be relatives to this scale ? https://360.articulate.com/review/content/9a23964a-1d79-4c1c-8e47-e8f036269c18/review Here an example of a tween: window["tween"+i] = gsap.fromTo(labels[i],{y:574*scale},{y:334*scale,ease:"power1.out", duration:0.25, paused: true,immediateRender:false, onComplete:twComplete,onCompleteParams:[i]}); Thanks a lot.

I am trying to get help to create your own website Get GSAP button Hover animation effect. CleanShot 2025-07-28 at 20.42.06.mp4

I recently created a CodePen for parallax image sections, but I’ve noticed the animation finishes early. Even though it’s set to run from the top of the element to the bottom, and from the bottom of the screen to the top, it pauses during the last 100px. I can’t figure out why this is happening, and it’s driving me crazy. Am I missing something obvious? I assume it’s probably an easy fix.

Hey! I am Lucas, a full-stack dev that has been working with GSAP and 3D graphics for almost four years now. My portfolio was featured on the GSAP official showcase back in December 2023 and I also submitted my latest project. You can check it out first-hand here: https://gilneas-bank.lucaslamonier.com/ In this website you can travel to different universes to learn more about a currency bot for Discord. Beyond front end I also do: back end: Node.js, Next.js databases: MySQL, MongoDB, Google Clooud's Datastore hard surface modelling and basic animations in Blender Unreal Engine bots for Discord and more! If you have a cool idea or an interesting project going, reach out! Maybe we can do something awesome together! [email protected] https://www.lucaslamonier.com/

Need help from someone to build this animation in Webflow: https://www.dropbox.com/scl/fi/8eazko292jfhk8xvvnlv4/EngineVideo.mp4?rlkey=64huqf2ka05yt1g4pitujc7io&e=2&dl=0

Hello Guys, I purchased the GSAP business for my organization to use the amazing motionpath plugin but it is giving me somewhat hard time to achieve my desired effect. What I am trying to achieve here is to distribute all the cards evenly on the curve path and then animate it from right to left. The cards will appear from left and end in when the last card is at the middle. please see the attached image of what I am trying to achieve. Any help will be much appreciated. Thank You

Hey everyone, Seeking Guidance on a Text Animation Effect I'm working on a text animation where the text is revealed using "X" characters instead of traditional dots or a fade-in effect. Ideally, these "X" characters would be custom-rendered as SVGs. Current Challenges The animation feels too contained—I want it to have a more open and airy feel while keeping the text centered. I need to implement a hover effect where each "X" subtly shifts or moves to add an interactive touch. 🔗 Current Progress: CodePen Demo What I’ve Tried Particles.js seems promising, but I'm still figuring out how to integrate it effectively with text. Someone generously shared some starter code, which I’ve tweaked, but I’m still refining the animation. References & Inspiration Desired Hover Effect: Rosehip Example Similar Animation: Related CodePen Looking for Suggestions Has anyone tackled a similar effect before? Would GSAP or another library be better suited for this animation? Any insights or suggestions would be greatly appreciated! text animation figma.mp4

i want to recreate the on scroll effect of the https://www.aquest.it/it site. i have made the on scroll animations to move images vertically and text horizontally but i am not able to achieve that smooth bending effect.

I’m working on a Next.js project with GSAP free version, where I’ve implemented a footer reveal animation inspired by the behavior on the Raxo website. The goal is to make the footer overlap the main content when a specific section (<div ref={titleRef}>) becomes visible at the bottom of the viewport. Here’s a brief description of my setup: The main content is pinned while scrolling. The footer slides up and overlaps the main content as the user scrolls to the end. I’m using GSAP ScrollTrigger for the animations and react for component structure. You can find my implementation on CodeSandbox: 👉 CodeSandbox Link Problems: Pinning Issue: The main content pinning is not smooth, especially during the transition when the footer starts overlapping the main content. The transition feels jittery and unstable. Footer Flickering: The footer flickers significantly on Safari during the reveal animation. While the flickering in Chrome is minimal and tolerable, it’s highly noticeable and disruptive on Safari (both macOS and iOS). White Area Beneath Footer on Fast Scrolling: During fast scrolling, the pinned footer (set to 100vh) moves slightly, and a white area becomes visible beneath the footer. It seems like the footer isn’t fully pinned to the bottom during these fast scroll events. Relevant Code: Here’s the simplified code structure. The complete implementation is available in the CodeSandbox Link: CustomLayout.js "use client"; import { useEffect, useRef } from "react"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default function CustomLayout({ children }) { const titleRef = useRef(null); const containerRef = useRef(null); const mainContentRef = useRef(null); useEffect(() => { if (!titleRef.current || !containerRef.current || !mainContentRef.current) return; const title = titleRef.current; const container = containerRef.current; const mainContent = mainContentRef.current; gsap.set(container, { y: "100%", force3D: true, backfaceVisibility: "hidden" }); gsap.set(mainContent, { opacity: 1, scale: 1, force3D: true, backfaceVisibility: "hidden" }); const timeline = gsap.timeline() .to(mainContent, { opacity: 1, scale: 0.99, duration: 1, ease: "power3.out", }) .to(mainContent, { y: "-2%", duration: 0.5, ease: "power2.inOut", }); ScrollTrigger.create({ trigger: title, start: "bottom bottom", end: () => `+=${container.getBoundingClientRect().height}`, pin: mainContent, animation: timeline, pinSpacing: false, scrub: 1, onEnter: () => { gsap.to(container, { y: 0, duration: 1, ease: "power4.out", clearProps: "transform", }); }, onLeaveBack: () => { gsap.to(container, { y: "100%", duration: 1, ease: "power4.out", clearProps: "transform", }); }, }); ScrollTrigger.refresh(); return () => { ScrollTrigger.killAll(); }; }, []); return ( <div className="flex flex-col"> <header>Header Content</header> <main ref={mainContentRef} className="flex-grow bg-gray-100"> {children} <div ref={titleRef} className="h-[1px] opacity-0 bg-transparent flex items-center"> <p className="relative lg:absolute h-0 w-full bg-red-500 text-5xl font-bold text-white text-center"> Footer Title </p> </div> </main> <footer style={{ minHeight: "100vh", transform: "translateZ(0)", willChange: "transform", }} ref={containerRef} className="lg:relative bg-black text-white h-[calc(100vh+180px)] sm:h-auto z-[2] overflow-hidden" > Footer Content </footer> </div> ); } What I've Tried: Using force3D and backfaceVisibility: Added force3D: true and backfaceVisibility: hidden to both the footer and main content, but these didn’t resolve the flickering, pinning smoothness, or the white area issue. Tuning ScrollTrigger Configurations: Adjusted the start, end, and pinSpacing values for ScrollTrigger. Experimented with invalidateOnRefresh, fastScrollEnd, and easing functions without success. Testing with or Without Hardware Acceleration in CSS: Tried enabling/disabling transform: translateZ(0) and will-change: transform, but the flickering and white area issues persist. Adjusting Duration and Scrub: Changed the animation duration and scrub values in GSAP. This slightly improved the pinning but didn’t eliminate the white gap during fast scrolls. Environment: Browser: Major problem in Safari (macOS and iOS). GSAP Version: Free version ([email protected]). React: [email protected]. Framework: Next.js. Expected Behavior: The main content should pin smoothly during scrolling, and the footer should reveal without any flickering or jittering. Questions: Is the flickering in Safari a known issue, and are there any workarounds or best practices for smooth pinning and reveal animations? Why does fast scrolling cause the footer to shift, revealing the white area beneath it, and how can I prevent this behavior? Are there specific optimizations in GSAP ScrollTrigger to handle such issues on Safari? Any help or suggestions to fix these issues would be greatly appreciated! References: Similar footer behavior: https://raxo.co/ During fast scrolling, the footer should maintain its position without revealing any white area beneath it.

I have attached a simple recreation of the bug that I'm facing, there is a much more complicated timeline so cannot shift to CSS only animation. As you can see in the demo, rotation works perfectly fine with gsap, but css transforms it, without considering the transform, is there any way I can "apply" the gsap transforms as CSS at the end of the timeline and just remove all the previous gsap effects? Anyways, would separate infinite gsap timeline be less efficient than an infinite CSS animation? cuz that would be a lot simpler to apply.

Hi, i have working in cargo collective website then i've added smooth scroll lenis.js and my requirement also one section use animation like card scrolling pin effect horizontally then i have implement gsap scrollTrigger but i have scrolling then smooth scroll lenis.js working perfectly but when enter the section they are hold card's not see only white background showing so please check it and help me.

Hi everyone, I am working on a project where I want to create a blob effect using GSAP. I have animated two blob SVGs using GSAP as you can see in codepen attached below, but I am still learning, and I don’t know how to do everything. I have tried everything, mask-image, -webkit-mask-image but I'm not getting the result that I want. My goal is to mask an image into the blobs, like in the image I have attached. Can anyone please help me with this? How can I use GSAP to mask an image into the blobs? Thank you in advance for your help and suggestions.

Hi, im trying to make a Scrolltrigger animation with a grid, that has tiles in it, the tiles should come in from the bottom staggered as they are now, to recreate the problem i made a stackblitz demo: https://stackblitz.com/edit/sveltejs-kit-template-default-tcgsr9?file=src%2Froutes%2Fstyles.css,src%2Froutes%2F%2Bpage.svelte,src%2Fcomponents%2FGridContainer.svelte so when you first start the server and scroll down, the grid is placed way too low (where it would usually start when animating the scrolltrigger) but it doesnt animate, upon reloading the page, it animates as expected. I put a green square below it to show the displacement at first, it happens every time, if i stop the server with Ctrl+C and start it up, on first load the grid is way too low and doesnt get animated. for the +page the Grid is inside two wrappers, the 2nd wrapper is there because of different components that i have in a column in between other components, i could solve it without the inner wrapper but im not sure if thats the problem, since ive tested it without it aswell... I attached 2 Screenshots of what it looks like for me, the 1st one is after reloading, what it should look like and the 2nd one is when i first start the server, when it doesnt animate with Scrolltrigger Any help or advice on whats wrong and how to fix it, is appreciated. Thanks in Advance!

how to create this pinning effect the same as this website https://www.airvoir.com/

Hi, I am trying to achieve a 3D cube with a parallax layer on top the follows when the cube rotates, just like this example i have stumbled apon (https://ilovemobile.nexd.com/c/4ct5X7ospn/creative/m7CpkDDHVYsxSRX4), I see its made with canvas, but im not too familiar with that and have since tried to give it a go with GSAP, but cant seem to get it right... Anyone get any tips for me? I have tried to create a CodePen with my current code (note images are not that well represented here, but i tried the best i could with placeholders.)

Screencast from 2024-09-26 11-13-57.webm Screencast from 2024-09-26 11-05-01.webm