ellisj98

Thank you!!!!!! You have saved my life. Thank you so much. Is that interpolation?

Thanks for this. This looks useful, however I’m still stuck as to what to do about this data attribute problem :(. There’s no errors being thrown either, so it’s not ideal.

Hi both, Thanks for this. I have changed it to data-animation (was a mistake) but it still doesn't work. I am basically animating on scroll elements relative to their container/if they are in the viewport. Regarding the data attribute being a string, this is what I thought too. However, I'm not sure how to fix this to use this as a variable in my tween for x in this instance. Can you elaborate further on the adding a "+" as a prefix, please? Thank you

Haha, it's been bugging me for a while now - so frustrating!

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. 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. https://codepen.io/ellisclicky/pen/NOowMx Any help is very appreciated. javascript jquery animation gsa