Search the Community

Hi Everyone, Need some help regarding pinned item not being taking full height in portrait mode, though it works fine landscape mode, and also if we switch from landscape to portrait it will work fine, when directly loading to portrait mode it breaks. This works fine on desktop tablet too, just issue with mobile portrait mode. I have tried using config like pinSpacing, pinType, invalidateOnRefersh Could anyone please point out I could be doing wrong here? or what can I try? Thanks in advance export const subTitleImmersiveAnimation = ( backgroundRef: AnimationElementRef, firstFoldRef: AnimationElementRef, secondFoldContent: AnimationElementRef, ): (() => void) | void => { if (!backgroundRef || !firstFoldRef || !secondFoldContent) return // Create a timeline for synchronized scroll animations const tl = gsap.timeline({ scrollTrigger: { trigger: secondFoldContent, start: 'top bottom', end: 'top center', scrub: true, pin: backgroundRef, }, }) // Animate firstFoldRef out of view (upwards) tl.fromTo(firstFoldRef, { yPercent: 0, opacity: 1 }, { yPercent: -100, opacity: 0, ease: 'none' }, 0) // Animate secondFoldContent from below to center tl.fromTo(secondFoldContent, { yPercent: 100, opacity: 0 }, { yPercent: 50, opacity: 1, ease: 'none' }, 0) return () => { tl.scrollTrigger?.kill() } }

Dubai Scrapbook, a  GSAP powered interactive story. This demo turns a long list of tourist highlights into a playful “scrapbook” you can scroll through. What GSAP does here: 1. Hero ScrambleText – TextPlugin fakes a hacker-style scramble before landing on each lyric line. 2. Intro pop – the main title animates in with a simple fromTo on scale/rotation using back.out ease. 3. Scroll-driven page reveals – Every .photo-page card slides, rotates and scales into place via ScrollTrigger. 3. Stickers, washi-tape strips and photo frames each get their own staggered timelines inside the same trigger. 4. Per-word fade for descriptions – A helper splits the paragraph into <span> words and lets a small timeline (stagger: 0.08) fade them in as you reach the card. 5. Confetti explosion on button click – GSAP throws emoji with random x, y, rotation and opacity fades. 6. Micro-interactions – mouseenter / mouseleave handlers give buttons and photo frames a quick scale-tilt effect (power2.out). 7. Parallax extras – Floating emojis in the background scrub vertically with the page (scrub: 1) for extra depth. It’s basically a cookbook of little GSAP tricks. Feel free to copy-and-paste the parts you need. Enjoy!

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 am working on a page model that has a hero section that slides away to reveal text below then soem full-height sections. The first part is working pretty well thanks to @mvaneijgen and @Rodrigo — I am using this basis I have two issues which Id like to ask for advice on, see here for my codepen https://codepen.io/dezbat/pen/dPyKvgg 1. I am trying to add a bit of vertical motion to the 'mover' elements in each section. really simple stuff! The problem is this movement gets lost if I remove / add sections, there seems to be some interaction between the individual section movement Im looking for and the overall height of the page. I would like to find a dynamic / flexible solution that doesnt require me to adjust start values depedngn on the number of full-height sections in the page. 2. the homepage header in the '.stickHead' element is doing what it should, Id simply like to delay it a little / start it later... Apologies if these are obvious questions/problems, I haven't tried to really get going in GSAP until recently! thanks!

1/ So I’m using GSAP (GreenSock) for smooth animations in my Astro.js project. Everything should look buttery smooth, right? But instead, animations play at random speeds — sometimes smooth, sometimes super fast, other times weirdly slow. Like lagging but not quite… 2/ I tested it with ScrollTrigger and without ScrollTrigger, and the issue still happens. 👉 If I set a fast animation (short duration), it gets even more broken — speeding up & slowing down erratically. Almost like the browser is catching up to missed frames. 3/ It’s not a typical FPS drop. • Sometimes the animation starts slow, then jumps and speeds up halfway through. • Other times, it’s fast-forwarding unpredictably. • No consistent easing curve — even though I’m using simple eases like power1.inOut. 4/ ✅ Things I’ve tried: • Basic GSAP timelines without ScrollTrigger — ❌ still broken. • Tried isolating GSAP outside Astro components — ❌ same issue. • Even static (non-scroll) animations with very short durations (like duration: 0.5) act extra weird. 5/ ❓ My theory? Seems like Astro’s partial hydration / rendering strategy might be conflicting with how GSAP runs and measures time under the hood. Maybe animation frames or requestAnimationFrame (RAF) isn’t syncing well with Astro’s lifecycle. 6/ So if you’re using Astro + GSAP and seeing: • Fast/slow/fast inconsistent animations • Animations “catching up” midway • Super weird behavior at short durations 👉 You’re not alone. 7/ 🚨 If anyone has successfully combined Astro.js + GSAP (with or without ScrollTrigger) — would love to hear how you did it! For now, might need to rethink how GSAP runs in an Astro context (maybe move to a client-rendered framework or island?). 8/ Will keep experimenting. If I find a fix/workaround, I’ll share it here. If you’ve solved this — please drop your insights below! Here is the code itself: <script> import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) window.addEventListener("load", () => { gsap.to('.atext', { yPercent: 200, opacity: 0, duration: 3, scrollTrigger: { trigger: '.atext', start: 'top 30%', end: 'bottom 0%', scrub: true, markers: true }, }) }); </script> thanks in advance!

