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

HI there, Thanks for your reply. It can be replicated but it has to be a very drastic move, from small to big which I should have pointed out and generally only works in the second demo. It's really bad on the live site but I don't suppose there's any point in posting a link as there would be too much to wade through. Weirdly when I remove those lines you suggested, everything breaks. Can you suggest a simplified way to correctly pin that section? Thanks again

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, This is amazing thank you - I haven't got it quite right but I'm getting there. This is where I am at - on my dev site the image covers the whole thing but for some reason does not on my codepen. https://codepen.io/shereewalker/pen/zYbMmzO The only thing I cant replicate, is I want it to wobble more on page load then end up at the speed I have it - the same as the co-drops demo but on page load, not click. I also can't seem to get it seamless. Also - sorry fr all the questions! But is there a way to do object-fit cover for a canvas? Any help would be much appreciated! Thanks Sheree

I am trying to implement a water effect with pixi.JS and GSAP I have looked through all the similar questions on here and codepen but ,any are for slider and I just want one scene. Essentially what I am trying to achieve is this (which I love): https://tympanus.net/Development/LiquidDistortion/ Tutorial here https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/ But NOT as a slider and with the amplified effect on page load not slide click. I did actually manage to sort of get this working here https://staging-chfp.shereewalker.com/ But I really want the amplified effect that you get when you click to the next slide in the first link - but for this to happen on page load. So on page load it's intense but gradually dies down - though never stops moving. And even better it would speed up again (I think it's called 'wacky' in Pixi) when scrolling. Even their 'non-amplified' wobble settings are better but I can't seem to replicate them. I could probably manage to strip out the slider but I can't get the intense wobble on page load or scroll. I couldn't seem to get anywhere so I started again using the basic displacement filter demo in Pixi which is where I am at now in codepen. Oddly, when i try to add my own images, it doesn't work - but it does on my site. I am okay with gsap and scrolltrigger and trying to get my head around Pixi, but I don't know how to merge the two together. Any help would be greatly appreciated.

I have a header on a page, with content on the left, image on the right and a 'cover' that slides left to reveal the image on page load. When you scroll down about half way, the content moves off screen. That parts works well and can be seen on the code pen. The issue I am facing is that the header is 100vh on large screens (where the departure animation works perfectly), but on smaller devices, I have to cap the height of the header as the image becomes to tall and skinny. The images I am using are not very flexible and as a result, I have had to write a lot of media queries, capping at different heights based on the viewport width. This part isn't in the codepen, I couldn't replicate it.... UPDATE - I have managed to replicate the issue at 1500px or below ....but when I cap the height, say on ipad, the 'section-2' is already too far up the screen, and past the 'start' point, and therefore the departure animation has already been triggered. As a result, the content is already half off the screen on ipad on page load and for other various smaller widths. I am trying to work out if there is a way that I can trigger the departure animation when .section-2, is halfway up '.standard-page-header' (bearing in mind, that .standard-page-header has a fixed position). Alternatively, trigger the departure when '.section-2' has scrolled half the total distance from it's display/relative position to the top, I'm not sure what is easier. I have been reading the docs and tried a few things but I can't work it out. The other issue I have (which I should perhaps ask in another thread) is the sliding cover changes width at various viewport widths. So for example, on large screens, it moves further left to display more image, but on smaller screens, less image, more room for the content. The problem is this (and the text that slides in) doesn't consistently adjust responsively, so sometimes, when I change widths, it's still covering too much or too less of the screen. I tried adding 'invalidateOnRefresh: true' in the 'matchmedia' part, but I get a console error saying it's not valid. Any help would be amazing, or even a point in the right direction (docs, examples) Thanks! UPDATE - I have managed to replicate the issue at 1500px or below

Update I got this to work based on pages, blocks would have been better, but as it happens, this block is only on 2 pages function gsapscript() { if ( is_page( array( 6, 290 ) ) ) { wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js', null, true ); } } add_action('wp_enqueue_scripts', 'gsapscript');

I am trying to enqueue a GSAP script only when a particular Gutenberg/Advanced custom field block is present on a page. I used this for Slick slider and it works perfectly but for some reason it will not work with GSAP - I don't get any console errors (other than GSAP is not defined) and the script does not load. I can't work out why? Any help would be appreciated Tried to do a codepen, but can't see where I would include the below Thanks acf_register_block_type(array( 'name' => 'lig_large_accordion', 'title' => __('LIG large Accordion'), 'description' => __('LIG Large Accordion'), 'render_template' => 'template-parts/blocks/content-large-accordion.php', 'icon' => 'editor-textcolor', 'keywords' => array( 'accordion', 'toggle', 'expand', 'info'), 'category' => 'design', 'enqueue_assets' => function(){ wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js', array(), false, true ); }, ));

Hi @mvaneijgen Thanks so much for your reply - In the end this is actually what I did, but so it doesn't disappear at the bottom, I set the end point as bottom -1px for the footer which it never reaches as it's the end of the page Thanks!

I feel bad for asking such a basic question but I can't seem to work it out. I am trying to pin a section when the top gets to the top of the screen for the rest of the scroll down and then when they scroll back up, it unpins when the bottom of the element above, comes back into the viewport. Essentially the top level navigation scrolls as normal but the second level navigation sticks, then unsticks when you scroll back up revealing the to level navigation again. I have tried so many things, various scroll triggers, onleave, onenter, toggle actions but it only ever pins until you scroll the height of the element and then unpins or just doesn't work at all. I also tried setting the end trigger as the bottom of the page wrapper but that didn't work, though I do understand why. I feel like this must be a really common need but I can't seem to find any examples. Any advice, or a point in the right direction would be much appreciated Thanks Sheree UPDATE*** After days of trying literally just after I posted this I found another solution that works! gsap.to(".ast-main-header-wrap", { scrollTrigger: { trigger: ".ast-main-header-wrap", markers: true, start: "top top", end: 99999, toggleClass: {className: 'main-tool-bar-scrolled', targets: '.ast-main-header-wrap'} }, }); ANOTHER UPDATE! Sorry for al the updates but I got it working like so: gsap.to(".ast-main-header-wrap", { scrollTrigger: { trigger: ".ast-main-header-wrap", markers: true, start: "top top", endTrigger: ".footer-row-2", end: "bottom -1px", toggleClass: {className: 'main-tool-bar-scrolled', targets: '.ast-main-header-wrap, .ast-above-header'} }, }); I have edited my codepen so you can see I have no doubt there are slicker ways to do it so by all means, let me know, but this is working Thanks!

Oh wow you're right. Maybe because I used the same classes twice? Thank you so much! I never would have got that, I assumed it was an error elsewhere You're a star - Thank you!