Jump to content
GreenSock

Ivan Mocs

how to make the container also pin to the top?

Recommended Posts

I have a problem when using smoothscroll, the yellow mask container should be pinned to the top.

Before using the yellow smoothscroll the container is pinned to the top

how to solve this?

Screenshot 2022-09-10 103705.png

See the Pen eYrZgXM by ivan-nizters (@ivan-nizters) on CodePen

Link to comment
Share on other sites

Hi there, position sticky doesn't work with ScrollSmoother as the containing element has a transform applied (this is a browser limitation)

You can use ScrollTrigger to pin elements instead!

Link to comment
Share on other sites

14 minutes ago, Cassie said:

Hi there, position sticky doesn't work with ScrollSmoother as the containing element has a transform applied (this is a browser limitation)

You can use ScrollTrigger to pin elements instead!

the above code is already using scrolltriger and it works fine for pins, but when i add scrollsmother, only the sections inside the container are pinned

Without ScrollSmoother / ScrollTrigger Only:

Screenshot 2022-09-10 160220.png

Link to comment
Share on other sites

Your demo relies on position: sticky. If you remove that, it behaves identically using ScrollSmoother (or not), right? I think that's what Cassie is saying. If you think this is unrelated to position: sticky, please provide a minimal demo that doesn't use position: sticky and illustrates the problem and we'd be happy to take a peek. 

Link to comment
Share on other sites

33 minutes ago, GSAP Helper said:

Your demo relies on position: sticky. If you remove that, it behaves identically using ScrollSmoother (or not), right? I think that's what Cassie is saying. If you think this is unrelated to position: sticky, please provide a minimal demo that doesn't use position: sticky and illustrates the problem and we'd be happy to take a peek. 

okay i know, i've removed position:sticky then i added pin via new scrolltriger, but this is the result :

See the Pen eYrZgXM by ivan-nizters (@ivan-nizters) on CodePen

i want to make it like using position:sticky like this :

See the Pen qBYZGeP by ivan-nizters (@ivan-nizters) on CodePen

Link to comment
Share on other sites

I don't think there's a simple solution. Creating a custom effect like that is beyond the scope of help we can provide here for free - it would require some strategic planning and digging to figure out a solution for you.

 

If your goal is to just smooth out wheel scrolling, you could use Observer plugin and craft a custom solution that tweens the scroll position on wheel events. You wouldn't get the whole smooth scrolling experience (ScrollSmoother works on all ways of scrolling, not just wheel), but perhaps that'd suffice in your case.  

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

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