GSAP TweenMax - not able to access variables inside timelines

Question

I am creating scroll based animations with GSAP. I am creating a timeline for a tween, then updating the progress of the timeline based on how far you have scrolled through a set container. I am able to create this effect by using CSS values such as x or y for example for CSS transform properties. I cannot access dynamic variables inside an each function for the elements I wish to animate and set the CSS properties to tween through these.

My code would be too long to copy and paste here - so will link code pens for my problem.

Here is my working version:

Using the x and y values to tween CSS transform properties works completely fine. This is the result I want at the end.

CODE HERE:
https://codepen.io/ellisclicky/pen/rqPYmw

Here is my version that I want to work, where I am using data attributes from an HTML element to determine what CSS property to animate:

I cannot access the variable and I can't figure out why - I have googled everything under the sun about this but can't find anything.

CODE HERE:
https://codepen.io/ellisclicky/pen/NOowMx

Any help is very appreciated.

Answer 1

看起来这里已经回答了： https : //greensock.com/forums/topic/19263-gsap-tweenmax-not-able-to-access-variables-inside-timelines/