Search the Community

The following seems to work well but on resize it does throw things off. I've implemented some resize checks but maybe that's not enough and needs to update the trigger start/end? const landing = ref(null) const logo = ref(null) onMounted(() => { let logoToScale = (window.innerWidth / logo.value.$el.getBBox().width) * 5 const landingResize = () => { logoToScale = (window.innerWidth / logo.value.$el.getBBox().width) * 5 } ScrollTrigger.addEventListener('refreshInit', landingResize) const timelineHeader = gsap.timeline({ scrollTrigger: { id: "ZOOM", trigger: landing.value, scrub: true, start: "top top", end: "+=100% 0", pin: true, markers: true, invalidateOnRefresh: true, } }) timelineHeader .to(logo.value.$el, { scale: logoToScale }) })

Just so you know, you could just call tween.revert() instead of doing both kill() and clearProps. You could also record the progress in your resize handler, and then re-apply that to make things continuous: https://codepen.io/GreenSock/pen/ZEZNmpz?editors=0010

Im new to the whole thing , and Im just learning about gsap. I tried to create sort of parallax like effect , where the parallaxRef elements(those logos) moves left or right when i scroll up or down. It basically moves those logos horizontally when i scroll. And it works as intended. For the first row of logos , I translate it -30% and using gsap and its scrollTrigger , I translate it to 30% so when i basically at the middle of the container , those logos are relatively at the middle of the container. But when i resize the window , their position just seems to be weird position as shown in picture 2. But when i reload the page , it goes back to its intended position. I dont know if i explained the problem properly. Im using REACT for this. If theres a better way of doing it , it would be awesome too. 1st pic shows the page before resizing the window. 2nd pic shows the page after resizing the window with the logo's position all messed up. 3rd pic is after reloading the page , which seems to correct their position. const parallaxRef = useRef(null); const parallaxRef2 = useRef(null); const setupParallaxTriggers = () => { gsap.to(parallaxRef.current, { xPercent: 30, scrollTrigger: { trigger: '.container', scrub: 1, start: 'top bottom', end: 'bottom top', invalidateOnRefresh: true, markers:true, }, }); gsap.to(parallaxRef2.current, { xPercent: -30, scrollTrigger: { trigger: '.container', scrub: 1, start: 'top bottom', end: 'bottom top', invalidateOnRefresh: true, markers:true, start: '40% bottom', }, }); }; useEffect(() => { setupParallaxTriggers(); }, []) return( <div style={{margin:'100rem 0rem'}}> <section className='container'> <h1>DEMO</h1> <div className='box' style={{transform:'translateX(-30%)'}} ref={parallaxRef}> <span className='level'> <p>Level</p> <p>Intermediate</p> </span> <div><img src={html} alt="html"/></div> <div><img src={css} alt="css"/></div> <div><img src={javascript} alt="js"/></div> <div><img src={react} alt="react"/></div> </div> <div className='box' style={{marginTop:'10rem',transform:'translateX(30%)'}} ref={parallaxRef2}> <div><img src={node} alt="node"/></div> <div><img src={express} alt="express"/></div> <div><img src={mongodb} alt="mongodb"/></div> <span className='level'> <p>Level:</p> <p>Beginner</p> </span> </div> </section> </div> ) } react (1) (1).mp4

I think you'd just need to clearProps when you resize and kill the tween. https://codepen.io/PointC/pen/bGJyjYz/03ab931389596f7fd6e582a8f9c6c1ec But I agree with @Trapti, there are easier ways to do this with an SVG. Happy tweening.

@mvaneijgenThank u for the reply. I followed the points u mentioned and was finally able to solve the issue. I used timeline and used fromTo to state the intitial and final xPercent instead of using the transform in css. I guess css and gsap conflicted or something. Now it seems to maintain its position relative to its container even when i resize the window.

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

