vamsi_k Posted June 13, 2023 Share Posted June 13, 2023 (edited) Hello, I tried to recreate material ui 3 carousel with GSAP. When we swipe on the carousel, width of next image in the line should increase and width of current image should decrease. I added labels in the timeline where one of the images are in expanded positions. When the timeline is linked to a ScrollTrigger, Snap to labels is working fine. And it is not working if timeline is linked to draggable. I tried snap: { snapTo: "labelsDirectional", duration: 0.01, ease: "none", }, and snap: "labelsDirectional", Is it not supported? Please help me with anything Im doing wrong. Thanks See the Pen BaGBXQv by boredPheonix (@boredPheonix) on CodePen See the Pen xxQwROg by boredPheonix (@boredPheonix) on CodePen Edited June 13, 2023 by vamsi_k Edited description with proper explaination Link to comment Share on other sites More sharing options...
GSAP Helper Posted June 13, 2023 Share Posted June 13, 2023 We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "please evaluate all my code and tell me what I could do better" requests. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. If you've got a specific question about something GSAP-related, feel free to post that and make sure you isolate the issue in a CodePen and clearly describe exactly how to recreate the problem. It wasn't immediately clear, for example, what you expected on the Draggable version that isn't working the way you expected. 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...
vamsi_k Posted June 13, 2023 Author Share Posted June 13, 2023 Sorry for bad explaination. Edited description with proper explaination. Link to comment Share on other sites More sharing options...
Solution vamsi_k Posted June 13, 2023 Author Solution Share Posted June 13, 2023 Fixed it by changing logic on dragEnd and removed snap 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted June 13, 2023 Share Posted June 13, 2023 Hi, Is great to hear that you got it working! Just a few clarifications: Snap is available in Draggable when combined with the Inertia Plugin. Out of the box Draggable only has live snap, which works as you drag, that's why you had to create some custom logic in your drag end callback to make it work. The labels directional snapping is only available in ScrollTrigger for obvious reasons. In Draggable you don't pass a GSAP Tween or Timeline, just the type of Draggable (x, y, rotation) and the bounds and/or limits, while in ScrollTrigger you can target a timeline which can have labels. You can of course get the timeline labels and get the progress of each label and use onDragEnd logic to tween the progress of the timeline to that particular position of the timeline. Or your current approach of getting the next and previous labels. Every Draggable instance has a startX property and a deltaX property that are updated every time a drag event starts, so you don't have to do this: function updateStart() { dragStartX = this.x } function updateEnd() { const diffX = this.x - dragStartX } Hopefully this helps. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
vamsi_k Posted June 20, 2023 Author Share Posted June 20, 2023 Thanks @Rodrigo. Understood 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