[enhancement] add timeline labels to ScrollTrigger markers

[gravyraveydavey]

Hi GSAP Team,

It would incredibly helpful for finessing the timing of animations, and debugging timeline based animation issues if there was a method of visualising timeline labels with the 'markers' property - so that they were either automatically picked up when using them or could be passed in as an object of additional markers.

Even just being able to print static markers to the viewport would be super helpful - like in the SnorklTV ScrollTrigger course video that's referenced in the 'How does pinning work under the hood' section of the docs. Here they're using the markers to illustrate 100px increments in the dom to explain how the pin spacer works - with custom markers you could potentially pass in an object containing an array of labels and pixel values to track how animations line up to whatever you're aiming for with your sequence, without having to code up fake HTML elements whilst building out the animation.

[jackdoyle]

Thanks for the suggestion, @gravyraveydavey

I don't think it warrants a place inside ScrollTrigger unless a lot more people request it (kb and API surface area concerns), but this could be handled by a helper function which I dropped into a CodePen for you here: https://codepen.io/GreenSock/pen/MWmzmyd?editors=0110

The markers are relative to the top of the viewport, meaning when they hit the top that's when the label is hit in the timeline.

I added several configuration options too so you can customize things.

Does that help?