Search the Community

Hi I'm quite new to GSAP and having an issue I can't figure out. I have full width section that pins when it gets to the top of the window, then inside that section I have scrolltrigger which toggles the class on some tab sections to open them as you scroll. This works well until the browser is resized, then the markers for the tabs jump to the top of the page and therefore aren't being triggered any more. You can see it on the lower green section of my dev site https://avidd2024.dev.avidd-design.co.uk if (window.innerWidth > 640) { // Pin the tabs container when a tab title is active const tabsContainer = document.getElementById("pintrigger"); gsap.to(tabsContainer, { scrollTrigger: { trigger: tabsContainer, start: 'top 0', // When to start pinning at the top of the screen end: '+=1000', // Unpin after scrolling 1000px past the start pin: true, // Pin the element pinSpacing: true, // Maintain the pinned element's position invalidateOnRefresh: true } }); } // Loop through each tab title and define ScrollTrigger const tabTitles = document.querySelectorAll(".vertical .tabs-title"); tabTitles.forEach((tabTitle, index) => { gsap.to(tabTitle, { scrollTrigger: { trigger: tabTitle, start: "top top", // Start when top of tab title reaches top of screen end: "bottom top", // End when bottom of tab title reaches top of screen scrub: true, invalidateOnRefresh: true, toggleClass: { targets: tabTitle, className: "is-active" }, onToggle: (self) => { const panelId = tabTitle.querySelector('a').getAttribute('href'); const panel = document.querySelector(panelId); } } }); }); <section class="primary-color full-width" > <div class="block-tab-container" id="pintrigger"> <?php if (have_rows('repeater_content_tab')) { $counter = 0; ?> <ul class="tabs vertical" data-responsive-accordion-tabs="small-accordion medium-tabs" data-multi-expand="true" id="<?php echo esc_attr($id); ?>"> <?php while (have_rows('repeater_content_tab')) { the_row(); $tab_heading = get_sub_field('tab_heading'); $counter++; ?> <li class="tabs-title"> <a href="#tab<?php echo $counter?>-<?php echo esc_attr($id); ?>" aria-selected="true"> <div class="tabs-title-container"> <div class="text"><?php echo $tab_heading ?></div> </div> </a> </li> <?php } ?> </ul> <?php $counter = 0; ?> </div> <div class="tabs-content secondary vertical" data-tabs-content="<?php echo esc_attr($id); ?>"> <?php while (have_rows('repeater_content_tab')) { the_row(); $tab_content = get_sub_field('tab_content'); $counter++; ?> <div class="tabs-panel" id="tab<?php echo $counter?>-<?php echo esc_attr($id); ?>"> <?php echo $tab_content ?> </div> <?php } ?> </div> <?php } ?> </div> </section>