Hi, Sorry to hear about the issues but I'm afraid I can't replicate the problem in neither demo, I resized both of them quite a few times and they keep working in the same way. Unfortunately in your first demo there is too much code (over 500 lines between CSS and JS) and we don't have the time resources to comb through all that. Also in the same first demo you're not including jquery and there are a lot of warnings that point to elements not being found by GSAP on the DOM, so clearly there are quite a few elements that are missing. In your second demo I saw this: // Function to refresh ScrollTrigger on resize function refreshScrollTrigger() { ScrollTrigger.refresh(); } // Event listener for window resize window.addEventListener("resize", refreshScrollTrigger); // Initialize ScrollTrigger ScrollTrigger.create(scrollTriggerConfig); // Initial setup refreshScrollTrigger(); There is no need to manually call ScrollTrigger.refresh(), especially if nothing in the ScrollTrigger instances depends on something changing after some time when the user resizes the screen. ScrollTrigger calls the refresh method automatically when the screen is resized and does it with a debounce mechanism for better performance. You might need to call that if some content is added/removed asynchronously and you need for ScrollTrigger to run it's calculations again, so except for the create() method everything else in that code block is not really necessary IMHO. As for the issue please be more specific about how it can be replicated and what exactly is happening or not happening. Finally you might want to check GSAP MatchMedia: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Happy Tweening!

the thing is at start, before the animation starts, it don't resize, although the width is set to width: calc(100vw - 100px). I do need those widths: based on width at start AND 236px at the end… making the value change with scale would involve a formula based on the width of the screen which in the end should result in a value of 236px https://capture.dropbox.com/mpWJ5kxvlCb7CD2F

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?

I am trying a very simple animation of Gsap. With pin enabled. The design works perfectly in PC, and when open in Mobile, the pinned are jumps abnormally down, I tried increasing decreasing the star, end with all combinations, it only gets worse. Please help. I am describing the problem with screenshot below: I have actually Pinned the containing div of that h2 tab visible on screenshot, it goes up and in i have given the start as "0% 12%". First of all the marker should have been above the h2 tag, as I have given 0% but it's below the tag. And secondly after the marker reaches the start position, it suddenly makes a jump by coming down to the position in the following screenshot. I have also tried removing all the margins on the container and the container above, but still no luck. What is this problem? Someone please help me fix this. The Same Problem can also be seen in the codepen I have attached, Resize the screen to something near to 300px wide, and see how the h2 jumps place after getting pinned.

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.

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

No problem! This is the place to come when you have a question. It's totally fine that you're new to GSAP and trying to learn. Welcome! ScrollTrigger automatically handles resize events (and throttles them for performance). If you want a different animation for mobile devices, you might want to check out gsap.matchMedia() Instead of setting up your own "resize" handler where you keep doing the calculations on every resize, I'd recommend using a function-based value that calculates it only when you need it, like: const getVideoContainerOffset = () => window.pageYOffset + videoContainer.getBoundingClientRect().top; // in your ScrollTrigger: start: () => "top " + getVideoContainerOffset() + "px", No, I would not have a backdrop-filter. I'm saying you literally create a copy of the image that is blurred in something like Photoshop (or whatever), and save that as an image and place it directly on top or behind the normal image and then cross-fade them to make it look as if the normal image is becoming blurry (but it's just a crossfade - nothing is happening with filters). The entire goal here is to save the browser from having to do all the blurring calculations. I don't have an example off the top of my head to show you, but hopefully the concept is very simple to grasp and you can give it a shot. My guess is that you had a transform applied via CSS and that was getting parsed in as such. So it's fine to set that value in the "from" part of the tween, or initially using a .set(). It's difficult to offer advice when we don't have a minimal demo (CodePen or Stackblitz) to look at. One of those will go a long way toward getting you solid help. Good luck!

Hi all, I'm working with SplitText and I need to be able to revert everything, reset timelines, and then recreate and re-run everything on resize. The main issue I'm having is chaining everything nicely. timeline.reverse() returns itself 'for easy chaining' according to the docs. Except you can't chain timeline.reverse().then() (this throws an error) and wrapping it in a promise doesn't work either. What is the best way to make sure everything has been fully reverted when wrapping reverts in external functions? Because if I dump everything into one function, things do get cleaned up correctly, but we obviously don't want to do that.

Thanks for clarifying, I'll definitely be using this syntax in the future! If this isn't too far out of the scope of my initial issue, I managed to reproduce something I'm running into with these tweens. I have two instances of the same component (it's all in the demo) – one on the page and one inside a modal. For their timelines to run independently I need to declare them as Vue refs. Which is fine, except for some reason when the timeline is reset on reside, the timeline for the other instance of the component gets messed up. For example in this demo, scroll down to activate the on-page animation, resize it, scroll again to re-activate it, then toggle the modal. The modal splitText animation doesn't run correctly, probably because the split isn't properly recalculated. I suspect it's a vue-specific issue but if there's any way to negate it I'm all ears! Here's the demo: https://stackblitz.com/edit/nuxt-starter-zdudyt?file=app.vue,components%2FTextComponent.vue

