Search the Community

Function based values mean that when the ScrollTrigger instance is refreshed that end value will be whatever number/string that function returns. If oyu're doing some sort of calculation whose result might change that calculation will be run again. In the particular snippet you added the end point is based on the height of an element, if a screen resize changes the height of that element then the end point will be recalculated as well. Hopefully this clear things up. Finally it seems that you have created two different threads for the same issue, please let's keep the discussion in just one thread. That will make easier to follow and focus our efforts, thanks! Happy Tweening!

I am going slightly mad. I have spent nearly a week trying to get this to work and I can't understand what's going on. I have been trying to some basic pinning with a clip mask and I just can't get it to behave responsibly. Annoyingly on that codepen URL it's actually okay, but on my website, it's not, which I realise makes things difficult. I have done another codepen with ALL my GSAP code (rather than it reduced to the animation in question which is linked above) and that one glitches more so there must be some offending code elsewhere, but I can't work out what, as it all seems fine to me. https://codepen.io/shereewalker/pen/gOyxppY I am removing each piece of extra JS to see if I can work it out, but so far nothing is working. I am basically just trying to refresh the calculations on window resize for that animation - and actually for all of them Any help would be amazing as I am at my wits end! Thanks!

Hi there, I just can't get the demo to replicate it sorry. I have done this - but it's not perfect. Would you recommed a better way to "call kill() on that animation from inside a 'resize' event handler". / Function to invalidate and remake specific animations function invalidateAndRemakeAnimations() { // Kill the first animation ScrollTrigger.getAll().forEach(trigger => { if (trigger.vars.trigger === ".row._1") { trigger.kill(); } }); // Remake the first animation gsap.to(".row._1", { scrollTrigger: { trigger: ".row._1", start: "top top", scrub: true, pin: true, pinSpacing: false, invalidateOnRefresh: true, markers: true } }); // Kill the second animation ScrollTrigger.getAll().forEach(trigger => { if (trigger.vars.trigger === ".row._3") { trigger.kill(); } }); // Remake the second animation gsap.to("h2.text", { scrollTrigger: { trigger: ".row._3", start: "top top", scrub: true, invalidateOnRefresh: true }, position: "relative" }); } // Initial application of animations invalidateAndRemakeAnimations(); // Listen for orientation change event window.addEventListener("orientationchange", function() { // When orientation changes, invalidate and remake specific animations invalidateAndRemakeAnimations(); });

Again, it's tough to advise without seeing a minimal demo, but I guess the most generic answer I can give would be: "call kill() on that animation from inside a 'resize' event handler". But if you want a more targeted answer for your scenario, please provide a minimal demo that clearly illustrates the problem and we'd be happy to take a peek.

Hey there, the markers are still there I think because the section has display none, but hasn't actually been removed if that makes sense? The heights works fine for me but not on mobile. I sort of have it working with this. // Function to invalidate and remake specific animations function invalidateAndRemakeAnimations() { // Kill the first animation ScrollTrigger.getAll().forEach(trigger => { if (trigger.vars.trigger === ".row._1") { trigger.kill(); } }); // Remake the first animation gsap.to(".row._1", { scrollTrigger: { trigger: ".row._1", start: "top top", scrub: true, pin: true, pinSpacing: false, invalidateOnRefresh: true, markers: true } }); // Kill the second animation ScrollTrigger.getAll().forEach(trigger => { if (trigger.vars.trigger === ".row._3") { trigger.kill(); } }); // Remake the second animation gsap.to("h2.text", { scrollTrigger: { trigger: ".row._3", start: "top top", scrub: true, invalidateOnRefresh: true }, position: "relative" }); } // Initial application of animations invalidateAndRemakeAnimations(); // Listen for orientation change event window.addEventListener("orientationchange", function() { // When orientation changes, invalidate and remake specific animations invalidateAndRemakeAnimations(); }); I have no doubt this is not an elegant solution but I don't really know what else to do - even this doesn't really reset them properly on Safari The media queries will definitely change the document height, but I thought Scrolltrigger automatically calculated on resize. The only other thing I could find was in the common mistakes about 'forgetting to use function based start/end values for things that are dependent on viewport sizing' but I can't work out how to implement it.

Hi there I have looked and I have even removed almost everything off the page except a basic text block. I use src set but the images use object-fit so their containers dont change. Some elements on the page are based on VH but I can't change this. I know that without a broken demo it's near impossible but are you able to just tell me how to correctly kill an animation on resize? Sorry i have confused things by opening another thread. I thought maybe this was too old now

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!

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!

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 }); }); }); }

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.

