davidbwaters
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by davidbwaters
-
-
2 hours ago, GreenSock said:
@Shehzad I'm super grateful for you jumping in to offer help (seriously - I wish more people would do that) but I just want to take a moment to point out something that's REALLY important to us here in these forums...
There are plenty of developer forums where people are made to feel stupid for asking certain things, or not doing it exactly the right way or whatever. We never...NEVER want the GreenSock forums to have that vibe. This community prides itself on being extremely friendly, warm, and helpful. Most developers are the type of people who like figuring things out by themselves, so if they're posting their question here it means they've exhausted themselves trying and they're taking a risk by putting themselves out there and asking a question. They may already feel dumb for not figuring it out. It's a vulnerable place to be. So responses like yours, though I'm sure you didn't mean it that way, can come across as insulting and condescending. We just can't have any of that around here.
I see from your later posts that you were apologetic and meant no offense. Cool. I just felt the need to reinforce the tone here. Again, I encourage you to keep helping others around here because it's a fantastic way to learn and it's always wonderful to see community members helping other community members.
@davidbwaters was correct - there was a problem in ScrollTrigger that his demo exposed, related to the fact that SVG elements have their transforms applied via the "transform" attribute rather than CSS styles, so I needed to update ScrollTrigger accordingly. The latest beta has that fix in place. https://assets.codepen.io/16327/ScrollTrigger.min.js Thanks for pointing that out, David. And I apologize for any confusion there as well as the rough reception you got initially here in this thread. I hope you'll stick around and feel welcome to post questions in the future here.
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.
-
23 minutes ago, Shehzad said:
A side note, do not post your problem in other people's thread, it is against the forum policy and can be confusing for other people. Once you post the issue here, wait for the people to respond and stick to your thread.
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.
-
34 minutes ago, Shehzad said:
Oh man,
I am doubting on your skills (no offend). You are bringing a problem here but do not know even how to do CSS and not following the guidance.
1- Your grid elements are absolute position in desktop overlaying each other. No media query for mob version. I set them position relative in mob so they are in line.
2- you are using mask over images for that effect but not removing that mask from the images in mob version so they are visible in mob. I removed that.
3- I told you to savestyles for all the elements effecting by the tween. You did not savestyels for the images. I did that.
4- I recommended you to go through the post mentioned by Cassie. I do not think you did that.
I did that your work and now everything is working as expected.
At least try to do the work on your end so that problem is more visible clearly and can be solved without doing extra work on our end.
I told you before that you do not need to use refresh function for your specific case bcs ST itself recalculate things on resize so no need for that.
Anyhow below is the working demo. I hope now it is as you expected.
Happy coding
Regards,
Shehzad Asif
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.
-
1 hour ago, Shehzad said:
No, problem, you can assign a single class (for example "initial-state" class for all elements effecting by tweens) for reference to each mask/ svg and img. Set the initial state of elements as you want on mobile. Use
ScrollTrigger.saveStyles('.initial-state'); // before using matchmedia
and I am quite sure that it will solve the problem.
I would strongly suggest you to go through the post cassie posted above, try to understand the logic. Your situation is quite similar to that.
Give it a try.
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
See the Pen QWdrYjO by davidbwaters (@davidbwaters) on CodePen
-
19 minutes ago, Shehzad said:
@davidbwaters It looks like that your problem is related to matchmedia setup. What I suggest is that you use the latest beta of ST from "Cassie" reply. And use
ScrollTrigger.saveStyles('your targets') // target are the selectors you are usign in your tweens or timelines in matchmedia function
before matchmedia.
You do not need to kill tweens chained with ST under matchmedia functions. They are killed itself when that breakpoint is not in use.
I hope this will solve your issue.
Regards,
Shehzad Asif
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.
See the Pen QWdrYjO?editors=0111 by davidbwaters (@davidbwaters) on CodePen
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/ -
50 minutes ago, Cassie said:
Firstly, hah! It's my mask 👀
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
See the Pen QWdrYjO?editors=0110 by davidbwaters (@davidbwaters) on CodePen
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.
-
2
-
-
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 and my live site is here https://upbeat-hugle-f33533.netlify.app/
See the Pen QWdrYjO by davidbwaters (@davidbwaters) on CodePen
ScrollTrigger sidebar pinned overlaid sections
in GSAP
Posted
Thanks for your cool wavy mask and demo!