Search the Community

Hi there, hope anyone reading had a great Easter! I've a grid where lines animate in on the horizontal and vertical. Just learnt about the getProperty method... so simple! https://codepen.io/matt-rudd/pen/LYgVomN What I've not managed to grasp after researching and trawling the forum is how best to apply a window resize event so that if the user resizes the window, the gridWidth and gridHeight update accordingly - to rematch the length of lines with the size of the grid object. I guess there are a few options, in theory: A way of animating the lines down in length to match the smaller grid after window resize An instant 'snapping' of the line sizes down to match the smaller grid after window resize A complete reload of the timeline to redraw the grid after window resize The first option is the dream ? Think I've got half-way to getting my head around GSAP modifiers and a window resize function, but I'm not quite sure how to stitch it all together for my use case. *** EDIT - Just realised there's the further complication of managing the lines of the smaller grid after grid-template columns have shifted! Thanks in advance!

I have a problem with calculating the correct end value to scrollTrigger after a screen resize. On the initial page load the trigger end value is correct but after trying to create the scrollTrigger again with the new values, the pin breaks. I have tried kill() and create() the scrollTrigger again and making sure that the values are calculated before initializing the scrollTrigger again but nothing seems to work. I logged the end value of the scrollTrigger after calculating and the value does update, but why is the value wrong if it is correct on the initial load? This led to wrapping the ScrollTrigger.create() inside a setTimeout but it had no effect either. Here's a simple demo of the issue: https://codesandbox.io/s/kind-waterfall-wkd5bj?file=/pages/index.vue In the actual project I'm using VW as a base font-size so thats why the box is set to the unit as well so it demonstrates the original project better.

Good afternoon. When resizing, the position of the elements is not updated. Items appear in reverse order. In this video, at first the elements move as needed, then when the window width changes, they begin to overlap each other, but I wanted them to also take their initial position https://ru.files.fm/u/5xfqt7wm5

What is the correct way to resize Flip?

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.

Please help me figure it out. If you scroll to the end of the page and resize the page, the start positions of the timeline are determined incorrectly.

Hello Forum, I try to create animation only for larger screen. I animate the y position of the box. However, after the window resize the box seems to be out of position. I am creating a website that use similar animation. In my case, the image either wont show up or out of place. Thanks in advance people!

Hey everyone! I would like to prevent the Scrolltrigger from playing each the time the window is resized; basically, I just want each heading to be played once and never again (except or a full page refresh). I'm aware that a normal tween might've been a better solution for what I'm trying to achieve, but I'm rolling with it for now. Rory

Hello, I am trying to create a horizontal scroller with drag interaction. the images are in all different shapes and sizes, I have two issues currently I'm not sure how to resolve. Note: The example is based on code I have in nextjs. The styling of the example is not exact to what I have in there, really they should be a percentage of the .image div. but was not able to get the exact styling. Still the issues below persist so hopefully its not to do with the css.... 1) Dragging to the end of the images goes outside of the range. How might I bound this properly? I have tried to use `bound: gallery` and scroller to no avail. 2) Resizing the window will screw around with the scroller and i am unable to get from beginning to the end of the full list of images. 3) Bonus - I would love to also get snapping involved on the images so that any images upon dragging will get centred on the screen. Would really appreciate some help with this. Many thanks in advance

Hi there, I am wondering if there's a way to make ScrollSmoother work with the iOS Safari resize trick here https://greensock.com/docs/v3/HelperFunctions#scrollResize I noticed ScrollSmoother adds a height to the body which is how the scrolling works I assume? But in my case I am wanting to change the scrolling window to be a custom div on mobile to prevent the browser resize from occuring. I have tried normalizeScroll but it's not so performant for our use case so was want to do the old school way. In something like Lenis, you can decide the wrapper which has the overflow so it's pretty simple to choose what the target div is to scroll on. In the attached Codepen, I have it set up to use the custom div by default, but in practise I will be using ScrollTrigger.isTouch to be able to use work out whether it is a touch device or not to use the default set up or the custom div set up. If anyone can shed some light on this it would be much appreciated. Thanks in advance. Jack

I've found similar problems on the forum and suspect it may have to with "refresh" and saving/applying progress. But maybe its something simpler? Im my codepen, observe what happens when scrolled somewhere in the middle of the page and resizing the window. The content jumps around or disappears. Pinspacing seems to recalculate incorrectly.