I have a project in Astro, and I'm using smooth scrolling and scroll trigger on various animations in different components of my homepage. However, animations that involve horizontal movements (I'm not sure if this is relevant or not) break when I resize the browser. Working code: <script type="module" is:inline> import gsap from "https://cdn.skypack.dev/gsap"; import ScrollTrigger from "https://cdn.skypack.dev/gsap/ScrollTrigger"; document.addEventListener("astro:page-load", () => { gsap.registerPlugin(ScrollTrigger); // Banner index animation const items = document.querySelectorAll(".sections ul li"); items.forEach((item) => { gsap.fromTo( item, { opacity: 0, y: 100 }, { opacity: 1, y: 0, ease: "power1.out", scrollTrigger: { trigger: item, start: "top bottom", end: "bottom-=100px bottom", scrub: 2, }, } ); }); }); </script> And this animations breaks on resize and kills any animation below him: <script type="module" is:inline> import gsap from "https://cdn.skypack.dev/gsap"; import SplitText from "../../node_modules/gsap/SplitText.js"; import ScrollTrigger from "../../node_modules/gsap/ScrollTrigger.js"; document.addEventListener("astro:page-load", () => { gsap.registerPlugin(ScrollTrigger, SplitText); function animation() { // Dividir el texto en líneas y aplicar una clase a cada línea const splitText = new SplitText("#highlightText .text", { type: "lines", linesClass: "lineClass", }); const splitTextClone = new SplitText("#highlightText .text.--clone", { type: "lines", linesClass: "lineClassClone", }); const container = document.querySelector( "#highlightText .js-text-animated" ); gsap.utils .toArray("#highlightText .lineClassClone", container) .forEach((line) => { const childLine = line.querySelector("#highlightText .lineClass"); // Definimos la animación con ScrollTrigger gsap.fromTo( line, { x: -line.offsetWidth }, { x: 0, ease: "power3.out", scrollTrigger: { trigger: line, start: "top bottom", end: "top top", scrub: 2, }, } ); // Animación para el hijo en dirección opuesta gsap.fromTo( childLine, { x: childLine.offsetWidth }, { x: 0, ease: "power3.out", scrollTrigger: { trigger: line, start: "top bottom", end: "top top", scrub: 2, }, } ); }); // Configuración de ScrollTrigger para separator-main gsap.to("#highlightText .js-section-separator-main", { x: -1000, // Cambiar según la distancia deseada scrollTrigger: { trigger: ".js-section-separator", start: "top bottom", end: "bottom top", ease: "power1.out", scrub: 2, }, }); // Configuración de ScrollTrigger para separator-secondary gsap.to("#highlightText .js-section-separator-secondary", { x: -1000, scrollTrigger: { trigger: ".js-section-separator", start: "top bottom", end: "bottom top", ease: "power1.out", scrub: 2.5, }, }); } animation(); }); </script> Thank you in advance!!

I've run into an issue where ScrollTrigger freezes at a frame. If I keep resizing it back and forth it seems to come back to life. I don't seem to be getting any errors logged or anything. Below is the gsap snippet of the code running this part of the code. If anyone has any ideas!

Hi GSAP community, Can anyone help me with the following issue? I'm using ScrollTrigger to horizontally scroll/pin a few slides. The number of pixels to scroll (x) is a dynamic value: the overflow of the row with slides compared to it's parent. This works perfectly on the initial load of the page. But if you resize the viewport to a point where the parent narrows the pin end point gets off. I made a minimal demo to reproduce the issue. Resize the window to a point where the parent/container (blue border) narrows. You'll see that the last slide (the end of the scrub) won't line up with the parent container (blue border) anymore. I assume my function to calculate the overflow is wrong. Any help is greatly appreciated!

Hello GSAP Community! Thank you so much in advance for your help! I am trying to create a scaled animation on scroll. When user scroll down to section a box will appear from down to center and when it hits center of the screen then start to scale upto 1. It is working on reload window but when i resize window on this section, it suddenly beaks its scaled position. All your help is greatly appreciated!

I have an animation which uses pinning. However it doesn't reset the pin positions on browser resize. I have been at it for literally weeks now and have had no luck. Annoyingly it works on my demo but not on my live site https://staging-chfp.shereewalker.com/ Initially it looks fine, but when you actually open it on a mobile, it's completely breaks on screen orientation change. I think it might partly be caused by me hiding and displaying the animated section, but even at heights where this doesn't take effect, the markers are consistently off. I have included the code for the animation that sits above (the expanding image) because I thought this might be the cause, but the demo STILL works. I have had support on here before but nothing seems to work, so really all I am trying to do at this point is kill it entirely, and re-add/calculate on browser resize. But I can't even get this to work. Any help would be greatly appreciated. Note: You won't see the pinning unless you open the codepen link as the height is to small in this thread

Hello I have a bento style gallery and on scroll the rows and columns of the gallery are changing size so the middle element is zoomed in and take full screen size. In the code pen provided you will see that everything works ok until you resize the window. I found out that if the scale option is set to true then the grid and images adapt to the new window size but images are distorted as the parent element is now scaled with a transform and I cannot have that. Is there any way of reseting Flip and ScrollTrigger to calculate everything from scratch but for the new window size? Or any other solution i'm missing at the moment? Thank you very much for your help!

I am struggling to get this effect to work. There is a hero image with parallax that is working. But the logo, which starts full size and fixed to the bottom of the hero container (with a slight overlap of about 75px at the bottom), needs to resize smaller to fit in the sticky header at the top. This should scrub with the scrollbar and be sticky at the top shortly before the hero is fully scrolled past. I've spent days trying to get this to work, and I can't find any examples anywhere that have helped me get to the bottom of the issue. Any help would be greatly appreciated!

Hello GSAP, Currently I'm using the horizontal loop helper function to create horizontal drag, I have a problem: I only want it to work at breakpoints of 768px or less. When I'm at 768px (tablet breakpoint) I start dragging and when I resize the window it's higher than the tablet breakpoint. How can I completely cleanup that function?! I could clearProps and kill the draggable instance but it doesn't seem possible. You can test the demo by resizing the window for better clarity. Thank you Link stackblit: https://stackblitz.com/edit/stackblitz-starters-ebfeuj?file=app%2Fpage.tsx I'm using useGSAP, and Nextjs. Demo.mp4

Hello! I am trying to make a horizontal slider with images that are 100vw and 100vh. The slider works fine until I do a resize. Then the start marker jumps wildly and no longer starts from the image. I want the pin to update when I do a resize, but it behaves somewhat erratically. I made a codepen but it works fine on that! adding a printscreen! Thanks

Hi Forum, i'm having troubles refreshing the scrolltriggers in my angular project. So when the site is loaded, everything works fine, but when i resize the video in the container i not perfectly aligned anymore. I've set up a minimal demo on stackblitz: Stackblitz Demo EDITNOTE: changed from codesandbox to stackblitz due to sharing issues see: app/src/pages/home/home.component.ts as you can see, i tried some solutions I found on here the forums like invalidateOnRefresh and ScrollTrigger.refresh(true), but none of these work. Desired behaviour after resize: Actual behaviour after resize: I appreciate any help/hint/idea Thank you!

Hi, I have a problem with the horizontal scroll when I resize the layout, the width of the panel doesn't adjust to 100%, it stays cut. How can I do? Thanks

Hi, I have a scrollTrigger animation when a section (.pin-section) hits the middle of the view port. This section is pinned for the same amount of pixels as the section height using end: () => "+=" + document.querySelector('.pin-section').offsetHeight During this pinning I have a star that basically keeps scrolling so the user knows to still scroll. This is done by using the .pin-section element as the trigger again and using the end: () => "+=" + document.querySelector('.pin-section').offsetHeight as the end value once again. As well as the simplified CodePen demo, I've also uploaded the page to a subdomain here: https://ia.inset.agency/production/ The issue I have is if I re-size or refresh the window after the animation has been triggered it breaks the animation. Note: The problem on the simplified CodePen version seems to happen if you resize the window when the animation is in-between the 'start' and 'end' markers, on the actual site link it seems to happen after the 'end' marker, but it's essentially the same thing happening each time. Also on the CodePen example it only happens on resize because when you refresh CodePen it seems to reset all of the positioning. Any help would be really awesome. // pin section in middle of screen var pinMiddle = gsap.timeline({scrollTrigger: { trigger: ".pin-section", start: "50% 50%", toggleActions: "restart pause reverse pause", end: () => "+=" + document.querySelector('.pin-section').offsetHeight, pin: true, markers: true }}) // parallax star var prodStar = gsap.timeline({ scrollTrigger: { trigger: '.pin-section', toggleActions: "restart pause reverse pause", start: '50% 50%', end: () => "+=" + document.querySelector('.pin-section').offsetHeight, scrub: true, markers: true } }) prodStar.to('.parallax-star', {y: -250})

Greetings everyone, I hope you have a wonderful day. I came up with a couple of issues trying to make my (very first) GSAP-based website, and I'm lost at sea. I want to apologize if my method are wrongs, and I'd gladly hear from you guys if you have any advice on to how you'd tackle this puzzle. First of all, I needed my sections to be pinned in place. For this, I looped in my containers and created a scrollTrigger for each of them, and took some extra room for the end, based to the initial height of the elements (100vh). It was mainly to give some time for the next container to get pinned before the first one would go away. for (let i = 0; i < containerArray.length; i++) { ScrollTrigger.create({ trigger: containerArray[i], pin: containerArray[i], pinSpacing: false, id: "pin"+containerArray[i], start: 'top top', end: '150% top', markers: true }); } One of my issue for this first part is, my first section is scrollable for 125% of the height of the viewport (which works as intended coded like that), but my other sections are scrollable for only 100% (because it's also how my code should work). Is there a better method to overlap sections while keeping the scrollable height identical and logical based on the height of the elements ? ----------------------------------- Onto the next part, that's probably where I started to make many mistakes. Now that I had a window in which both my current and next containers were on screen and pinned, I needed to insert a scrollTrigger between the moment the next container was pinned, and the current container was unpinned to trigger my animations. So I created an other scrollTrigger for each inner section, with a start and end value of 125% (which is 25% below the moment the next container is pinned, and 25% above the current container is unpinned. Used this method mainly to ensure the animation plays after the next container is in place and before the current container goes away.) For those specific scrollTriggers, and with the onLeave and onEnterBack methods, I add and remove a couple of classes, mainly to prevent sections to overlap even if they are hidden and keep allowing users to interact with the visible section (classes active / inactive) and changing the BG color of the body (to match the sections color). And after all that, I added my animation in the timeline. for (let i = 0; i < sectionArray.length; i++) { let tl = gsap.timeline({ scrollTrigger: { trigger: sectionArray[i], toggleActions: "restart none reverse none", start: '125% top', end: '125% top', id: 'animate '+containerArray[i]+" & "+containerArray[i+1], markers: true, onLeave: () => { document.querySelector(containerArray[i]).classList.add("inactive"); document.querySelector(containerArray[i]).classList.remove("active"); if(bgColor[i+1]){ document.querySelector("body").classList.add(bgColor[i+1]); document.querySelector("body").classList.remove(bgColor[i]); document.querySelector(containerArray[i+1]).classList.add("active"); document.querySelector(containerArray[i+1]).classList.remove("inactive"); } }, onEnterBack: () => { document.querySelector(containerArray[i]).classList.add("active"); document.querySelector(containerArray[i]).classList.remove("inactive"); if(bgColor[i+1]){ document.querySelector("body").classList.add(bgColor[i]); document.querySelector("body").classList.remove(bgColor[i+1]); document.querySelector(containerArray[i+1]).classList.remove("active"); document.querySelector(containerArray[i+1]).classList.add("inactive"); } } } }); //Animation that should happen right in between the pin of next container, //and the unpin of current container if(containerArray[i+1] !== "undefined") { tl.to(sectionArray[i], { alpha: 0, duration: 0.2 }) tl.from(sectionArray[i+1], { alpha: 0, duration: 0.2 }) } } It somehow works, but only if no resize is done and if we scroll slowly. When I resize, it seems to display wrong things (despite the scrollbar not moving at all since it's mainly opening the console and resizing horizontally?) and I have no idea how to resolve that. When I scroll too fast, the same thing happens. But I thing I know where it comes from. Probably from the fact each section has a scrollTrigger bound to said section, and the one after it (called with [i] and [i+1]), which means triggering multiple scrollTrigger at the same time basically asks for the same section to be animated "to" alpha 0 and "from" alpha 0 at the same time, but I have no idea how to fix that... I also can't seem to prevent the last scrollTrigger to appear, but that's probably just me being too deep into it that I can't find the solution that is right under my nose, haha ! I hope my code isn't a mess, I hope I've been clear enough for you to be able to give me some guidance. Thanks for reading, and have a good day ! Nelou.

