Search the Community

Hi! Im currently trying to get an animation to move to the center of the screen like so: gsap.to(animation, { x: window.innerWidth / 2, y: window.innerHeight / 2 }); However, when resizing the window mid animation... The to end position is not updated (this is what I expect to happen, I understand tweenTo vars are registered at the begining of the animation and arent updated mid animation). What would be the correct approach for the animation to update this value correctly? I was thinking of just setting (gsap.set()) the position on an updateTo callback within the tweenToVars but that just seems like doing all the work. Is there another solution?

<script setup> import { ref, onMounted } from "vue"; import axios from "~/services/axios.js"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { CheckBadgeIcon } from "@heroicons/vue/24/solid"; // import { CheckCircle } from '@vue-icons/heroicons'; import paint from "../../assets/images/paint.jpg"; import t1 from "../../assets/images/true/t1.jpg"; import t2 from "../../assets/images/true/t2.jpg"; import t3 from "../../assets/images/true/t3.jpg"; import t4 from "../../assets/images/true/t4.jpg"; import t5 from "../../assets/images/true/t5.jpg"; import t6 from "../../assets/images/true/t6.jpg"; gsap.registerPlugin(ScrollTrigger); const data = [ { image: t1, text: "amjad" }, { image: t2, text: "amjad" }, { image: t3, text: "amjad" }, { image: t6, text: "amjad" }, { image: t4, text: "amjad" }, { image: t5, text: "amjad" }, ]; const initAnimation = () => { const section_2 = document.getElementById("horizontal"); let box_items = gsap.utils.toArray(".horizontal__item"); gsap.fromTo( box_items, { xPercent: 30 * (box_items.length - 1), }, { xPercent: -120 * (box_items.length - 1), ease: "sine.out", // duration: 5, scrollTrigger: { trigger: section_2, pin: true, scrub: 1, // markers: true, snap: 1 / (box_items.length - 1), end: "+=" + section_2.offsetWidth, toggleActions: "restart pause reverse reverse", }, } ); }; let scrollTriggerInstance; const features = ref([]); const featuresFor = ref([]); const error = ref(null); const isLoading = ref(false); onMounted(() => { // fetchChoicesData(); window.addEventListener("resize", () => { ScrollTrigger.refresh(); }); const handleResize = () => { if (window.innerWidth <= 800 && scrollTriggerInstance) { // Kill the ScrollTrigger instance and animation if screen size is less than or equal to 800px ScrollTrigger.refresh(); scrollTriggerInstance.kill(); scrollTriggerInstance = null; } else if (window.innerWidth > 800 && !scrollTriggerInstance) { // Initialize the animation if screen size is more than 800px ScrollTrigger.refresh(); scrollTriggerInstance = initAnimation(); } }; if (window.innerWidth > 800) { scrollTriggerInstance = initAnimation(); } window.addEventListener("resize", handleResize); }); ScrollTrigger.refresh(); </script> <template> <div class="w-full"> <h1 class="text-white text-[3rem] sm:text-[5.5rem] leading-[5rem] font-[600] mb-[2.2rem] ">Pracht <br> Abonnement</h1> <div id="horizontal" class="horizontal w-full big:h-[100vh] big:overflow-hidden big:px-0 px-[1.5rem] py-[1rem] gap-[4rem] grid grid-rows-my-features big:pb-0 pb-[8rem] relative" > <div class="w-full sm:px-[5rem] xl:px-[14rem] h-max grid justify-items-center gap-[1rem] sm:gap-[10rem] sm:grid-cols-2" > <div class="w-max h-max gap-[1rem] sm:gap-[2rem] grid justify-items-start"> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Maandeliks Betalen</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">100% Garantie</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Professioneel Schilderwerk</h1> </div> </div> <div class="w-max h-max gap-[1rem] sm:gap-[2rem] grid justify-items-start"> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Zorgeloos onderhoud</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Reiging & Glasbewassing</h1> </div> <div class="container-tick" > <CheckBadgeIcon class="icon__tick" /> <h1 class="text__tick">Ondafhankelike inspectie</h1> </div> </div> </div> <div class="container row-span-2 w-[100%] h-full m-auto"> <div class="horizontal__content h-full big:grid-flow-col grid gap-y-[4rem]"> <div v-for="num in data" :key="num" class="horizontal__item big:h-[60%] big:w-[28rem] h-[20rem] sm:h-[30rem] w-full mr-[10rem]" > <div class="horizontal__num w-full h-full relative"> <img :src="num.image" class="w-full h-full object-cover" alt="" /> </div> </div> </div> </div> </div> </div> </template> <style scoped> .text__tick { @apply text-white text-[1rem] sm:text-[1.4rem]; } .icon__tick { @apply text-[#f598af] text-[1.8rem] w-[2.2rem] h-[2.2rem]; } .container-tick { @apply grid grid-cols-my-calc grid-flow-col items-center text-left justify-items-start gap-[.7rem]; } </style>