Hi, fellow GSAPers! May I ask for your help, please?!? The codepen shows a pendulum like motion - or should. Because for some reason, after the very first pendulum motion, there is a strange delay. Only then it continues naturally. Do you happens to know why? And what the solution would be? Thank you!

Hello folks, I am very new to the gsap framework. I am trying to achieve a UI requirement for my project where I want to lock the div to change the child div's background color till the div reaches center of the viewport. I tried to achieve this but not sure how to start changing color of the first div after the scroll-lock starts and also to complete the color change of the 3rd div little before the scroll-lock ends.

HI, brand new to GSAP. I am looking to "unblur" an image after a completed animation. I looked for blur methods in GSAP3 but did not find anything. I again searched for a while and found some info that referred to having to import Pixi or something like that. I then decided to use a css pseudo element with absolute positioning on top of the image with a backdrop filter to achieve the blur. This worked by adding a "pseudo blur" (because the actual image is not being blurred). I am also trying to scale the image and its opacity so that it fades in and scales up blurry with the animation ending with the image at intended size and clarity. I tried to target the css pseudo element (::after) according to a video I just saw. This required the import of the CSSrule plugin. But it doesn't seem to work for me. I would appreciate any insight anyone can offer. As I mentioned I am brand new to GSAP and am looking forward to the possibilities. If there is a way to blur the actual image and not have to rely on the pseudo element that would be ideal. I started a CodePen here if anyone is interested: https://codepen.io/j2squared/pen/bGPXmey Thanks in advance.

https://codepen.io/iamryanyu/pen/GXpyLQ

Hello GSAP community! ? I'm using the vanilla-lazyload library to lazy load images. I need to use lazy loading because I'm working on a project page and there are a lot of photos/videos that weigh a lot. The whole problem lies in the ScrollTrigger position after the images, which are loaded lazily. The fact is that initially these images do not have a height and because of this ScrollTrigger fires earlier than necessary (which is correct). To solve this problem I used the method when loading each image ScrollTrigger.refresh() This method allows ScrollTrigger to work when needed, but on phones (I tested on iPhone 14 Pro in Safari and Google Chrome) when scrolling, the scroll stops at the moment this method is executed. How to fix the problem of stopping when scrolling quickly on mobile devices? I tried to solve this using the method ScrollTrigger.normalizeScroll(true) But this method removes smooth scrolling on mobile devices, which also doesn’t look very good. I also use the lenis-scroll library, but if I turn it off the problem remains. I am attaching my codepen so you can understand the reason: https://codepen.io/ProjectDCL/pen/QWRVYYz (Be sure to watch it on your phone to understand why). I hope there is a very easy solution to my issue. But I've already spent several evenings trying to find something worthwhile. I will be very grateful for your help and believe in the magic of GSAP ?

here's the Demo, I am creating a simple timeline and controlling it with gsap.to to be able to use different easings on playing the timeline in reverse, https://codepen.io/Subham-Singh-the-bashful/pen/RwmgmwK

