ginphreak Posted January 11 Share Posted January 11 Hi forum, I have a problem with an animation very similar to the one in the example. What I would need is to change panels on every single scroll, without interludes. Can you give me some advice? Let me explain better: in the example the horizontal part does not change as if it were a slide. See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
ginphreak Posted January 11 Author Share Posted January 11 See the Pen YzyaKrq by GreenSock (@GreenSock) on CodePen This is the result I try to achieve but horizontally Link to comment Share on other sites More sharing options...
GreenSock Posted January 11 Share Posted January 11 Are you asking to apply the snapping immediately instead of there being a bit of a delay? As far as I know, that's not possible because ScrollTrigger needs to wait until the wheel/scroll/touch events stop firing before it can apply its snapping logic, otherwise it would interfere with the user scrolling. Link to comment Share on other sites More sharing options...
ginphreak Posted January 11 Author Share Posted January 11 And a solution that work fine with ScrollSmoother enabled? Link to comment Share on other sites More sharing options...
Rodrigo Posted January 11 Share Posted January 11 Hi, Maybe the Observer Plugin could be a better alternative based on what you're describing: https://gsap.com/docs/v3/Plugins/Observer/ See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen Happy Tweening! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 11 Share Posted January 11 12 minutes ago, ginphreak said: And a solution that work fine with ScrollSmoother enabled? No, I would not expect that to work with ScrollSmoother because the scrolling mechanics are completely different. The only thing you could potentially try (which isn't simple) is to create a copy of your section elements that are position: absolute (solely for the purpose of scroll snapping - you should make them invisible, like visibility: hidden), put them OUTSIDE your #smooth-wrapper element, and apply normal CSS scroll snapping to those. Like @Rodrigo said, perhaps an Observer-based solution would suit you better. Link to comment Share on other sites More sharing options...
ginphreak Posted January 12 Author Share Posted January 12 12 hours ago, Rodrigo said: Hi, Maybe the Observer Plugin could be a better alternative based on what you're describing: https://gsap.com/docs/v3/Plugins/Observer/ Happy Tweening! Unfortunately with ScrollSmoother active it doesn't work Link to comment Share on other sites More sharing options...
Rodrigo Posted January 12 Share Posted January 12 6 hours ago, ginphreak said: Unfortunately with ScrollSmoother active it doesn't work Yeah, my suggestion of using Observer is like the demo I linked in my post, not use scrolling at all, just Observer, at least for the page where you need those particular effects. As Jack mentioned this is not something that is supported out of the box due to the way scrolling works on browsers. Another alternative could be to port this demo to a setup with ScrollSmoother: See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
ginphreak Posted January 18 Author Share Posted January 18 I tried using Observer but nothing: I always have a certain unnatural effect different from what I get by deactivating ScrollSmoother. Other Ideas? Link to comment Share on other sites More sharing options...
Rodrigo Posted January 18 Share Posted January 18 Hi, Sorry I can't think of anything besides what Jack already suggested: On 1/11/2024 at 5:11 PM, GreenSock said: The only thing you could potentially try (which isn't simple) is to create a copy of your section elements that are position: absolute (solely for the purpose of scroll snapping - you should make them invisible, like visibility: hidden), put them OUTSIDE your #smooth-wrapper element, and apply normal CSS scroll snapping to those Good luck with your project Happy Tweening! 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