Strange order effects

[jorma]

Have a look at the pen for a demo: 

See the Pen NzGrbX by jormaturkenburg (@jormaturkenburg) on CodePen

 

 

I have three elements:

<svg width="200" height="100">
  <circle id="redCircle" cx="50" cy="50" r="50" fill="red"></circle>
  <circle id="blueCircle" cx="150" cy="50" r="50" fill="blue"></circle>
  <line id="greenLine" x1="0" y1="0" x2="200" y2="100" stroke="green" stroke-width="3"></line>
</svg>

 

I animate them as follows:

let tl = new TimelineMax();
tl.from('#redCircle', 1, { attr: { opacity: 0 } }, 'start');
tl.fromTo('#blueCircle', 1, { attr: { opacity: 0 } }, { attr: { opacity: 1 } }, 'start');
tl.fromTo('#greenLine', 1, {  drawSVG: '0%' }, { drawSVG: '100%' }, 'start');

 

What happens is that the red circle does not animate at the same time as the others. Please note that I need to animate the attribute opacity and not the style because of other considerations in my app.

 

This works:

let tl = new TimelineMax();
tl.fromTo('#redCircle', 1, { attr: { opacity: 0 } }, { attr: { opacity: 1 } }, 'start');
tl.fromTo('#blueCircle', 1, { attr: { opacity: 0 } }, { attr: { opacity: 1 } }, 'start');
tl.fromTo('#greenLine', 1, {  drawSVG: '0%' }, { drawSVG: '100%' }, 'start');

 

And this:

let tl = new TimelineMax();
tl.from('#redCircle', 1, { opacity: 0 }, 'start');
tl.fromTo('#blueCircle', 1, { opacity: 0 }, { opacity: 1 }, 'start');
tl.fromTo('#greenLine', 1, {  drawSVG: '0%' }, { drawSVG: '100%' }, 'start');

 

Just not the first one... am I missing something?

 

THX!

 

Jorma

See the Pen NzGrbX by jormaturkenburg (@jormaturkenburg) on CodePen

[Shaun Gorneau]

It seems that for the opacity attribute to be recognized here ... it's initial value needs to be present on the element. My guess is that `fromTo` works because GSAP creates the tween states necessary prior to tweening ... but `from` has no "starting" point without the attribute already there. You can see that it works with the attribute having a value from the start.

 

See the Pen vrNKVm?editors=1010 by sgorneau (@sgorneau) on CodePen

 

[GreenSock]

I'm also curious why you're using "opacity" as an attribute instead of just a normal CSS property. Not criticizing, just curious. Seems like it'd probably be better to let CSS handle it, especially because there can be conflicts in some browsers if, for example, you have a value set as BOTH an attribute AND a CSS property. 

 

And yeah, @Shaun Gorneau is correct about GSAP animating attributes that actually exist.

[jorma]

It's because another part of the application sets the attribute and the style overrides that when both are set.  Do you normally use CSS styles for opacity on an SVG element? If so when would you use a style and when an attribute. Also, GSAP knows the default for the opacity on a style = 1 and can Tween to it when it's not explicitly set but it works differently for attributes?

[GreenSock]

Yep, CSS styles are different because CSSPlugin grabs the current style from window.getComputedStyle() which returns all properties (including opacity), but when you're trying to tween an attribute that doesn't exist, that's totally different. 

 

It should be relatively simple to solve in your scenario, though. If you must use attributes because of something else in your app, perhaps you could just make sure you set the opacity attribute initially so that it's not undefined. If there's any way to just use CSS, that'd certainly be my recommendation though. 

[jorma]

It's super simple to solve. Just doing a fromTo was easy enough and setting opacity = 1 is a good option also. I might at a later time change the other part of the application to use a style although for some reason I prefer attributes on SVG... but I don't have any actual reasons for my preference.

 

Anyway, this forum rocks! You guys are super responsive and helpful. You make it very easy to recommend GSAP, paying for the license and engaging on this forum. Much thanks!!

[GreenSock]

Thanks for the kind words, @jorma! And thanks for being a Business Green member! We couldn't do any of this without folks like you. 

 

Happy tweening!