ScrollTrigger position of elements nested inside another animation

[kf420]

I have an SVG timeline of sorts consisting of polyline and polygons indicating dates, and would like to animate each polygon into view as it enters the screen. Seems like a no-brainer with scrollTrigger, however it appears that start and end positions for each polygon are calculated incorrectly (as indicated by misaligned markers in CodePen), I'm assuming because the group containing polygons is already being animated in a separate tween with "scrub" setting set to true.

 

Is there any way to get an accurate position of each polygon in this scenario, or do I need to set it up differently?

See the Pen 834d4f7c23ed11e273be33bcf31c6556 by kf420 (@kf420) on CodePen

[mikel]

Hey @kf420,

 

You could use the scrub progress to position the appropriate tweens.

 

See the Pen qBqEeMj by mikeK (@mikeK) on CodePen

 

Or a stagger function like here

 

See the Pen ab8b14b2007dbdd1bfa1effc7711ff20?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel