Ivan Mocs Posted September 10, 2022 Share Posted September 10, 2022 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? See the Pen eYrZgXM by ivan-nizters (@ivan-nizters) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted September 10, 2022 Share Posted September 10, 2022 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 More sharing options...
Ivan Mocs Posted September 10, 2022 Author Share Posted September 10, 2022 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: Link to comment Share on other sites More sharing options...
GSAP Helper Posted September 10, 2022 Share Posted September 10, 2022 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 More sharing options...
Ivan Mocs Posted September 10, 2022 Author Share Posted September 10, 2022 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 : 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 More sharing options...
GSAP Helper Posted September 12, 2022 Share Posted September 12, 2022 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 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