Hello Everyone! I have a bit of a generic problem/misunderstanding - basically, i have some animations in GSAP and have a couple of questions to understand it more deeply: When is the best time to load the GSAP animation (when the document is loaded or when everything is loaded (DOM, images, etc))? The first question leads to this one - if I do a hard refresh in the browser my animations are flashing or for example, the element that should be x: -100% is visible (for literally like 0.00s but still and then animation kicks in so there is a little flash) because the js file is not probably loaded yet - how do you guys tackle this, especially vital animations like for hero section or the other places when we need everything to be loaded and animated ASAP? Please have a look at the code below all bundled by webpack: $(function () { // Hero section animation const heroBanners = document.querySelectorAll(".section__hero-banner"); heroBanners.forEach((section) => { let imgCover = section.querySelector(".img-cover"); let imgTl = gsap.timeline({ scrollTrigger: { trigger: section, // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}, start: "top center", }, }); // Inital state for headings imgTl.set(".hero-text__right", {x: "120%"}); imgTl.set(".hero-text__left", {x: "-120%"}); imgTl.to(imgCover, { opacity: 1, ease: "power4.inOut", duration: 0.4, }); gsap.utils.toArray(section.getElementsByClassName("hero-text")).forEach((heroText, herIdx) => { var container = section.getElementsByClassName("text-wrapper"); let textTl = gsap.timeline({ scrollTrigger: { trigger: section, scrub: 1, // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}, start: "top top-=50px", end: "bottom center", // toggleActions: "restart none none reset" }, }); if (herIdx % 2 == 0) { let distance = $(container).width() - $(heroText).width(); //left imgTl.to(heroText, { x: "0%", duration: 0.85, ease: "power4.inOut", }); textTl.to(heroText, { x: `${distance}px`, }); } else { let distance = $(container).width() - $(heroText).width(); //right imgTl.to( heroText, { x: "0%", duration: 0.85, ease: "power4.inOut", delay: -0.85, } ); textTl.to(heroText, { x: `-${distance}px`, }); } }); }); }); The animation is: hero image fade in then slide two lines of text from left and right. Would be amazing he somebody could point out some bad practises or mistakes or if this could be done in better way. thanks you so much guyz!

Note: The issue only occurs on Safari. I wanted the user to see a large logo across the entire width of the screen upon entering my website, and after moving the cursor lower, I wanted the logo to shrink and move to the logo's location. Sometimes (I don't know what it depends on) there is an error like in the attached video. The problem seems to me to be that GSAP is unable to handle the change from width:100% to width: auto and therefore, instead of a smooth transition, it stops at some strange height of the logo. Here you can find video that present my problem: https://youtu.be/GbFOv4NCgrk Here you can find my website: https://melon.studio Here you can find JS code that animate my logo <script> let mm = gsap.matchMedia(); // use a script tag or an external JS file document.addEventListener("DOMContentLoaded", (event) => { gsap.registerPlugin(ScrollTrigger) // Animate From $("header").each(function (index) { let triggerElement = $(this); let targetElement = $(".menu-logo"); let targetElement2 = $(".menu-logo svg"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "bottom top", end: "bottom bottom", scrub: 1.5 } }); mm.add("(min-width: 53rem) and (min-height: 930px)", () => { tl.fromTo(targetElement, { y: "0%", width: "100%", margin: "50px 0 0 0", duration: 1 }, { width: "auto", margin: "0" }); }); }); }); ScrollTrigger.defaults({ markers: false }); </script> I tried to add different values in my GSAP script but nothing really helps :/ It looks like GSAP can't go from 100% to auto and stops when he is trying to calculate that.

Dear Support, We are developing a website that has Scroll Smoother applied on the whole page with multiple scrolltriggers applied. We use normalizescroll(true) globally on all pages so that it follows scroll correctly (Android and IOS). But this options breaks the <a href> elements on touch hold event. Specifically on mobile devices when you hold a <a> element it fires the click event. When we disable normalizescroll it doesnt fire the click event when you hold a <a> element. We created a small codepen to recreate the issue. Please visit it from mobile devide(preferably Android with Chrome). We have fully updated softwares.

Hi everyone! I'm working on a landing page and I need to create a pre-loader that uses my handwritten logo as an SVG. Desired effect: The desired effect is a Stroke Reveal, implemented with GSAP3. How can I achieve this effect? Logo positioning: After loading, the logo/preloader should be positioned centrally on the navbar. Request for help: To achieve this project, I would need your help. What should I study? Best practices? What resources and tutorials do you recommend to learn more about?: Creating pre-loaders Stroke Reveal effect with GSAP3 Dynamic positioning of SVG elements What can I get inspiration from? Do you have any examples of websites or projects that use similar effects? Conclusion: Thank you in advance for your support! Additional information: I'm using GSAP3 My logo is a handwritten SVG The landing page is developed in HTML, CSS and JavaScript Thank you very much for your help!

codepen.io/benheise/pen/WNmZWpO https://codepen.io/benheise/pen/WNmZWpO Current version: https://unpkg.co/gsap@3/dist/gsap.min.js = GSAP 3.12.5 Does a GSAP3 method/property exist to convert GSDevTools total time to the actual total time? In my workflow GSDevTools helps out in a big way when determining time between frames. The culprit is coming from repeat: -1 in the .fromTo()where total time is 1000 want this time to represent the actual time(screenshot provided) Removing repeat: -1 or creating repeat: # without the negative yes creates actual total time

I am trying to recreate the effects on this page with no luck. Anyone got good starting points or know of a demo? Ive tried with all the plugins with no luck. Maybe GSAP is not for this? https://zhenyary.com/404

Hy, I tried converting my blob animation to GSAP 3, but am having some dificulties, this is my old code: https://codepen.io/Josip-Bogdan/pen/JjxZLKO This is my new code: https://codepen.io/Josip-Bogdan/pen/xxMzLJv

Hello, why is not working? logo

Hi once again, I am trying to create infinite movement, but have to problems and don't have enough experience to understand what's going on. Changing ease: "power1.in" to ease: "back.inOut(1.7)" - second one not works, however first one plays well. All squares created at once before movement started, however I need to create them one by one (when carousel shifted add new square). The problem is, when I tried to call addSquare(6) in onStart, or any other place - squares created, but they don't move( Hope u could advice where I need to look. Thanks a lot for your time!

Hello, i found some slider using Gsap but i want to modify it with timelines. My goal is when i start scrolling my slide scroll and set rotation to 0 I tried to combine it with timeline but it jumps or anims end when i didnt scroll yet. Without timeline all of them rotates at the same time.

I want to make blend text animation with scrolltrigger but i have a problem with pinned background color. My goal is after text about to finish unpin the background color scroll with text alongside. I want to unpin when text reachs here: But background color remain until whole page scrolled. Any help appreciated, thanks in advance!

First post here! I've read documentation, searched the forums and noodled around quite a bit before posting and I'm still stuck! So here's what I'm trying to accomplish. I'm sure it's super easy solution and I'm probably missing a minor step. I have a section of cards that are stacked and they're overlaying each other. When you click it the card div it pops up, if there is already an active card the previous one shuffles back into the stack and the new one pulls up. Here's my code that I have so far. It only shuffles them up and down without previous going back into the stack. const GetCards = document.querySelectorAll(".tools-card"); GetCards.forEach(function(cardList, index){ const cardTL = gsap.timeline({paused: true}).to( cardList, {duration: 0.5, x: "-=10", y: "+=250", scale: 1.05, ease: "expo.inOut"}) let activeCard = false; cardList.addEventListener('click', () => { if(activeCard === false){ cardTL.play(); activeCard = true; }else{ cardTL.reverse() activeCard = false; } }) }) I've tried several things like adding tags to the timeline and several methods() but I clearly don't know what I'm doing! Some guidance would be stellar. Thanks in advance.

const cardsRef = useRef(null); useEffect(() => { const cards = Array.from(cardsRef.current.children); const timeline = gsap.timeline({ defaults: { duration: 3 } }); gsap.set(cards, { opacity: 0, x: 500 }); cards.forEach((card) => { gsap.to(card, { x: 0, opacity: 1, duration: 1, ease: "ease-in-out", scrollTrigger: { trigger: card, start: "top 60%", end: "+=400", scrub: true, }, }); }); }, []); Here is the code I am working with Next.js the the start market is going above the element and when we inspect the element it comes to the place first image is without inspect when first page load notice markers when we inspect the marker comes in place why it is happening please help this is my first post apologies for any if the post is not according to guidelines

Hi Guys. I have replicated my issue in CodePen but you can not see the issue unless you view it in a mobile browser without CodePen wrapping it. So to show you, I have placed the same code that is in the CodePen in a html version as a visitable link. https://kubikdesign.com.au/posts/20230610-gsap-jump-issue.html The issue is: after scrolling past the scrollTrigger area the page jumps up. I have also created a screen recording on/of my mobile showing and explaining the issue (ensure sound is on). https://kubikdesign.com.au/posts/20230610-gsap-jump-issue.mp4 Thanks guys. ?