Search the Community

I created a custom scrollbar with this setup: - lenis for smooth scroll - a few lines of css to hide default scrollbar - GSAP scrollTrigger to sync the thumb position with the scroll position - GSAP Draggable to enable scroll by dragging the thumb It works great, but if I resize the window (so that the height changes) it does not work anymore. My idea was to kill the scrollTween and the reinitiate it on window resize, but it doesn't seem to work. Sometimes it does on first resize but then if you keep resizing it starts messing up. Only thing that works is that the thumb height is properly resized IMPORTANT: To see the problem I'm trying to point, open the codepen and try resizing the window a couple times, then try to scroll up and down the whole page

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

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

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.

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 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 ✨

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

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! 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

Hi! I'm making a sort of navigation bar for a website but I'm having some issues when resizing the window with the SVG bugging out. Is their any way to update scrollTrigger after resize? I've tried multiple things I've learned here in the forums but nothing seems to work. Thanks!

I'm struggling a bit with matchMedia + ScrollTrigger. I've been battling this for about 6 hours now and have commented out parts of the website piece by piece to narrow down the issue(s). For some reason - (if it's above the min-width I've set) the scrolltrigger / animation works as intended. When I resize the browser below the matchmedia width, scroll trigger shuts off correctly, but when I resize it back, scrolltrigger ceases to work. It just ends up stuck in place and the "onUpdate" callback never gets fired. I've commented out chunks of html unrelated to the component using scrolltrigger, I've also commented out the mediaqueries that modify the component design (when the scrolltrigger should be disabled based on the media query). It works with these parts commented out, but when I add them back in, it stops. Without the matchmedia function, it continues to work while I shrink and expand the browser window. ---- I am still new to gsap, so I am wondering if there is anything obvious I am missing and/or should be looking for. Or -- if anyone has experienced this type of issue before. I know you will want to see a simplified working demo, but there are so many parts I have found that cause it to "stop" working, I am not sure how to reduce it -- so, I figured i'd start with general feedback/recommendations. Here is the scrolltrigger code with matchmedia: /** * * Content Block * - A left/right content block + image or video * **/ 'use client'; import Config from '@/config'; import Image from '@/modules/image'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { useState, useLayoutEffect, useRef } from 'react'; //Load Module gsap.registerPlugin(ScrollTrigger); //Build the Element export default function ContentBlock( props ){ let creative = '', content = [], classes = ['block','container'], ref = useRef(); //Set a Default Direction if( !props.direction ) props.direction = 'left'; //Allow it to be changed if( props.direction && ['left','right'].indexOf( props.direction ) > -1 ) classes.push( props.direction ); //Image if( props.image ) creative = ( <div className="image creative"> <Image { ...props.image } /> </div> ); //Video if( props.video ) creative = ( <div className="video creative"> <iframe { ...props.video } /> </div> ); //Title if( props.content.title ) content.push( <header key={ props.id + '-header' }> <h2 dangerouslySetInnerHTML={{ __html: props.content.title }} /> </header> ); //Body if( props.content.body ) content.push( <div key={ props.id + '-body' } dangerouslySetInnerHTML={{ __html: props.content.body }} /> ); //Buttons if( props.content.buttons ) content.push( <div className="buttons" key={ props.id + '-buttons' }> { props.content.buttons } </div> ); //On Mount useLayoutEffect(() => { //If this block doesn't have animation, just return if( !props.animate ) return; //Prepare let mm = gsap.matchMedia(), animations = [{ selector: '.creative', from: { yPercent: 5 }, to: { yPercent: -5 }, },{ selector: '.content', from: { xPercent: 1 }, to: { xPercent: -1 }, }]; // mm.add('(min-width: 1100px)', context => { //The Container let $container = ref.current; //Loop through animations.forEach( ({ selector , from , to }) => { //Prepare timeline let timeline = gsap.timeline({ scrollTrigger: { trigger: $container, invalidateOnRefresh: true, markers: true, scrub: true, start: 'top center', end: () => "+=" + $container.offsetHeight } }); //Initiate timeline.fromTo( selector , from , to ); }); }, ref); return () => mm.revert(); },[]); //Return return ( <section id={ props.id } key={ props.id } ref={ ref } className={ classes.join(' ') }> <div> { creative } <div className="content"> <div> { content } </div> </div> </div> </section> ); } Appreciate anyone's help!

I have 3 items that are displayed horizontally when the screen width is above 769px and vertically when under. They are supposed to move right when displayed vertically and up when displayed horizontally The problem that I am facing is that if i scroll until the boxes are out of view/animation is finished while the device width is under 769px and then size up the window and size it back down under the breakpoint the animation is stuck. Also the other way around doesn't work either I have built a similar minimal demo and i have the same issue: https://stackblitz.com/edit/react-1c228f?file=src%2FApp.js