I'm trying to implement a complex animation, that should be animated on scroll before the page starts scrolling. The timeline should look like this, when users start scrolling: 1) Increase the size of the background image, and at the same time, move each line of the headline to either side. 2) Once the first part of the animation is complete, increase the size of the hidden SVG to 50% 3) Keep increasing the size, and move it to the bottom/right of the section I managed to get the animation exactly how I wanted, however I noticed now that this setup breaks the page after resize. After some resize events (the further and quicker the resize is, the more it likely it happens), it won't recalculate the height of the page (at least not correct), and the Slick-Slider does not resize until toggled. I'm quite sure it is caused by pinning the container. If I don't pin the container, I cannot recreate this behaviour. But how else can I prevent the page from scrolling until the animation is complete? Bonus question: It's not the first time my beloved slick slider causes problems when on the same site as my GSAP-animations. Can anyone recommend a slider plugin that plays well with GSAP, or would it be possible/more sensible to build sliders, using GSAP?

Hello everyone, I have a little motionpath plugin problem on my website. So if you scroll down to planets section, you will see that each planet moving through his own path. The problem is, when i refresh the page on the same section planets position is not correct. I will provide screenshots. Also, when i resize the page i have the same issue. Is there any way to stick each planet to his own path? Thanks

I'm trying to make a super simple behaviour and found that Chrome is breaking ScrollTrigger scrub revert positioning on maximize / some resizing. Everything looks perfect in Codepen, but when I launch it from Webstorm and view it on Chrome, resize, and especially maximize, causes crazy behaviours like remembering the wrong initial values, etc. Sometimes the values are so off the element disappears. I've tried everything from ScrollTrigger.clearMemory() to invalidateOnRefresh, added a 500ms setTimeout to the resize (I've tried without), removing the initial CSS transforms and using a gsap.set at the beginning of my useEffect, using a .fromTo() with the initial transform in the from var, and any combination of the above through exhaustive googling for 2 days now. The only thing I can do is to window.location.reload() on resize which totally works but I'm not really sure if that's the best way forward here because I wonder if that will just completely mess with iOS as I heard it calls resizing on just a normal scroll (I don't own an iPhone). I know it's weird to troubleshoot since Codepen works, but if someone could send me in the right direction, or kindly take the time to verify this outside of Codepen and let me know I'm not crazy?

Hello I'm sure this will be something fairly straightforward that I've missed but have come up against it a couple of times before. I'm pinning elements on scroll but on window resize the start triggers aren't recalculated to the new screen dimensions so end up off screen/overlapping with other pins. Any thoughts? Thanks in advance

I am trying to fix a title until it reaches the section below. It all works fine unless I resize the window which can change the height of the title (if it goes onto more lines) and so the end position is now wrong. I am using the title height in order to position it correctly : var titleHeight = document.querySelector(".project-title").offsetHeight; Inside scrolltrigger: end: "top bottom-=" + titleHeight, How can I update the titleHeight on browser resize ? or is there another way to set this value dynamically during the scroll so it always checking what the current height is?

Hi all I seem to completely stuck on what I hope is a trival mistake/issue on my behalf, but I cannot seem to resolve so any help would be greatly appreciated! Some context... I am building a site with Nuxt 2 + GSAP and working on a simple scroll interaction on the home page. It can be broken into a few small steps to help illustrate the desired outcome: A full-page splash component (logo loading animation) is `positioned: fixed; z-index: -1;` at the top of the page The inner page content is then transformed down by `transform: translate3d(0, 100vh, 0)` and on close of the splash is transformed back up to simulate a parallax effect over the splash page Then, nested inside the inner page content there are three 100vh full-bleed image sticky sections (with nested headline etc) that have predefined `width: 100%'; height: 100vh; position: sticky; top: 0;` styles making them overlap on scroll. We are then using a scrollTrigger to animate the headline and images to show and reveal on scroll i.e. hide first image when next image reaches the top (and should probably be using pinning for the sticky sections?!). My issue is that on first render/load the markers are positioned incorrectly and then work perfectly on window resize or returning to route. I seem to have determined this due to the translate set on the parent container on load (when the splash is active). I have been able to reproduce the issue in a minimal Nuxt 2 + GSAP repo here: https://stackblitz.com/edit/nuxt-starter-qp4xkc?file=pages/index.vue From what I have read in other issues, calling `ScrollTrigger.refresh()` once we know the DOM is ready and/or when the splash transition is complete, should recalculate the scrollTriggers but testing refresh hasn't resolved the issue. Nesting the `ScrollTrigger.refresh()` inside a `setTimeout()` to wait for the splash transition to end works inconsistently and doesn't feel like a production safe solution? I have also tried changing the CSS on the parent i.e. pushing down the content down using padding or margins instead of translating but the issue persists. I know from experience that's always best to go all GSAP and not mix elements with CSS (i.e. the sticky panels) but I just can't seem to get it to work.. Hoping I just have some logic mixed up and would appreciate any guidance!

Hello guys, I'm new to GSAP On my page I have I have a few sections I resize the height of the first section immediately after the page load using gsap.to The subsequent section have scroll triggers. However the start and end of each section is still based on the values before the resize of the initial element I believe I need to use ScrollTrigger.refresh() to recalculate, but I'm not sure where to put it, see my codepen example Any help would be appreciated...

