Elements showing wrong values instead of initial ones.

[Keaton88]

I have a timeline consisting of tweens that change an SVG text element. The text element begins with a value of 400. The first tween will change the text content to 300, the second tween to 200, and the third and final tween to 100.

 

When the page is finished loading, instead of showing the initial value the text element is set to (in this case 400), it shows the value the element will be set to by the FIRST tween (300). Not the final tween, (100) nor the middle tween (200), but the first one.

 

How do I ensure that when the page is loaded, the target elements to be tweened are set to it's initial values BEFORE playing the timeline, and not any of it's future values to be set later?

[Shaun Gorneau]

If you can distill the issue into a CodePen, it would allow us to better help you. My initial thought is that your tween is firing before the page load is complete. So, you can wrap your tween in an onload/onready handler. And if that's not enough, adding a delay to your timeline could help.