https://stackblitzstartersnkxswz-m4jx--3000--09144545.local-corp.webcontainer.io/ Hi there! I have made a minimal demo demonstrating the issue I'm having. I'm attempting to move a circle from its position at the top of the page to the position of a square further down below some text. The circle reaches the target fine, however whenever I resize the window the main containers height changes causing the circle to jump out of alignment. How can I prevent the circle from moving up and down during the animation on window resize? I've tried using invalidateOnRefresh and functional values hoping these would help reset the circles position. Using these does update the scrolltrigger end marker, however the content still moves. I'm wondering if this due to the way I have structured the code and the css using absolutely positioned divs? I want to keep the text responsive, without resorting to a fixed width container. I'm new to gsap and loving it so far. Any help would be greatly appreciated! Look forward to hearing from you.

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 there, I'm having some issues with the trigger positions after resizing and am not sure if I'm doing this correctly. As you can see in this demo the start and stop positions are off once I resize from desktop to mobile. Actually in my project the positions are off for both desktop and mobile during resize but unfortunately I couldn't replicate that in the demo. Maybe I can get some sort of direction here. Thanks to all of you hardworking geniuses for this awesome tool !

Hi there, I'm working on a drag and drop interface where dropped elements align to areas on a grid. My issue is that currently when the viewport is resized, the dropped elements become misaligned with the grid area. I've experimented with adding a ResizeObserver to trigger a change when the screen is resized but I've not yet been able to figure out how to update the dropped icons so that they move relative to the viewport. Is there a recommended way to do this with GSAP? Any tips much appreciated

For pinned elements the width does not adjust during resize because both the element and the pin-spacer container therefore work with max-width. if I work with both width: 100% !important; and min-width: 100% !important; it works. Is there a build-in solution for this? PS: Is not my CodePen demo, but with the blue bar the problem is good to see

Hi everyone, I came across a horizontal scroll solution made by GSAP's Cassie that features a pausing effect on each horizontal scroll item. On initial page load this works perfectly! However when the window is resized, the effect is broken. If you look at the Codepen, there are two values that need be updated. container.offsetWidth, and the variable increment. From my understanding having 'invalidateOnRefresh: true' should update the container value, but it doesn't seem to be. The increment variable uses the container value as well so it is also not updating. Is anyone able to take a look and see what it would take to make it responsive? Hopefully it is a relatively easy fix. Thank you

Apologies for the codepen not working, it is a page transition I am using. The project is using Nuxt 2 with the nuxt-gsap-module package. I have a Loader between pages which is a very simple GSAP animation that uses xPercent to move to and from the starting positions. Say for example, the page is 1920px in width. The first translate value of the animation is around 2600px, which looks and works totally fine. But, if I change the screensize to 1000px, the 2600px value remains. If I then refresh, the value becaomes 1600px for example, so it takes a refresh to refresh the value of the xPercent. I would like it so that when the user changes their screensize, the end output value for xPercent updates also. My code is not working, anybody got any suggestions? I have tried using this.timeline.invalidate(), and also killing the timeline on screen resize but nothing seems to work.

Hey folks, I'm currently stuck on an implementation detail with the scrollTrigger. What I want to do: 1. Text size decreases when scrolling down, and increases when scrolling up. 2. Text size start and end values depend on viewport width (mobile, tablet ( from 768px), desktop (from 1440px)) 3. Text size (initial and end size) gets recalculated and refreshed when viewport size changes and goes from one viewport zone into another (for ex. desktop -> tablet) What I have: 1. Works 2. Works 3. Does not work. I tried to implement this functionality with a combination of - { fontSize: () => initialFontSize } - invalidateOnRefresh: true - window.addEventListener("resize", function () { ... ScrollTrigger.refresh(); }); I've tried various versions of this combination but did not succeed. I am grateful for any hints :) I tried to simplify it and put it in a codepen (attached). Tobi