Hello, I'm trying out MotionPathPlugin and got it working pretty well. The only problem I'm having is that when I resize the window, the gsap path doesn't adjust (though the SVG path does). My example: https://gsap-svg-motion-path-2c092395cde6d4a702.webflow.io/ Example I want to achieve: https://codepen.io/GreenSock/pen/LwzMKL I could write function to reset the tween on window resize event but don't see anything like that in the "example I want to achieve" codepen. Am I missing something? Thanks! Keegan

What's the best way to update gsap scrolltriggers if the page has size changes? Problem: I have a site in nuxt.js 2 and animations with gsap scrolltrigger. The problem is that on the site there is an "FAQ" section with collapsing bootstrap cards (typical question-answer). If you open one of these cards, the height of the DOM page obviously becomes greater and if you continue to scroll the site the scrolltrigger animations will be triggered on the height of the old DOM (not updated with the height of the open card). Solution I found but I don't like: Detect the click on the FAQ card, it takes about 200ms to open and I put a method that after clicking on the card, with a setTimeout waits 210ms and then updates with scrolltrigger.refresh() I was wondering if there was a better best practice...

Hello Greensock team, I want to report a bug where an element that gets animated and has the clip-path property set to a value containing a viewport unit (vw in this case), gets that value translated into pixel and set as an inline style, overwriting the original style (I don't know why that is necessary but I'm sure there's some reasoning behind this behavior). By itself there is no problem with that but if I resize my screen now (try changing the width of the window in the demo), the size of the circle doesn't change anymore since it's radius got converted from vw to px. Is there any way you could fix this? Thank you for your time Leon

Hello ? I've got to the point where I'm struggling to work out the answer on my own so am reaching out to the experts here. The problem Using a pinned section with Scrolltrigger in a React/Next application, I would like to apply some interactions but only on the desktop. What I'm finding is that on occasion when switching from mobile to desktop views sometimes the styles applied remain on the elements, causing some missing elements. I've used the one of the ScrollTrigger examples as a base for this. Steps to replicate the issue I'm seeing Viewing the site in mobile mode quickly increase the width to desktop size ~ > 768 and then back down to mobile. The text opacity is set but is then not removed unless I refresh the page. If I do it slowly Alternatively if I start on mobile and then increase to desktop and scroll down the text overlaps each version. https://4urh6t.csb.app/ What I'm looking to do Remove the inline styles applied when on mobile, or when viewed at a minimum height Retrigger the animation when going back to the desktop Currently the existing ones sometimes overlap, I'm assuming it's related to the height Correctly set the height of the scroll trigger Setting an aspect ratio - didn't appear to work I'm currently using a ref and then getting the offsetHeight This causes problems when used in a UseEffect, which makes sense because of the scrollTrigger pin, but I don't fully understand Using a minimum screen height can work, if I can remove the extra styles What I've tried to implement: Using gsap.matchMedia function to apply the effects only to desktop, through both conditions and media queries Applying clearProps: "all" within the gsap.matchMedia.add function. This appears to be deprecated now Using a resize listener event to kill the Scroll trigger with ScrollTrigger.KillAll(); Using SaveStyles in the older ScrollTrigger.MatchMedia Aware this one is deprecated now Calling ScrollTrigger.refresh in an Event listener on resize. I've been reading quite a lot of the forum this week but lots of the advice appears to be for older versions. Can someone help point me in the correct location please Here is a reduced version of the code, please let me know if it's too complicated I've tried to take out all the extra transitions and logic but it may still be a little too heavy. (I'm sorry it's using tailwind) Thank you in advance for any guidance https://codesandbox.io/s/scroll-trigger-react-panels-forked-4urh6t?file=/src/App.js

Hey there, I can seem to figure out how to make this responsive. It only works if resize then refresh the page. Any help would be greatly appreciated :)

Hi guys I'm new to gsap so if the question is trivial forgive me. I am using gsap for a nuxt project. I integrated some animations using the code found in the codepen I linked. But there is a small bug. If the page is resized (for example with card collapse for FAQ), the animation works badly and does not refresh with the new x and y positions of the elements.

Hey! I'm currently working on a client website in Elementar for them to customise their content later on. I have to get the big star shown in the screenshot to animate down where the smaller blue star is and resize it at the same time. When scrolling the star has to change its position - resize - and stay as a fixed item. So that I can remove the second smaller one at the bottom of the page. The star will be a fixed position image which will open a pop up when clicked at the bottom of the page. I may be able to do all that with ScrollTrigger but I just can't seem to figure out how unfortunately Thank you in advance for the help! for anyone maybe needing the link here it is