davidbwaters

Thanks for your cool wavy mask and demo!

No worries, I completely understand and just the fact that Shehzad was clearly trying to help and my isolated demo case could have easily gave the impression that I was trying to achieve something basic and I was pretty sure that if it was my code it was something covered in another answer because I've tried most of the solutions in other threads haha. I'm relieved that it wasn't my code especially when refresh methods weren't doing the trick. I figured a contributor would eventually see the GIF of my window resize or others would have the same problem and knew it was either and edge case, something not obvious from the docs, or a bug. This is an awesome community and lib, thanks again. Plus my code is based on Cassie's demo and she pointed out that it seemed like the same issue from another overlapping example. I was pretty sure if my issue was resolved the OP's would be too and I might as well post in the relevant thread. I'm used to checking Github issues for a month after my problem, haha, so a community is refreshing. Thanks again.

I stated in my first post to disregard if not relevant and said I wasn't trying to hijack. Cassie replied that my issue may be similar to the OP's issue and I thought it may help to debug. I will make a new thread now though and reference this one.

Thank you for helping me look into this, but I tried to explain in my other post that my use case is a more complex page where I think I will need to recalculate the sizes and the codepen demo was not made to create a working responsive example, I just wanted a minimum viable example of matchmedia being applied and i intentionally didn't add mobile styles in the codepen because that is a simplified example and I am trying to debug problems I am experiencing on this site: https://upbeat-hugle-f33533.netlify.app/. I only added savestyles to elements I applied ST to, but my issue persists in your updated demo. Thanks for your help, again. I am not new to CSS at all, I am new to GSAP and ST. This was what I am talking about: https://gifyu.com/image/58TB. For my purposes, I am not sure if I HAVE to recalculate everything to update the example, but I would expect that as an 'escape hatch' last resort in any library but understand if there is another alternative or better practice that would suit my needs, and I am open to that. On the 'real' site I am using it on, there are other scripts that might be changing the offset and size of things and I am trying to 'refresh' scrolltrigger after those changes to be sure they aren't the source of the problem. sorry if I wasn't clear before.

Okay, I updated the pen with the latest ST beta and added savestyles, but resizing still breaks it for the mask. i haven't styled mobile in the example and it behaves correctly if loaded at either size, but if you resize from desktop to mobile and back, the mask animation doesn't work. this is the issue I have on the landing page I am using it in. btw, i think the savestyles demo could be made more clear with an example showing an array. i was thrown off by the example selector using css comma syntax at first and wasn't wrapping my array in brackets. but either way, even without savestyles, the way i was attempting before to use ScrollTrigger.refresh(), according to docs, should recalculate things the same way it does on load, correct? i don't understand why i can't force it to restart when i need it to. here is the updated pen example https://codepen.io/davidbwaters/pen/QWdrYjO

Thanks for your response. I did try to get this working a couple of ways but I don't think I did it right. How could I enable this when looping through items like this; each item has it's own mask that needs an ID for SVGs to reference, which is why it's numbered. Should I number classes too, get them before I iterate, and savestyles for all of them?:

I'm trying to debug responsive issues I'm having and think my issue might be related. I've been trying everything I can to debug and with my usage I just can't get ST to recalculate position the same way it does when it loads. At one point it was hiding elements with my 'from' values I think, also, but if you resize this pen small and back it hides everything. If this isn't related, don't mean to hijack, just trying to help get to the bottom of this. https://codepen.io/davidbwaters/pen/QWdrYjO?editors=0111 Just for reference, here's the landing I'm trying to use it on (it's at the bottom), which has a lot of other stuff going on that is probably effecting it, but the behavior may help debug. I managed to tweak to where it behaves oddly here and stays visible, but isn't getting the position in the same way it does when it loads. i tried setting a timeout to make sure anything else resizing with just is done, which i had to do on load for it to work right. https://upbeat-hugle-f33533.netlify.app/

Haha, well, awesome work 😀 thanks. I looked through your pens and forks for a demo of a group of images. I think I tweeted you the pen when I managed to get it working initially, actually, just to share. I've looked through most of the relevant threads about a week ago but haven't seen everything in there. I'll try the suggestions and post what I find. My page has a lot going on and I think I had a few different issues at different times and need to isolate what's going on, so I'll try and get the pen working on resize first. At one point it was applying the from styles on mobile, hiding it, even when using matchMedia. One problem made for myself is looping through each item to make replacing the ref in the loop, I don't have a reference to it on mobile. I'm going to try and refactor it. I'm relatively new to GSAP and it's my first time using ST, so I got a little overwhelmed, but this forum's great, thanks for the support.

Oh man, I wish I had read the first part of this thread more closely before after searching these forums to solve my problem. So I may be having other issues, but I'm open to simplifying my setup using any solution that works. I have the liquid masking working on a demo, but the way I set up the pinning somehow breaks everything when trying to use matchMedia and recalculate things on desktop. I also can't manage to destroy the timeline styles (I guess because I'm trying not to use a fixed number of slides and am looping, so I can't reference specific tls). Anyways, I managed to get the fluid masking working pretty well in a codepen here https://codepen.io/davidbwaters/pen/QWdrYjO?editors=0110 but, as you can see, mobile is messed up. It works fine without match media. I tried adding locomotive scroll and I think the current issues are preventing that from working too, but I think the approach used here would work. I'll also give the site I'm trying to implement it in. https://upbeat-hugle-f33533.netlify.app/ It has some canvas animations that are setting sizes in a script and I could only get scrolltrigger working by setting a timeout so that stuff is calculated before the scrolltrigger init, but I can't get it to recalculate the sizes after it sets them correctly initially no matter what I do. resize from big to small and back and it goes crazy. i at least have it working on the size it starts at, disabled on mobile, like i'd like. I'm planning on refactoring and trying to get this and smoothscrolling working first, but any insight or pointers to what my issue may be would be amazing. I think if I can get a responsive codepen working (ideally with locomotive working or working when added) I could add everything else in and account for it. thanks in advance for any help. thought my work on the fluid masks might shed some light.

Thanks. I completely understand. I just wanted to see if I was overlooking something obvious that was ScrollTrigger related. I wrapped it in a DOMContentLoaded and it still had the issue, but narrowed it down to some DOM change I must be making because I added a 500ms timeout and it works.

Hi, I need the behavior of my live site to match my codepen implementation and am not sure why the trigger start is not after the title and think this is throwing off the rest of the scrolling. Thanks in advance. Not sure what's going on here. So the. codepen demo is here https://codepen.io/davidbwaters/pen/QWdrYjO and my live site is here https://upbeat-hugle-f33533.netlify.app/