Jump to content
Search Community

ScrollTrigger sidebar pinned overlaid sections

TrulyNewbie test
Moderator Tag

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

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

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

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

  • 1 year later...

I hope it isn't too late to ask a question on this thread....

 

But how would you go about anchoring down to one of the coloured sections (e.g. Orange) from a navbar type thing?

 

I tried this code but it doesn't seem to work:

gsap.utils.toArray("nav a").forEach(function(a) {
  a.addEventListener("click", function(e) {
    e.preventDefault();
    const id = e.target.getAttribute("href"),
          trigger = ScrollTrigger.getById(id);
    console.log(id);
    console.log(trigger);
    gsap.to(window, {
      duration: 1,

      scrollTo:{
            y: trigger, 
            autoKill: true
        },
    });
  });
});

 

Link to comment
Share on other sites

 

Hello @fdev - welcome to the forum.

 

There is a helper function in the Helper Functions section of the docs that should help you get the scrollposition you want to scroll to.

 

Here is an example with it in place. 

 

The critical part for the ScrollTo here is in the forEach loop over the images. Depeneding on what exactly you want to do and how you want to do it, you might have to adjust the logic. That's why it's always best to add a minimal demo of what you have tried yourself - different scenarios require different logic.

 

This might help you get started though.

 

See the Pen zYaYNZd by akapowl (@akapowl) on CodePen

 

 

 

BTW, that example was taken from this following thread and modified a bit (e.g. I removed ScrollSmoother)  as some of my examples in this thread here are not 100% correct. Hope it will help.

 

 

  • Like 3
Link to comment
Share on other sites

 

Since you are using a smooth-scrolling library that makes use of transforms for smoothening the scroll and is not based on native browser scrolling, GSAP's ScrollTo plugin (which you appear to have forgotten to load in your demo anyway) will not work in that scenario.

 

smooth-scrollbar does have a scrollTo() method of its own that you should use.

 

https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md#scrollbarscrollto

 

 

Also, I would suggest not adding the eventListener for the click on the same element in multiple places like you are doing, as this is bound to create conflicts. If you want to stick to that concept, just put it in the one forEach loop that is relevant for you.

 

One more thing I noticed is that you have excessive characters in the values of your tweens in multiple places, you might want to fix that.

 

// e.g.

tl
  .fromTo(image, 
    { height: () => { return "2safa00%" } }, // <<------- 200%
	{ height: () => { return "0%" }, ease: "none" })
;

 

 

 

Lastly, you might want to further check on the smooth-scrollbar documentation, because for me when viewed on full-screen, there is an extra scrollbar showing with your example.

 

https://github.com/idiotWu/smooth-scrollbar

https://github.com/idiotWu/smooth-scrollbar/tree/develop/docs

 

 

See the Pen XWYJJvG by akapowl (@akapowl) on CodePen

 

See the Pen bGKNNOr by akapowl (@akapowl) on CodePen

  • Like 1
Link to comment
Share on other sites

@akapowl

 

Thanks again for your reply, I want to stick with using gsap as I am assuming the libraries I am using are free to use.

 

I have used your structure and made my own codepen but I am struggling with a few things I hope you can help with:

 

1. I have added in buttons to anchor down to the sections but the 4th one (purple) isnt working, is this to do with this bit of code - let p = gsap.utils.clamp(0, 1, progress || 0),

 

2. There is a bit of a delay before the blue slide starts to move, is there a way to get this to start moving when the screen starts scrolling?

 

3. Is there a way I can get the background text (e.g. 'BLUE') to sit on top of the images while scrolling but when you stop scrolling it falls behind the images?

 

4. Also with this background text can I get it to scroll with the coloured background like my previous codepen did?

 

5. Can I get rid of the black section at the bottom? So when it gets to purple you can't scroll back past that?

 

 

Sorry quite a few questions, thank you in advance!

 

My codepen:

See the Pen ZERYWvd by fayskerritt (@fayskerritt) on CodePen

 

Link to comment
Share on other sites

 

2 hours ago, fdev said:

1. I have added in buttons to anchor down to the sections but the 4th one (purple) isnt working, is this to do with this bit of code - let p = gsap.utils.clamp(0, 1, progress || 0),

 

No, that is related to the purple section not being part of the array that is being looped over where the eventListener is added, because that is just how that example works.

 

Edit:

There is a missing space for var images in the code snippet below - I can not seem to edit it anymore.

Everytime I change it, it will jump back to the typo it was before - just be aware of that.

 

// see
varimages = gsap.utils.toArray('.panel:not(.purple)');

 

If you still want to stick to that concept with regard to the eventListeners, you can target the purple section's scroll-position in there like so

 

i === 2 && document.querySelector('button.fourth').addEventListener('click', autoScrollHere4) 

function autoScrollHere4() {
    
      gsap.to(window, {scrollTo: getScrollPosition(tl, 0.999)}); 
}

 

As you can see from how the helper function is set up...

 

function getScrollPosition(animation, progress) { // <--- second parameter accepts the progress of a tween/tl
	...
}

 

...and also from the explanation in the docs I linked earlier, the second parameter of the function accepts the progress of a tween/tl.

 

Since the purple section is visible at the end of the last array-item's tl, just get the scroll-position of that instead - I made it 0.999 because at progress 1 it already went 1 or 2 pixels too far. Although, that was before I got rid of the space below, so now you should be technically be able to set it to 1 again, as there is no more space below.

 