Greetings everyone! Happy to be here once more and pitty with another problem that will drive me crazy! I have a function that searches for sections and a specific class that will reveal the headers of my liking. I've been using for some time now with no problems. After some point of development on a specific page, a title that should animate is not animating... sometimes it starts and stops but mostly is not triggering. Markers recognize the point that it should start the animation but passing by won't fire at all. Never seen something like this with scrolltrigger. Unfortunately I can't replicate the setup or bug in codepen since as I told you before, it always works! I am pasting below the function just for your reference. Only thing to mention is that I have 2 full width sections on horizontal scroll just above the heading that follows below but even removing the entire html code and scripts still this heading won't fire... I assumed at a point that it might mess with scrolltriggers calculations but that's not the case either. Sometimes if I refresh on a specific position it "tries" to animate and stops as seen in the image below. Any ideas? function splitTheHeads() { let sections = document.querySelectorAll("section"); let splitTextArray = []; sections.forEach((e) => { let headText = e.querySelectorAll(".anim_head"); if ( headText.length > 0 ) { // split texts headText.forEach((elem) => { var mySplitText = new SplitText(elem, { type: "lines, chars", linesClass: "split-line", charsClass: "split-char", }); let triggerPos = elem.getAttribute('data-trigger'); let tl = gsap.timeline({ scrollTrigger: { trigger: elem, start: triggerPos === "bottom" ? "top bottom" : "top center+=33%", // toggleActions: "restart none none reset", fastScrollEnd: true, preventOverlaps: true, }, }); tl.set(headText, { autoAlpha: 1 }) .from(mySplitText.chars, {duration: 1.25, ease: "expo", opacity:0, yPercent: 100, stagger: {amount: 0.5} }); splitTextArray.push({ element: elem, splitText: mySplitText }); }); } }); // Revert mySplitText instances on window resize window.addEventListener("resize", function() { splitTextArray.forEach(({ element, splitText }) => { splitText.revert(); gsap.set(element, { autoAlpha: 1 }); }); }); }

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 !

I've recorded a video demonstrating the issue here. 1. I open the sandbox then go into full view in a new tab. 2. The animation works correctly initially, with the horizontally scrolling containers being of the right width. 3. I resize the window, the components resize correctly, but the ScrollTrigger no longer snaps at the correct locations, and scrolls beyond the end of the components, as if the width variable hasn't updated. 4. If i maximise the window again, the animation works correctly I should also note if I refresh the page in the smaller window, the ScrollTrigger width updates correctly. This issue occurs on Safari, Chrome, and Firefox on different computers, and also when locally hosting the website. As you noted before, the getWidth() function is run when the window is resized, but the animation doesn't seem to be updating correctly.

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, I'm not 100% sure of what issue you're experiencing, but waiting for 1 tick of GSAP's ticker should be enough. As far as I can tell, after you revert your GSAP instances and create the new ones, it should take 1 tick to render the new ones, so that should be enough. Based on your demo this is how I would proceed: const tweenable = document.getElementById('tweenable') let tween, timer; const createTween = () => { tween = gsap.timeline().fromTo(tweenable, {opacity: 1}, {opacity: 0, duration: 1}); }; const revertTween = () => { tween && tween.revert(); createTween(); }; window.addEventListener("resize", () => { timer && clearTimeout(timer); timer = setTimeout(() => { revertTween(); }, 200); }); createTween(); Here is a fork of your demo: https://codepen.io/GreenSock/pen/oNOVzdg Hopefully this helps. Happy Tweening!

