ThaoD5 Posted January 23 Share Posted January 23 Hello everyone, and thanks for GSAP ! I'm building a slider that mixes quite a lot of GSAP features, i'm nearly there but there is one annoying thing that I am unable to comprehend. I am willing to add in a homemade "snap" feature (much easier to set in place) to have a precise snap on a value that I'd define myself; hereby hardcoded to 2000px. When you do scroll into the slider and wait 500ms, the "snap" simulation takes place, but unfortunately the amount of pixels where it snaps does not reflect the 2000px ( instead, we have 1775px ) What is going on ? Why exactly wouldn't it work this way ? I've tried another approach which is to animate the X value of the track that is getting translated directly, but that does not work with other features like Draggable, since the "scroll" indicator isn't correctly changed (and changing it makes it scroll and go back to a 1775px value) Any help is welcome, I've been scratching my head for a while now See the Pen jOJLYVx by hellothao (@hellothao) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 23 Share Posted January 23 Hi, I'm not 100% sure that I follow exactly what you're trying to do here. For what I can grasp I tried with either the ScrollTo Plugin: https://gsap.com/docs/v3/Plugins/ScrollToPlugin Or using ScrollTrigger's snap config and callbacks (scroll down to snap and expand with the see more button): https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object Here is a demo using the snap configuration: See the Pen gOExQeb by GreenSock (@GreenSock) on CodePen Here is a demo using the ScrollTo Plugin: See the Pen ExMvOLp by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
ThaoD5 Posted January 24 Author Share Posted January 24 Hi @Rodrigo, and thanks for your answer! So, indeed, i've looked also at using snap / scrollToPlugin, but the problem isn't really "how" to scroll to, but how to do it to have precisely 2000px translateX on the #innerSlider element. Because right now, it is impossible for me to accurately scroll to a certain element, since scrolling 2000px ends up with a final translateX value of 1757,... What I'm trying to achieve : scroll in the slider, after 500ms, automatically scrollTo the closest element so it's "centered". Let me know if it still isn't clear! Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 24 Share Posted January 24 You want to snap to each item in the animation right? Maybe I'm missing something, but the snap feature seems the perfect fit for this. I’ve placed some comments in your JS to better explain things, please be sure to read through them! And check out the snap object https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object you can define so much more in it. Hope it helps and happy tweening! See the Pen GReMKBX?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
ThaoD5 Posted January 24 Author Share Posted January 24 Hello @mvaneijgen! I've tried this solution before, but unsuccessfully, but I did the other approach of having an array of steps ([0.1, 0.2, ...]) which didnt turn out well at all ! I've just tried yours and it works as a charm ! Thanks a lot for the input and your time; 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