GSAP TweenMax - not able to access variables inside timelines

[ellisj98]

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

[beau_dev]

This looks interesting I would like to know about this, too! (wish I could help, btw).

[ellisj98]

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

[PointC]

Hi @ellisj98 

 

Welcome to the forum.

 

You have a missing hyphen in your data attribute for animation.

 

<div class="animation section__image scroll-animation" data animation="x" data-animation-start="600" data-animation-end="0" data-animation-duration="0.1"> 

 

I'm not entirely sure what you're trying to do, but if you just want to tween the progress of the timeline based on scroll, you could do it like this.

 

See the Pen YJBdbG by PointC (@PointC) on CodePen

Hopefully that helps a bit. Happy tweening.

 

[GreenSock]

Yep, I noticed the same thing as @PointC. Also, be careful about the fact that data attributes are always TEXT (strings) rather than numbers, so you may have to cast them as such. The easiest way I've seen is to simply add a "+" as a prefix. 

 

Happy tweening!

[ellisj98]

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

[PointC]

The unary plus operator converts the operand to a number. (at least it makes its best effort to do so)

 

"1" + 1 // "11"
+"1" + 1 // 2

 

Happy tweening.

 

[PointC]

PS Check out the Intersection Observer API

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

[ellisj98]

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. 

[PointC]

Like this?

 

See the Pen bmzZYN by PointC (@PointC) on CodePen

Happy tweening.

 

[ellisj98]

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