Share Posted August 18, 2022 Hi, Is it possible to have horizontall gallery scrolling (to the left on the mousewheel) with pining in the fullscreen modal? Scrolltrigger seems not to work inside modal Link to comment Share on other sites More sharing options...
Share Posted August 18, 2022 Definitely possible. You'd have to post a demo for us to understand the full context of the situation. Link to comment Share on other sites More sharing options...
Author Share Posted August 18, 2022 Hi SteveS, Thank you. Here is an example of what I mean: See the Pen GRxPdVL?fbclid=IwAR2p3fGQl4PQr5ER9ZxfI-VUa7jbiAKkkBk1znTbjfxCP0uubcgmVHdDz5E by piotr-jarosz (@piotr-jarosz) on CodePen I would like to to force user to scroll whole gallery before user can go down of the modal Link to comment Share on other sites More sharing options...
Share Posted August 18, 2022 Hi there - thanks for the demo. We prefer vanilla JS demos here that are stripped back to the absolute essentials. It's much easier for people to assist and diagnose the issue without frameworks muddying the waters. Could you strip this back a bit for us? Thanks so much. Link to comment Share on other sites More sharing options...
Solution Solution Share Posted August 18, 2022 @RIOTCODE Here is a demo I wrote up. Importantly, you need to define the "scroller" in the scrollTrigger config object: https://codesandbox.io/s/admiring-pike-wgqzv7?file=/src/App.js Link to comment Share on other sites More sharing options...
Share Posted August 18, 2022 That was really nice of you to write up a full solution Steve! Thanks Link to comment Share on other sites More sharing options...
Share Posted August 18, 2022 (also hey! Shiny new mod badge!) 1 Link to comment Share on other sites More sharing options...
Share Posted August 18, 2022 Thanks Cassie. Do you know why in my demo there's a bit of stutter on the horizontal scroll? I imagine it's because the pintype on inner scroll containers is transform by default. Link to comment Share on other sites More sharing options...
Share Posted August 18, 2022 I don't see the stutter here? buttery smooth for me (chrome, mac) Link to comment Share on other sites More sharing options...
Share Posted August 18, 2022 Odd. On Firefox I was definitely getting some stutter. I can't replicate it for some reason. Woe is web animations. 1 Link to comment Share on other sites More sharing options...
Author Share Posted August 18, 2022 Than you Steve, I tried to implement but without a luck. I wrote you PM if you would take a look it would be awesome Link to comment Share on other sites More sharing options...
Share Posted August 18, 2022 Steve's welcome to answer but we do try to keep discussions public as it helps more other people that way. 💚 (Unless you can't divulge parts of projects publicly of course - then go ahead!) 1 Link to comment Share on other sites More sharing options...
Share Posted August 18, 2022 He was having some issues due to a combination of factors specific to his setup. NextJS + specific modal component + combining with framer motion. In the end my provided demo was the correct solution. It just had to be refit to a pre-existing codebase. 1 Link to comment Share on other sites More sharing options...
Share Posted August 18, 2022 Thanks for taking the time to help Steve, champion Link to comment Share on other sites More sharing options...
Author Share Posted August 19, 2022 Steve is a Super Hero, true Tony Stark of GSAP 1 1 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