isladjan Posted March 26, 2021 Share Posted March 26, 2021 I can't set two gsap Plugins to work together: ScrollTriger and Draggable. I've a website which can be drag horizontally and additionally I want to add draggable effect. The problem is with Draggable - after dragging happens, ScrollTriger does not take into account the Drag offset. Does anyone have an idea how this can be solved? See the Pen KKaVBKZ by makica (@makica) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted March 26, 2021 Share Posted March 26, 2021 I assume this is the effect you were looking for, right? See the Pen ZELQqeJ?editors=0010 by GreenSock (@GreenSock) on CodePen Happy scrolling/dragging/tweening! 4 Link to comment Share on other sites More sharing options...
isladjan Posted March 26, 2021 Author Share Posted March 26, 2021 Perfect, that’s what I was looking for. Thank you Jack for the fast reply! The support in GSAP forum is amazing. 2 Link to comment Share on other sites More sharing options...
isladjan Posted March 30, 2021 Author Share Posted March 30, 2021 I have one question if anyone has time. I am a little confused about snapTo property. It behaves differently from standard snap property - fires one more time when snap happens/end (is it a bug?) I want to snap instantly on a slight scroll, and I did it by putting my code logic in snap return function. And this works well: See the Pen RwKoMGE by makica (@makica) on CodePen The problem is when I want to control the time, speed and ease for the snap animation - I have to move code logic in SnapTo property and then animation become buggy: See the Pen MWJbVvp by makica (@makica) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted April 2, 2021 Share Posted April 2, 2021 There were a few problems: You had logic flaws in your snapping function - if it landed exactly on one of the snapped values, your function didn't return any value at all because all your if () statements only checked for when the value is BETWEEN snaps. You were basing the snapping on the current progress of the ScrollTrigger itself instead of the timeline progress - remember that since you have a scrub value defined, it'll often be lagging behind a bit. You should use the "value" (first parameter) passed to the snapping function. By default, ScrollTrigger will factor in the inertia into the snapping value, but in your case you don't want that (otherwise, it'll finish snapping and then immediately start snapping to the next section because there's inertia affecting it). You can set inertia: false as of 3.6.1 You had a lot more code than you needed. Here's a corrected demo: See the Pen eYgWJPV?editors=0010 by GreenSock (@GreenSock) on CodePen Does that help? 3 Link to comment Share on other sites More sharing options...
isladjan Posted April 4, 2021 Author Share Posted April 4, 2021 Jack, you save me again 😄 1 Link to comment Share on other sites More sharing options...
shuggs Posted June 22, 2021 Share Posted June 22, 2021 Hey folks, this is an awesome solution, thank you!!! Final punch would be to make it wrap around infinitely, is this possible through looping timelines? 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