Hello everyone, I'm looking for the right way to use the animation feature with ScrollTrigger and scrub option. I made a little demo. I modify the css:top value of #nav on scroll. The starting value is variable (#intro's height), and the ending value is fixed. Everything went well until I resized the page in height. The trigger seems to notice the height change (#intro's height), but the position returns to the first value after the resize. This only happens when I resize the page in height, and the position of #nav is at the start of the animation. So I suppose that the starting value is kept somewhere... Sorry if it's a stupid question ? Any help would be welcome. THANKS !

Hi there! In my project (see the attached CodePen), I've designed a progress bar that moves through multiple sections. As you scroll in and out of each section, the progress bar adjusts to a specific percentage. This works as expected unless you resize the screen after scrolling down. If you scroll back up to the top after resizing, the progress bar does not reset to zero as it should. Instead, it displays some other percentage. I've tried adding the "invalidateOnRefresh: true" option to my ScrollTrigger, but it hasn't resolved the issue. I've also attached a screenshot to better illustrate the problem I'm encountering. Any help or guidance on this would be greatly appreciated. Thank you!

Hey guys, On window resize, the SVG and the animation width don't dynamically update, or I am missing something. How can I fix this? Here is the webflow live page connected to codepen: https://photo-spread-gsap-flip.webflow.io/stfall Thank you

I have an SVG clipPath triangle that animates and reveals a content section as the user scrolls down the page. I understand that clipPath works independently of the browser view, and that to find the center point it needs to be calculated and fed back into the tween as a new X and Y. This is correct on first load of the page, but if the browser window is resized the tween isn't corrected for the new X and Y values. How can I get it to re-calculate new X Y values even if it's half way through the scrollTrigger timeline.

Hey, I'm trying to create an infinite slider but I'm unable to get it working after resize. The slider works great before resizing tho. Here's a simplified demo of the problem: I have separated the wrappers with colors so it is easier to see whats happening. https://codesandbox.io/s/silly-star-87kp94?file=/src/views/Home.vue:0-2690 I have tried to update the wrapWidth and the position directly inside the animation modifiers on resize but nothing seems to have any effect. Keep in mind that my project uses VW as a base font-size unit so everything scales based of the screen width so that might change the dynamic of the recalculating. Do you guys have any tips or tricks for this??

Hello, I was inspired by this beautiful demo on Codrops : https://tympanus.net/Development/ScrollBasedLayoutAnimations/ and tried to do something like it. But like in the Codrops demo, it's not working when I resize the window. I tried many things with gsap.context() the result is that the container doesn't grow or shrink with the window, or the centered image takes the full screen -- as in its final state -- and the animation doesn't play anymore. I've read many threads in the forum but it doesn't seem to fit to the context of my animation, or maybe (certainly) I'm missing something. Thanks a lot for your help!

Hello, I am having an issue where animated elements in gsap/scrollTrigger repeat their animation when the window is resized. Is there a way to prevent this? This is particularly an issue because the clients site I'm working on has an app that I think triggers a window resize on page load, so there is a double animation of all animated elements on the page.

Hello everyone! I have a horizontal scroll section on my site as seen in the codepen. The problem is, when resizing the window horizontally, the width doesnt match anymore and the hotizontal scroll either goes too far or some of my content is cut off. I cant use xPercent instead of x since i need different widths for various screen widths. I already tried a solution suggested in another Thread ( ), but it doesnt seem to work in my case. Any ideas why or different approaches? Thanks a lot for your help!

I have an absolute div that I am using as Draggable and also I need to add it resize-x functionallity. So the resize from bottob right was pretty easy, I just set up a handle which was draggable by its own and just change the width of the element: const rightHandles = document.getElementsByClassName('drag-handle-right'); rightHandles.forEach((e)=>{ const targetDiv = this.$refs[e.dataset.parent]; Draggable.create(e, { type: "x", onDrag: (event) => { const {clientX} = event; const {left} = targetDiv.getBoundingClientRect(); const width = clientX - left; targetDiv.style.width = width + 'px'; this.objectsWidth = width; } }) }) Unfortunately the bottom left handle is a nightmare. The major problem is that the div is very hard to make appear growing from right to left, I need to add style.left property simultaniously with style.width and it becomes a big mess. I know this is not exactly gsap related question, but more of a javascript etc. question, please do not stackoveflow me. If someone can give me a hint that would be great. If there are other solutions with differen approach I will be happy to let me know.

Hi, so it's been a few hours and I haven't been able to solve this issue yet. (I'm new to GSAP) Basically, I'd like to scale down and place an element (#animated-element) into a starting translated position and when the user scrolls down, it animates back to the original element position. As you can see in the codepen it seems to work well, the problem is that when i resize the window, the translated position is not correct and it should be recalculated as when the page loads. Any help would be appreciated, 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

I'm working on a small proof of concent piece. As you can see in the HTML I have a series of simple divs stacked atop each other with a class '.flex-container'. The css basically sets each div's width and height to match the browser window and centers it's contents both vertically and horizontally. Each '.flex-container' div is also labeled with one of two other classes: '.text-holder' or '.box-holder'. The difference is one holds either a <div> (.box-holder) that is a simple box created via css and the other holds a <p> element (.text-holder) which will eventually hold text fed in via GSAP's TextPlugin. The issue is when I run the script locally or via code pen that the pinning is off after the fourth '.flex-container' div. That div and the following div become separate and you'll see some white background appear for a moment until the next div scrolling kicks in. However, the animation in the following div is off... all the following divs after those initial four do not scroll / animate as expected... that is until you resize the browser / adjust the size of the codepen panel. Once resized the scrolling and pinned animations work perfectly / as expected. I can't figure out what's not updating initially that updates when you resize the browser / panel (To adjust the size of the codepen panel either open the panel (Edit via Codepen) or click on one of the scaling buttons, ie 1x, .5x, .25x - you'll see the break between the 4th and 5th panels instantly fix itself). I'm running 2 simple forEach loops that assign the animations / ScrollTrigger variables to each 'text-holder' and 'box-holder' div... I don't seem to have any errors in the console. Thank you for having a look!

Hello, I have an issue I can't manage trop reproduce in a simple codepen (available here: https://codepen.io/benjaminrobinet/pen/QWZJEEQ?editors=1111) but as a demo, here is a video where the "bug" occurs. I don't have any specific ScrollTrigger configuration. My ScrollTrigger config in the video is the exact same one as the one in the codepen. I use Lenis, added it in the Codepen too, and it looks like it is not the issue here compress-Enregistrement de l’écran 2023-05-19 à 13.06.57.mp4

Hey Everyone, Been scrathcing my head over this one and simply can't figure out how to implement ScrollTrigger rfresh(); to recalculate % start and end values on screen resize. So in my demo there are two elements which on scroll reduce their widths from 50% - 0% in the left and right direction, Imagine two curtains opening. Upon load, and with screen resize the two curtains both take up 50% of the viewport no problem, but if I resize after engaging the scrollTrigger the intial values of the 50% are remaining and the "curtains" overlap each other. As can be seen when scrolling and then resizing in the demo. I believed this to be a simple fix with ScrollTrigger.refresh(); to recalculate but I feel like I'm missing something super obvious! Sorry for the silly question I've been wracking my head over this one and have been staring at the screen for hours lol ?

I am using ScrollTrigger to move a panorama photograph horizontally when vertically scrolling on the page. You can find the implementations here in these two pages on my website: https://www.hariprasath.site/play/ochres https://www.hariprasath.site/play/untainted On the first load, the pano photograph is not visible. It is just a blank space where the photo is and the rest of the page scrolls and behaves normally. Somehow it fixes itself when the window is resized or the page is reloaded. I have checked this on Brave browser (chromium), Chrome, Firefox and Edge. It does not happen every time, and for some reason, it does not happen on codepen ever. ??‍♂️ The website is built using Webflow where I have added the codeblock that you find in the codepen - https://codepen.io/hariiprasath/pen/MWPaBqa I am pasting the JS here as well: gsap.registerPlugin(ScrollTrigger); var sliders = gsap.utils.toArray('.wide-lightbox-pano'); sliders.forEach((slider) => { gsap.to(slider, { scrollTrigger: { trigger: slider, start: 'top top', end: () => slider.scrollWidth > window.innerWidth ? '+=' + slider.scrollWidth : "+=" + 0, pin: true, scrub: true, invalidateOnRefresh: true }, x: () => { return -( slider.scrollWidth - document.documentElement.clientWidth )}, ease: 'none' }); }); Is this a bug or am I doing something wrong?