Jump to content
Search Community

Scroll Trigger, Smooth-Scroll & position: fixed

Houwer test
Moderator Tag

Recommended Posts

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

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.

 

 

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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

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.

  • Like 2
Link to comment
Share on other sites

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

@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

@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

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

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