Update timelines when dragging

[Agency Habitat]

Ok, been iterating on this for a while, and I am pretty stuck. I know there is likely something simple I am missing.

 

I have two `scrollTriggers`. One scrolls a container div horizontally, and another controls the animation of each section in the container. The Scrolltrigger works correctly. However, I'd like Draggable (on both the main container div.draggable and div.marker to update each section in the container. The closest I've gotten animated all .box at the same time instead of each as they progressed in the ScrollTrigger.

See the Pen oNaERop?editors=0011 by yankeyhotel (@yankeyhotel) on CodePen.

[Agency Habitat]

Ok, I was able to figure this out. Or at least the next step...

 

I was confused because ScrollTrigger's .progress() function is read-only. I couldn't figure out how to update it. Then I stumbled upon the fact that I didn't need to update the ScrollTigger; I just needed to update the tween. I'm still new at this stuff. but I think it makes more sense now. 

 

I updated...

function onDraggableDragHandler() {
  const draggablePercent = this.x/this.minX;
  const markerPx = marker.maxX * draggablePercent;
  gsap.to(markerElem, { x: markerPx });
}

To...

function onDraggableDragHandler() {
  const draggablePercent = this.x/this.minX;
  const markerPx = marker.maxX * draggablePercent;
  gsap.to(markerElem, { x: markerPx });
  scrollTween.progress(draggablePercent);
}

It seems to work pretty well as I intended. Though the .marker needs some smoothing.