Houwer Posted August 3, 2020 Share Posted August 3, 2020 When I use Scroll Trigger combined with smooth-scroll the "position: fixed;" of the elements on the screen are not working. All elements with "position: fixed;" behave as "position: relative". Is there any way to solve this problem. Thanks in advance. Link to comment Share on other sites More sharing options...
elegantseagulls Posted August 4, 2020 Share Posted August 4, 2020 Hi @Houwer, It's tough to say without seeing your code, a minimal example would be very helpful. However, it sounds to me like you might be applying a transform to the parent of your position: fixed; element, which removes it's fixed context, and positions it relative to the transformed container instead of the viewport. 3 Link to comment Share on other sites More sharing options...
GreenSock Posted August 4, 2020 Share Posted August 4, 2020 I'd echo @elegantseagulls's request for a minimal demo. Very difficult to troubleshoot blind. Also, here's an excerpt from the FAQ section of the docs: Quote Pinning is broken - my pinned element jumps and/or moves when I scroll; What do I do? First, read the docs above about the pinReparent: true option. You probably have an ancestor element with a transform or will-change which "breaks" position: fixed behavior (at least browsers won't act the way you may expect). It's a browser thing, not a ScrollTriggrer thing. Try to avoid transforms and will-change on ancestor elements but pinReparent: true may rescue you. Just beware of the tradeoffs. Another reason for misalignment of start/end values could happen if you're doing pinning but you didn't create your ScrollTriggers in the order they'd happen (top-to-bottom or left-to-right). For example, if you create a ScrollTrigger for something further down on the page and THEN you create one that performs pinning that's further up on the page, that pinning would affect the start/end positions of the one further down (which was already created and had its positioning calculated). It's very hard for ScrollTrigger to know exactly how your page is laid out. So always create things in the order they'll happen on the page. 1 Link to comment Share on other sites More sharing options...
Houwer Posted August 5, 2020 Author Share Posted August 5, 2020 Thank you very much @elegantseagulls & @Jack for the clue. I think I solved my problem: ScrollTrigger.create({ trigger: '.nav-header', start: 'top top', endTrigger: 'footer', end: 'bottom+=100vh bottom', pin: true, pinType: "fixed", markers: true, pinReparent: true, pinSpacing: false }); Link to comment Share on other sites More sharing options...
Achyl Posted April 6, 2022 Share Posted April 6, 2022 @Houwer How did you solve your problem ? Only with pinType ? I face the same problem but the solution you wrote here didn't work for me. Link to comment Share on other sites More sharing options...
GreenSock Posted April 7, 2022 Share Posted April 7, 2022 @Achyl what exactly is the problem? Got a minimal demo we could peek at? That'd significantly increase your chances of getting a solid answer. If there are any bugs, we certainly want to squash them ASAP. Link to comment Share on other sites More sharing options...
Dennyno Posted April 8, 2022 Share Posted April 8, 2022 I showed same problem here too: It's mostly dued to the transform on the container.. but I cant solve it... Link to comment Share on other sites More sharing options...
akapowl Posted April 8, 2022 Share Posted April 8, 2022 I answered your question over in that other post of yours @Dennyno Please don't post duplicates. 5 Link to comment Share on other sites More sharing options...
Achyl Posted April 11, 2022 Share Posted April 11, 2022 Hello @GreenSock, Thank you for reaching out. I made a minimal demo for you to check. Here it is: See the Pen bGajrjj by Achyl (@Achyl) on CodePen . The situation is what I have now, without the scrollsmoother. Once you uncomment the scrollsmoother, it doesn't show up. I think the problem comes from the position fixed, because when it's not fixed it's working well. Can you please help me ? Simon Link to comment Share on other sites More sharing options...
elegantseagulls Posted April 11, 2022 Share Posted April 11, 2022 27 minutes ago, Achyl said: I think the problem comes from the position fixed ScrollSmoother adds a transform (to smooth the scroll) to a parent of your fixed position item, which causes it to loose its fixed position context. You might consider using ScrollTrigger's pin instead of fixed positions, or move any fixed-position elements outside of the ScrollSmoother containers, but that may complicate things as well. 2 Link to comment Share on other sites More sharing options...
Achyl Posted April 13, 2022 Share Posted April 13, 2022 Thanks for the answer @elegantseagulls. Do you have some documentation about the ScrollTrigger's pin ? Because when I try unmute the scrollsmoother and the pin it still doesn't work, I think I'm missing a point. Thanks again. Simon Link to comment Share on other sites More sharing options...
GreenSock Posted April 13, 2022 Share Posted April 13, 2022 Docs are at https://greensock.com/docs/v3/Plugins/ScrollTrigger#pinning I noticed that your demo is using jQuery and altering the marginTop in a scroll event handler which is very inefficient. I definitely wouldn't do that. If you're having struggles, please provide a clear minimal demo that shows just the problem you're experiencing and we'll do our best to help. It looks like your demo has some JS errors, like you're doing a loop but inside the loop you're attempting to get an array[i+1] which will throw an error on the final loop because there is no such element. Also make sure you're using the latest version (3.10.3 right now). Link to comment Share on other sites More sharing options...
Achyl Posted April 18, 2022 Share Posted April 18, 2022 @GreenSock Thank you for your answer and advices. I managed to make scrollsmoother work with scrolltrigger, but impossible to reach the effect I want. What I want is that every box appear one after another, and set up the moment they arrived through the start position of the animation. But when I set up a start position, it remove/adds a margin or a padding somewhere. I'm sure I'm doing something wrong, but I can't figure it out. I updated the demo to make it more simple: See the Pen bGajrjj by Achyl (@Achyl) on CodePen And this is the effect I would like: https://drive.google.com/file/d/1EX00DgUhxdyyYL87ERtXG2AuYgoUo-X5/view?usp=sharing It has been days I'm struggeling with that, I red all the doc I could. If you could help me with that it would be awesome ! Simon Link to comment Share on other sites More sharing options...
OSUblake Posted April 18, 2022 Share Posted April 18, 2022 Hi @Achyl Your video isn't public, so we can't see it. Link to comment Share on other sites More sharing options...
Achyl Posted April 18, 2022 Share Posted April 18, 2022 Sorry, I didn't notice. It's updated, you should see it. Link to comment Share on other sites More sharing options...
OSUblake Posted April 18, 2022 Share Posted April 18, 2022 Ok, I watched the video, but now I'm a little confused about what you're having problems with. What's the issue with the demo you posted above? Link to comment Share on other sites More sharing options...
Achyl Posted April 19, 2022 Share Posted April 19, 2022 @OSUblake In the demo I posted, I can't add many boxes in the same div and make it appear one after another, regarding the position of the window. I would be able to do it with the line start: "100px top" but when I unmute it, it gives a margin or a padding to the parent element and don't do what I want at all. I'm still trying to fix this, and I realised that the Scrollsmoother interacts with the pin: ".box1" in a bad way. I still dont have solutions for the moment. Link to comment Share on other sites More sharing options...
OSUblake Posted April 19, 2022 Share Posted April 19, 2022 I'm still a little confused about what the problem is. What do you mean by "unmute"? And what do mean by having the boxes appear one after another? That can mean a lot of different things, like a fade animation, scrolling into view, etc. You said it works without ScrollSmoother, right? Can you post a demo showing the correct behavior without ScrollSmoother? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now