Hello community! So here's the thing: I have a window.resize event where I apply a state as true or false based on the screen size to hide and show elements. However, when I resize the window, the ScrollTrigger doesn't retrigger. I'm using React with Locomotive Scroll. During the resize event, I destroy (if that's the right logic) all the ScrollTriggers, then I do a ScrollTrigger.refresh(). My ScrollTriggers have invalidateOnRefresh: true, but nothing seems to work. So, I'm lost. If you need a minimal demo without issues, I can provide one. Thanks.

Hi all! I have a problem with the scrolltrigger after the window resize. Here is a video https://www.loom.com/share/1a45fd9960df45a2a304605174d0fdf7 What I'm doing wrong? The code in codepen.io is exactly the same as on the live page but live doesn't work .... I'm lost https://www-andweekly-com.sandbox.hs-sites.com/gsap-scroll-test Any ideas?

Something wrong with titles on resize. Please see sample: https://codepen.io/Lenspre/pen/zYbgLLL

Hi all, I am having an issue where the scrollTrigger horizontal container animation works fine on all screen sizes, but if a resize occurs the panels will disappear from the window. Which on my page doesn't look so great as the viewer gets to see all the elements and backgrounds behind it. Ive seen this issue mentioned once or twice in other forums, but I have not seen anyone openly show a solution. I been banging away at it for the past few days with lots of different resize event linked function attempts without any luck. The demo is very minimal & in my site I am using a custom scroller on the main element of my page which I am not in this demo. Although in the demo I have managed to recreate the issue pretty much spot on to what I'm getting in my page. When resizing occurs before or after the container and has started its animation, no problems. but if you resize the window once the animation starts., panels disappear from view. If anyone with a better mind than mine (which I'm sure there are lots out there) could please take a look and advise on a solution I'd be really grateful. I very much like the horizontal container animation and think it has loads of potential for lots of developers out there. Its just this resizing issue that's stopping it from being a complete gamechanger. Thanks again and best regards James

Hello, I am using Scrolltrigger to animate several elements of my project. Everything works fine until I resize the window. I am already using ScrollTrigger.refresh(); everytime any element can potentially modify my flow, it still not working. I suppose my problem is caused by a custom container I am using as scroller to avoid the weird resizing on mobile browsers, I wrapped my content on and it works fine. But still thought the markers are not being updated when i resize the window. ScrollTrigger.defaults({ scroller: "#scrollable-container", }); Here is one example animation: function manageScrollAnimations() { //// CHANGE ANIMATION OPACITY ON SCROLL const contentRows = document.querySelectorAll(".has-animation"); contentRows.forEach((row, index) => { const animation = row.querySelector(".animation"); if (index !== 0 && index !== contentRows.length - 1) { animation.classList.add("invisible"); } ScrollTrigger.refresh(); ScrollTrigger.create({ trigger: row, start: "top center", end: `bottom center`, onEnter: () => { animation.classList.remove("invisible"); }, onLeave: () => { if (index !== contentRows.length - 1) { animation.classList.add("invisible"); } }, onEnterBack: () => { animation.classList.remove("invisible"); }, onLeaveBack: () => { if (index !== 0 && index !== contentRows.length - 1) { animation.classList.add("invisible"); } }, markers: true, scrub: true, }); }); //// resize window.addEventListener("resize", handleResize); function handleResize() { manageTopBarTextAnimations(); positionAnimatedWords(); updateTopBarHeight(); resizeAnimationWrappers(); manageScrollAnimations(); ScrollTrigger.refresh(); } I am kind of running out of options. I read something about ScrollTrigger.scrollerProxy, that (maybe) can solve my problem (not sure), but I could not understand how to implement it. I also used a eventListener, it logs and still thought the markers nothing. ScrollTrigger.addEventListener("refresh", function () { console.log("Refreshed"); }); Here is the link of the project, as a code pen would not serve the issue. http://kunden.brueckner.studio/frankwords/ Any thoughts about what can be wrong? Thanks a lot ✨

codesandbox link: https://codesandbox.io/p/devbox/swing-6ljdq5?file=%2Fapp%2Fswing.tsx%3A178%2C24 full page view: https://6ljdq5-3001.csb.app/ (React.js, Next.js) Hello!. I have this code dynamically generates random sized/positioned images on the screen, ensuring they don't overlap. The swing animation is achieved using GSAP's MotionPath plugin. Swing motion is based on image width (vw). When the window is resized, the component re-renders, so that the positions and sizes of the images are recalculated and stay responsive. * But then it starts to jump in the swing motion in the images. What could be the problem? Secondly, do you think I am using gsap correctly for swing and mouse-move animations. What to improve, any tips?

Hi everyone, I am trying to animate a text element to dynamically fit the horizontal dimensions of the browser window using the fitText function and GSAP. However, I've encountered an issue where, upon resizing the browser, the initial font size briefly adjusts but then reverts to its original size. Despite few days of troubleshooting, I haven't found a solution. The font size fails to update promptly during resizing and only aligns correctly with the screen dimensions after a manual page refresh. Here I am trying to update the font-size --> fontSize: initialFontSize Font resize issue (codepen.io) Your guidance would be greatly appreciated.

We are using ScrollSmoother. But when we resize the browser window sometimes we are getting stuck in ScrollSmoother window.. Looks like the fake scroll function is broken. After resizing it is solved. Is this a known issue? See video to see what happens:

Hi all, when I resize the window, the animation doesn't work anymore. I tried to get this animation work on resizing the window with updating the values on resize but nothing works. Is there someone who can tell me the secret?

Hi everyone, I am wondering how i could tell an animation that uses the MotionPathPlugin to update its path after the window is resized. After some searching I have found that the suggested method is to kill and reinit the animation (like in the demo). In my case that causes a lot of overhead because I have a lot of animations (that might be nested) that are all relative transforms based on EM except for the motion paths that only accepts / translates to pixel values. Is it possible to only tell the animations that use the MotionPathPlugin to get their new path by reading the resized SVG or by suppling a new path (array, string, etc.)? Thanks in advance.

Hi! I've been getting aquatinted with GSAP over the last couple of days (really loving it). I have successfully created the scroll triggered effects that I need – one for desktop & a second for mobile screens. As I said both are working correctly on their respective screens, however if you resize the window down past mobile breakpoint the "pin spacer" container div is double the size it should be & obvs everything is broken (after reloading the window it works again as you would expect). As stated I'm new to GSAP so I'm assuming I making a rookie mistake but I can't seem to figure out what it be. I have successfully replicated the issue on stackblitz. Any suggestions on how I might resolve this would be greatly appreciated, cheers!! https://stackblitz.com/edit/stackblitz-starters-vpso1o?file=components%2FThreePoints%2Findex.jsx