Hi @seifhadaba and welcome to the GSAP Forums! In your App.tsx file the main issue is that your layout element has a fixed height of 100vh, so when you uncomment that part there is no scroll available: .layout { display: grid; grid-template-columns: 12rem 1fr; height: 100vh; /* THIS */ } Also these styles don't seem to be helping at all: .content { grid-column: 2 / span 1; overflow: hidden scroll; scroll-snap-type: y proximity; } You can just set hidden to both, ScrollTrigger works with the window as the default scroller and unless you have no other choice but to use a different one, is always better to keep it that way, it simplifies everything quite a bit. Also your ScrollTrigger already has a snap function in it, any particular reason to have scroll-snap defined in your CSS? This seems to work: .layout { display: grid; grid-template-columns: 12rem 1fr; } .content { grid-column: 2 / span 1; overflow: hidden; } In the case of the toggleClass, is doing exactly what you're telling it to do, is adding the ".active" class with the dot in it so your HTML looks like this: class="_src_components_ExperiencePage_ExperiencePage_module__container .active" See the dot before active? // Wrong toggleClass: ".active", // Right toggleClass: "active", Finally if you log in your getWidth you'll see that is ran after you resize the window so that is also working as expected: const getWidth = () => { const margin = Number( window .getComputedStyle(section1.current!) .getPropertyValue("margin-right") .slice(0, -2) // remove "px" ); const width = Number( window .getComputedStyle(section1.current!) .getPropertyValue("width") .slice(0, -2) ) + 2 * margin; console.log("get width", width); return width; }; You also don't need to add the window width to the dependencies on the useGSAP hook: useGSAP(() => {}, { scope: container, dependencies: [window.innerWidth] // <- No need for this }); ScrollTrigger will run it's refresh method after the window resize and it has a debounce method that optimizes the whole process. Here is a fork of your demo: https://codesandbox.io/p/sandbox/gsap-scrolltrigger-forked-qjt48r?file=%2Fsrc%2FApp.tsx%3A7%2C5-7%2C29 Hopefully this helps. Happy Tweening!

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

Yeah, you could keep track of the state of one set of images and use Flip's fit() method: https://gsap.com/docs/v3/Plugins/Flip/static.fit() Also in order to keep things optimized you can check the state of the images only at startup and then on a window resize using a debounce method for that. Happy Tweening!

Hello! I caved the other day and now I'll be doing a LOT of GSAP 😆 Background: I tried replicating the Fake Scroll (Horizontal) demo and integrating it with SmoothScroller on a Svelte/Sveltekit site. It works on CodePen, and similar it works if I stick the SmoothScroller code inside the Horizontal component. Problem: I rather have the SmoothScroller in layout.svelte, because I'm using it across the *entire* site. If I stick it inside the Horizontal component, other things on the page break. If I have both a global and local component instance, other items on the page jitter (I'm assuming the SmoothScrollers are in conflict over the elements). Most of the other components play nicely going forwards (not in reverse or on resize, but that's another problem 😅). I have attempted to replicate the issue with a minimal demo on StackBlitz. It's not exactly the same, but it is similar, so I'm hoping that perhaps someone shedding either some light on how that should work or best practices will help me solve my initial issue. The issue I'm seeing on StackBlitz is that the full number of sections isn't showing; it is similar on my local site, except that it also disappears VERY quickly and there's a ton of space down the page where the animation should be scrolling. One thing at a time, I guess. Help would be immensely appreciated!

Hi @JJEccles welcome to the forum! Just to make sure this is you issue right? When you resize the screen bigger, you'll see the next element coming in? You could build your own resize handler and call ScrollTrigger.refresh() on every tick, this will be horrible for performance and the site will probably lag while resizing. ScrollTrigger watches for a resize event and then debounces so that it only has to recalculate everything once (when the visitor stops resizing). I have to say that 'normal' visitors never resize the browser in the middle of scrolling a page, that is only something developer (and annoying designers) do while testing a website. Personally I wouldn't focus on fixing this weird behaviour and instead spend that time on making the site more accessible for vistors who can really benefit for these enhancements. Hope it helps and happy tweening! Screen Recording 2024-02-18 at 16.25.00.mov