SVG element not being found

[dgrigg]

I have an SVG that I'm trying to animate. I have the same animation running here (https://pageproofer.com/) with no issue. The exact same code pasted into a new project doesn't work the animation doesn't do anything.

 

The SVG loads into the page and then individual elements have different values set and animated.

 

This is a sample of the 'sets'

this.demoTl = gsap.timeline({ onComplete: this.restart });

this.demoTl.set("#toolbar", { x: 801, opacity: 1 });

this.demoTl.set("#screen", { opacity: 1, x: 801 });

this.demoTl.set("#countdown", { opacity: 0 });

this.demoTl.set("#countdown1", { opacity: 0 });

this.demoTl.set("#countdown2", { opacity: 0 });

this.demoTl.set("#countdown3", { opacity: 0 });

 

All those elements exist and if I purposely misspell something GSAP notifies with a console message. When I inspect the elements no values have been set on them though and the animation never runs even though it shows the whole animation should be 55 seconds. 

 

Does anyone know what I could be missing?

[mvaneijgen]

Hi @dgrigg welcome to the forum and being a Club Greensock member!

 

Al your tweens are a .set() which is a tween without a duration, so in theory all the tweens should be set at the first second the page loads. That doesn't sound like an animation/countdown. Do you maybe have a minimal demo with the issue you're facing, so that any of us could take a look a the code and modify it?

[dgrigg]

That was only a short snippet of the full timeline. After a hard restart of the computer everything worked fine. Something must have been cached locally that was causing the hang up.

 

[mvaneijgen]

Ah, glad it is fixed! That is always why creating a minimal demo is so helpful, you would have probably solved your own issue. 

[dgrigg]

Good point.