SWALKER

Yeah I don't know what I'll do. Ill maybe have to try JS as this is what i see on my ipad (excuse the state of it, I have a 3 year old!)

This is on my actual phone after going back to portrait with your codepen. Sometimes it doesn't, sometimes it takes a few tries, but sometimes it's on first orientation. It's killing me! I'm considering trying to switch to just JS

Hey there - if you open your codepen in dev tools and change the orientation, you'll see it breaks, same as my codepen which I stripped back (I also took a backup then stripped my website right back to practically nothing) the way it looks in dev tools is the same as it looks on my phone for both mine and your codepen and my stripped back site (though I have since restored the backup) The screenshot below is your codepen. I have just rebuilt the entire thing without pinning and it still does the same, it's a bit better, but the start and end pins are still way off on orientation change.

I've actually just rebuilt the whole thing Without pinning but the markers still off on orientation change! To apply the above to the new animations, is this correct because it does not work, i think maybe I have modified it incorrectly let tween1, tween2, tween3 ; function invalidateAndRemakeAnimations() { // Kill existing animations tween1 && tween1.revert(); tween2 && tween2.revert(); tween3 && tween3.revert(); // Remake the first animation tween1 = gsap.to(".fixed-wrap", { scrollTrigger: { trigger: ".initial-row", start: "top top", scrub: true, invalidateOnRefresh: true, markers: true }, position:'fixed' }); // Remake the second animation tween2 = gsap.to(".last-text .text-holder .text", { scrollTrigger: { trigger: ".last-text", start: "top top", scrub: true, invalidateOnRefresh: true, markers: true }, position:'relative' }); tween3 = gsap.to(".fixed-wrap", { scrollTrigger: { trigger: ".last-text", start: "top top", scrub: true, invalidateOnRefresh: true, markers: true }, position:'relative' }); } Alternatively, do you know how to use function based start/end values? The docs just say this as an example , but I don't really know what this means end: () => `+=${elem.offsetHeight}` // will be updated Thank you!

Right, so I have gone as far now as to remove ALL my styles, including media queries, stripped out any extra content, including headers and footers, removed any JS and any other GSAP code. Right now I have a Wordpress page with nothing on it but a very basic pinned section. BUT you an still see that when orientating from landscape to portrait, that it breaks. The Pin Spacer does not adjust it's width and height, it still has the dimensions of the landscape version and the pin start and end does not update. I even removed all the parent styles but no dice. At this point I am wondering if this is a bug? When you look at the codepen on fullscreen in dev tools, it breaks too, so I do have a broken demo of sorts. Now I know that dev tools behaviour is not always accurate (at least in my experience) BUT it does behave the same on an actual mobile device. Sometimes it takes a few orientations, sometimes it does it straight away and looks an absolute mess. Here is a screenshot from both the staging site and the codpen

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

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

I have an animation which uses pinning. However it doesn't reset the pin positions on browser resize. I have been at it for literally weeks now and have had no luck. Annoyingly it works on my demo but not on my live site https://staging-chfp.shereewalker.com/ Initially it looks fine, but when you actually open it on a mobile, it's completely breaks on screen orientation change. I think it might partly be caused by me hiding and displaying the animated section, but even at heights where this doesn't take effect, the markers are consistently off. I have included the code for the animation that sits above (the expanding image) because I thought this might be the cause, but the demo STILL works. I have had support on here before but nothing seems to work, so really all I am trying to do at this point is kill it entirely, and re-add/calculate on browser resize. But I can't even get this to work. Any help would be greatly appreciated. Note: You won't see the pinning unless you open the codepen link as the height is to small in this thread

So I THINK i have worked this out - after a huge amount of time! I noticed that the section worked fine, a long as there was NO other blocks on the page. But no single block seemed to be the issue - it was ANY block on the page. The only common denominator they had was the padding (which I ruled out) and they each had a heading - which was, believe it or not, the issue. It was cause by the css transition: all .3s ease-in-out; Which had been applied, to every heading. When resizing quickly (for example on ipad orientation change), scroll trigger calculates WHILE the headings are still in the process of resizing - thus, throwing off the calcultaions. Fingers crossed this is it, but it appears to have fixed the issue Edit - false alarm..... it has not

Hey there, Yeah I know that lack of demo doesn't help sorry - I do actually have one, but I can't replicate the issue. I searched other forums and I'm not the first person who has experienced this so i thought maybe there was a generic answer. Most other forums imply it has to do with a lack of height on the page, which I don't have - there is more than enough top and bottom. I have a gross solution for now which is that I have turned markers on, and then hid them with CSS. It's not a long term solution (at the moment!) but it will do until I can work it out. I have tried stripping out all my other css and JS but no joy. Oddly if I move the section with the pinning, its okay - it's almost like the combination of the pinning animation AND the section above which has VW and VH calculations is too much for it to pinpoint the starting and ending? It's weird. And again, if I add markers - it's fine. I will try removing that scroll behaviour - and see if it makes a difference. - thanks very much for that suggestion.

Ugh, so after FINALLY thinking this was working, it now ONLY works with markers on. Without them, the animation is all over the place and all the other ones are jumpy. With them on, it's perfect. It makes no sense to me! I can't seem to do a demo to replicate it which I know leaves me in a situation This URL is here, maybe something will jump out https://staging-chfp.shereewalker.com/ At the moment, I have it working by having markers:true and the hiding them with CSS VERY hacky but I only have a a few days until launch

Hi there, On the live site. You don’t have to resize quickly, it’s considerably worse. Enough that I think a simple device orientation change would cause it. A quick resize was the only way I could get the demo to do it. It’s working a lot better now. It’s not perfect but it’s better. I read the docs for invalidation on refresh but it sounded like the same thing to me, which is why I asked. Thanks for that extra info. So much to learn! I will take a look at your fork tomorrow. Thanks again for your help, much appreciated

Actually one other question if you don't mind, if Scrolltrigger automatically refreshes, what purpose does ' invalidateOnRefresh: true' serve? Thanks again!

So i have just tried switching it to the below and removing the code you suggested: gsap.to(".row._1", { scrollTrigger: { trigger: ".row._1", start: "top top", scrub: true, pin: true, pinSpacing: false, invalidateOnRefresh: true }, }); And actually it works better, I'm not sure why I didn't have it like this before. I think it was reconstructed to assist with the refresh. I'll keep my eye on it, but it's definitely better. Thanks so much for your help