[You could also just pass the scrollTo tween directly to the eventListener instead of wrapping it in a function and adding that function, but let's just keep it as is for now]

 

 

 

2 hours ago, fdev said:

2. There is a bit of a delay before the blue slide starts to move, is there a way to get this to start moving when the screen starts scrolling?

 

That is because of how the ScrollTriggers are set up in my example - as I wanted that at first only the blue text comes animating in and then at a later point the image starts animating. What mostly matters here is the start of the ScrollTrigger. If you want everything to start right away, you need to adjust that.

 

In the pen below, I set it to

 

start: () => "top -" + (window.innerHeight * i),

 

on all ScrollTriggers, so they all start right away and all at the same time. Now with that setup, I also adjusted the end of the pinning ScrollTrigger (the very first one)

 

// to this...
end: () => "+=" + ((images.length) * window.innerHeight),
  
// ...instead of this
end: () => "+=" + ((images.length + 1) * window.innerHeight),

 

to get rid of any excessive scroll at the end - and got rid of the excessive .fromTo() tween you've got in that last tl for the texts, which essentially does nothing as it tweens the text from 0% to 0%.

 

// this one
.fromTo(text, 
{ y: () => { return "0%" } }, 
{ duration: 2, y: () => { return "0%" } })

 

Alongside excluding the purple-text from the text-array, that also answers your last question, btw.

 

Edit: 

Same typos for the vars ahead as mentioned earlier - be aware! I can't change this snippet anymore, either.

 

// this..
vartexts = gsap.utils.toArray('.panel-text:not(.purple-text)');

// ..instead of this
vartexts = gsap.utils.toArray('.panel-text');

 

 

 

2 hours ago, fdev said:

3. Is there a way I can get the background text (e.g. 'BLUE') to sit on top of the images while scrolling but when you stop scrolling it falls behind the images?

 

There probably is - you could e.g. in an onUpdate callback of a respective scrubbing ScrollTrigger set the text (meaning the paragraph of every respective text-container alone) to a very high z-index, and with a delayedCall after that, set it back, so it jumps back behind the images when you have stopped scrolling.

 

Yet, that would probably require some re-work of the layout in the first place (because this demo didn't have something like that in mind at all in the first place) and then on top of that some deeper thought with regard to the logic for that.

 

I'm happy to help so far, but that is nothing I can do for you, as this free support forum is not a place for requests like 'I want x to do y when z happens'.

 

 

 

2 hours ago, fdev said:

4. Also with this background text can I get it to scroll with the coloured background like my previous codepen did?

 

Same goes for that - It surely is possible, but you will likely have to adjust the setup a bit to get that done.

 

 

 

Now, here is that example with the changes I mentioned before in place. Additionaly I elevated the z-indexes of the panels by one because the images being revealed did not show up 'correctly' in the setup of your pen.

 

gsap.set(".panel", { zIndex: (i, target, targets) => 1 + targets.length -i });

gsap.set(".panel2", { zIndex: (i, target, targets) => 1 + targets.length -i });

 

See the Pen GRGgrbb by akapowl (@akapowl) on CodePen

 

 

 

In general I would suggest maybe starting from a different point than this example, if you don't have much experience with ScrollTrigger so far.

 

And since I mentioned that thread once before already - there also are easier and probably more concise ways  to get something like that done mentioned over there - especially now that you have all the scrubbed tweens start at the same time.

 

I made use of the mapRange() utility method in the pen below, to map the progress of the timeline to the number of panels animated, in order to get the correct value for the respective index of each button here. Be aware, that this exact way things are set up will only work, when the number of buttons you have corresponds with the number of panels you have in total.

 

 

 

See the Pen VwdYbjj by akapowl (@akapowl) on CodePen

 

 

 

If you have any more GSAP specific questions (like with regard to the API or understanding GSAP core concepts), please create a new thread for those - best, a new thread for each of any more questions you might have, and keep them as short and concise as possible. That way a) not all the users in this thread get notified every time there is an update, b) it gets a whole lot easier to help you - as a long list of questions can become quite overwhelming, and c) it will be way easier for you to understand certain principles if they are condensed in small chunks of information rather than everything spread out over a huge wall of text. 

 

Anyway, I hope all this will help a bit. Good luck!

 

  • Like 2
Link to comment
Share on other sites


@akapowl, hi, I looked at your answers in this thread and wanted to repeat the same thing that you did here,  but already on react, I seem to have completely transferred everything that is needed, but the scroll still does not work correctly if you scroll down, could you tell me where i went wrong? 

 

your example: 

See the Pen a959c4e8955ef38bc4fe43bf7adde621?editors=0010 by akapowl (@akapowl) on CodePen

my try:
https://codesandbox.io/s/funny-tereshkova-y2xuk7?file=/src/App.js

Link to comment
Share on other sites

 

Your problems are related to React.

 

When I remove StrictMode it works as it does in the codepen demo.

 

See this thread for why StrictMode / React 18 can create problems with regard to GSAP

 

 

 

 

And see these Articles for how to use GSAP with React;

 

Especially the parts about gsap.context() and Cleaning Up.

 

 

 

 

 

You will also likely have to implement some sort of Clean-Up with regard to smooth-scrollbar, but since that is not a GreenSock product, it is not within what these free support forums can offer. You can check their docs for information about their API.

 

https://idiotwu.github.io/smooth-scrollbar/

 

https://github.com/idiotWu/smooth-scrollbar

 

https://github.com/idiotWu/smooth-scrollbar/tree/develop/docs

 

https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md

 

 

 

I know that there is  a react verison/wrapper for smooth-scrollbar, too - maybe that can help somehow.

 

https://github.com/idiotWu/react-smooth-scrollbar

 

Welcome to the forum - and scroll responsibly!

 

  • Like 1
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.
×
×
  • Create New...