Hi, I'm afraid that even using vector-effect as an attribute still causes the same problem, here is a fork of the last demo without it: https://codepen.io/GreenSock/pen/VwNGXZL Beyond that and dynamically adjust the path on screen resize (as suggested in the thread @PointC linked) I don't know what else can be done TBH. Sorry I can't be of more assitance. Happy Tweening!

Hello @Rodrigo Thank you very much for your answer but there are two problems: 1. Since you re using scale: true, images are distorted again, although it's not really visible in your pen as it's a sky image. 2. Resizing the screen works before starting the flip. When you scroll and the animation has started, any window resize breaks it again. I've updated my pen with your code and a new image that shows the distortion. https://codepen.io/Manolis-Giouvanakis/pen/jORvPEV BTW: This is my other account - sorry for any confusion

That's fair. Apologies. On load when the user scrolls it zooms into the SVG based on a scale set `logoToScale = (window.innerWidth / logo.getBBox().width) * 5` as suggested by @ryan_labar as this makes sense. This is so on scroll zoom on the animation zooms in far enough to go completely white. However as soon as I resize the browser, which might happen, on scrolling the scaling is off as either scaling too much or too little depending on resizing up or down. I understand why but from my code I believe I'm updating the scaling correctly.

Sorry but is not clear at all what is wrong/off here, since you haven't specified what is not working after a screen resize. Unfortunately vague descriptions like not working, is broken, wrong, off, etc. Don't tell us exactly what to look at. Happy Tweening!

Thanks again, @Rodrigo – with what @ryan_labar kindly shared I've updated the CodePen (https://codepen.io/richardcool/pen/yLrqdQm) and on load it's working perfectly but when I resize it gets out of sync. Am I using the correct methods? I've used `refreshInit` to update the scale but wasn't sure if I needed anything else?

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, If I understand you correctly you can use the invalidateOnRefresh config option ScrollTrigger has. From the ScrollTrigger docs: invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values. You have that in your latest code snippet but not in your demo 🤷‍♂️ Finally I'd try to have everything at a large size at the start and then use a from instance that takes the element from a smaller scale to the natural scale/size Hopefully this helps. Happy Tweening!

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!

Thanks @Rodrigo – I can update my original post/CodePen with the scale calculation but what is the best method for wanting to update a value in ScrollTrigger so it changes on resize based on my rough example above…

There's two approaches for this. The path of least math would be to use FLIP https://gsap.com/docs/v3/Plugins/Flip/, having your target container set at 500vw (seeing as your target white space is 1/5 the width of the SVG) (for mobile devices you could set a breakpoint for portrait mode). The other approach would be to calculate the amount it needs to scale based on viewport width... The math would look something like: (window.innerWidth / svgElement.offsetWidth) * 5. Note that this would need to be recalculated on each screen resize. (Also note you may need to re-math this for mobile devices.)

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!

it might have to do something with pinSpacing throwing it off.. another question is: in my own project i need to resize 2 times manually for al the panel markers to line up correctly due to the heavy use of video elements loading in, that suppose to be triggerable with a ScrollTrigger.refresh, that doesnt seem to help here ( i put the scrolltrigger.refresh() inside the useGSAP hook

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

When an animation renders for the first time, it records the start/end values internally so that it can very quickly interpolate between them during the animation. You've created a scenario where you actually want to CHANGE those values on resize. invalidate() will do exactly that - it flushes any recorded start/end values so that on the next render of that animation, it'll re-calculate those. With that in mind, you can just invalidate the animation and restore its progress: window.addEventListener("resize", () => { let progress = tl.progress(); // remember the progress tl.progress(0).invalidate().progress(progress); // rewind to the beginning, invalidate to flush any recorded start/end values, then restore the progress }); https://codepen.io/GreenSock/pen/BaEdQBy?editors=0110 Is that what you're looking for? You could also consider using a gsap.matchMedia(). There are many ways to accomplish something similar 🙂