Scrolltrigger and Draggable Plugin

[isladjan]

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

[GreenSock]

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! 

[isladjan]

Perfect, that’s what I was looking for.  Thank you Jack for the fast reply!

The support in GSAP forum is amazing.

[isladjan]

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

[GreenSock]

There were a few problems: 

1. 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.
2. 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. 
3. 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
4. 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? 

[isladjan]

Jack, you save me again 😄

[shuggs]

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?