Jump to content
GreenSock

TrulyNewbie

ScrollTrigger sidebar pinned overlaid sections

Go to solution Solved by TrulyNewbie,

Recommended Posts

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.

Link to comment
Share on other sites

@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

  • Like 1
Link to comment
Share on other sites

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?: 

CleanShot 2021-05-08 at 11.11.13@2x.png

Link to comment
Share on other sites

 

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.

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Quote

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.

 

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.

See the Pen BaWNoRy?editors=0010 by ShehzadAsif (@ShehzadAsif) on CodePen

 

Happy coding

 

Regards,

Shehzad Asif

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

No need to sorry.

 

Quote

I just wanted a minimum viable example of matchmedia being applied and i intentionally didn't add mobile styles in the codepen

Minimal and complete demo can save time to all of us.

 

Quote

I am not new to CSS at all

No offend at all. Do not take it hard.

 

Quote

but my issue persists in your updated demo

I noticed that you did not used "c-fluid-reveal__wobble" class on all of your mask path. Pls check your demo again and see if anything missing.

 

You can use ST refresh when required. It was not required as per the demo.

  • Like 1
Link to comment
Share on other sites

Hey

 

If above conversation hurt you in any way. I apologize for it.

Is it like what you want. I put the missed classes on mask and used fromTo instead of from / to.

 

See the Pen gOmpPQG?editors=0010 by ShehzadAsif (@ShehzadAsif) on CodePen

  • Like 1
Link to comment
Share on other sites

8 hours ago, Shehzad said:

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.

@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. 

  • Like 4
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@davidbwaters Good to hear that. Feel free to post your questions on the forum in future and the community will try to help around.

Link to comment
Share on other sites

4 hours ago, GreenSock said:

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.


Hugely agreeing with this. Glad you got this sorted in the end pals.

Thanks for helping out @Shehzad, and good job spotting that SVG bug @davidbwaters. ūüźõ

  • Like 3
Link to comment
Share on other sites

2 minutes ago, Cassie said:


Hugely agreeing with this. Glad you got this sorted in the end pals.

Thanks for helping out @Shehzad, and good job spotting that SVG bug @davidbwaters. ūüźõ

Thanks for your cool wavy mask and demo!

  • Like 1
Link to comment
Share on other sites

My pleasure! Always fun to see things I've demo'd out there in the wild. 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
√ó