Jump to content
Search Community

Position fixed problem with Scrolltrigger

Umberto test
Moderator Tag

Recommended Posts

This sound more like a CSS issue than a GSAP one.

 

Your probably shouldn't nest your modal like that. Your container is being translated, so of course the modal is going to move.

 

See the Pen ab5f34b1a093580e13f6228f38602790 by osublake (@osublake) on CodePen

 

Also, you're using the older syntax, which has been deprecated. Here's how to migrate to the newer syntax.

 

  • Like 1
Link to comment
Share on other sites

Thank you for your reply, very kind.
As for the syntax I'll fix it later.

I have tried your example before, and it is correct. But what I wanted is that the modal covered the whole layout (100%) and if it was possible to stop scrolling when the modal or image was in fullscreen.

Instead if I use the smooth scroll of Scrolltrigger no work

 

gsap.registerPlugin(ScrollTrigger, CustomEase);
console.clear();
//
var container = document.querySelector("#content");
var height;
function setHeight() {
  height = container.clientHeight;
  document.body.style.height = height + "px";
}
ScrollTrigger.addEventListener("refreshInit", setHeight);
gsap.to(container, {
  y: () => -(height - document.documentElement.clientHeight),
  ease: "none",
  scrollTrigger: {
    trigger: document.body,
    start: "top top",
    end: "bottom bottom",
    scrub: 2,
    invalidateOnRefresh: true,
      onRefresh: self => {
        // when the screen resizes, we just want the animation to immediately go to the appropriate spot rather than animating there, so basically kill the scrub. 
        gsap.killTweensOf(self.animation);
        self.animation.progress(self.progress);
      }
  },
});

See the Pen PopppXR by umberto (@umberto) on CodePen

 

Is there a solution?

Thanks

Link to comment
Share on other sites

Sorry pal, I'm really not sure what you're trying to do here.

 

You're animating the container up and down in the code and the box is going up and down visually. What's happening is exactly what you're instructing to happen.

If you want the modal to be fixed and cover 100% width and height that's what CSS is for
 

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3
}  

 

If you don't want the modal to animate with the container - take it out of the container in the DOM so it's not affected by transforms on the parent.

If you want the body to stop scrolling there are a few ways but setting the height of the body to 100% and overflow to hidden is the most common.

GSAP can't really help you with the logic of CSS side of things and that's the issue here - focus on getting your CSS right before delving into JS animations or things can get messy real quick!

If you run into any scrollTrigger issues we're here to help!

  • Like 1
Link to comment
Share on other sites

Hi, I probably couldn't explain myself for my bad English.

For the structure of the HTML / CSS I had already solved before sending my first post, but the problem is another.

 

I created 2 pens with the same HTML / CSS structure. 

The first without ScrollTrigger and it works very well.
The second pen, I use native Scrolltrigger (https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy ()), and there are scroll problems here.

 

See the Pen MWppVOO by umberto (@umberto) on CodePen

 

See the Pen mdWWxXy by umberto (@umberto) on CodePen


As you can see (in the second pen), the page layout does not scroll modal.

Therefore, I believe, it is a problem in handling the height of the Scrolltrigger viewport and not the CSS or HTML DOM, so I think.

 

 

Ps: I saw that with codepen (second example) does not highlight the problem, I send a link to understand better: 

https://webgraphicart.com/artik/codepen-modal-2.html

Link to comment
Share on other sites

 

Hey @Umberto

 

From what I can tell you from my experience with smooth-scrolling, position fixed elements most often (if not always) won't work the way you'd expect inside the element that is being translated up and down for the smooth-scrolling effect.

 

This seems to be the case here too, so you will probably have to place your modal outside of your #content if you want the position fixed to apply.

 

See the Pen 1893b89b6fb9a775989f1530f908dc30 by akapowl (@akapowl) on CodePen

 

 

On a further note; you seem to be using an older approach of the scrolltrigger-native smooth-scrolling.

 

@GreenSock has whipped together a very helpful helper-function for scrolltrigger-native smooth-scrolling some time ago, that you might not be aware of yet - it will save you some troubles further down the road when it comes to pinning things, so you might want to consider taking a look at and using that one instead. You will find it on the .scrollerProxy() documentation page (first demo in there) - it won't change what I said above about position fixed elements though.

 

 

Sidenote:

Your demo was not working because you were missing a closing </div> tag in your html and were not loading the scripts from a valid ressource - I changed that in my pen above.

  • Like 1
Link to comment
Share on other sites

Hi akapowl, thank you for your reply.
I have already updated the new version of native Scrolltrigger.

 

I had already tried to insert modals before #content and they work very well, but some animations and image galleries can't insert them before.

 

As you said, even updating the new version of native Scrolltrigger, the problem is not solved with the fixed position.

 

Thanks for your patience
 
  PS: thanks for the </div>

Link to comment
Share on other sites

1 hour ago, Umberto said:

I had already tried to insert modals before #content and they work very well, but some animations and image galleries can't insert them before.

 

Since you are disabling and replacing default browser functionality, that is just one of several downsides of using smooth-scrolling you will encounter. I know of no smooth-scrolling library that works in a way that it would be possible to use position fixed the expected way inside the smooth-scrolling container, so I really don't think, that the scrolltrigger-native smooth-scrolling is misfunctioning with that regard.

 

 

See the Pen 327ce21377855eaabd007812a5c3dce9 by akapowl (@akapowl) on CodePen

 

See the Pen 3b0caa587aaed284c57ae9374b3d0718 by akapowl (@akapowl) on CodePen

 

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

 

 

Gallery libraries for example are not designed with something like smooth-scrolling in mind - they rely on default browser functionality. So when you want to use smooth-scrolling you will either have to tinker with how the third-party (gallery) libraries handle things yourself or you will have to find other workarounds.

 

  • Like 2
Link to comment
Share on other sites

What you say is the truth, with smooth scrolling I am having many difficulties, fortunately many of the problems I have managed to solve.

I have tried various libraries (Locomotivescroll, Smooth-Scrollbar, etc ...), but the best is that of Scrolltrigger, ever ....

 

I have to find a new solution to try to create an Image Gallery with a position fixed fullscreen.

 

In the meantime, thank you for the advice and for your time.
You gave me a nice explanation.

 

Thanks

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