simple Tweenmax set - not crossbrowser ?

[mi_cky 25 Likes (Newbie)]

Hey guys,

 

my simple Tweenmax.set () is going on chrome and opera

but not on edge IE11 FF56

 

have checked three different ways - alway the same result.

 

can anyone point me the right direction ?

 

 

See the Pen mqdJvL?editors=1010 by mi_cky (@mi_cky) on CodePen

[Shaun Gorneau 2,031 Likes (Superhero)]

I can't see where that wouldn't be cross-browser. Perhaps the DOM isn't ready by the time it's called where you are seeing an issue. Maybe try

 

See the Pen JOjYeZ by sgorneau (@sgorneau) on CodePen

 

[mi_cky 25 Likes (Newbie)]

Hey Shaun,

 

Have looked your pen with edge ie11 FF56 - same result - the ".T_Range" has not the expected width. 

[PointC 14,207 Likes (Superhero)]

You're setting an attribute. Please try it like this:

 

TweenMax.set (".T_Range", {attr:{ x: minrange, width: maxrange - minrange }});

 

Happy tweening.

[mi_cky 25 Likes (Newbie)]

Hey Craig,

 

see your two cents  thanks.

Do you know why Chrome and Opera do ignore the wrong code ?

 

i am curios - my code  change the x position but not the width.

 

your code generates an other position and the width

[Shaun Gorneau 2,031 Likes (Superhero)]

Ah, @PointC! I completely ignored that this was a SVG attribute  

[PointC 14,207 Likes (Superhero)]

@mi_cky Because Chrome lets you get away with a lot of craziness sometimes, but just because it works now doesn't mean it will work in the next release. As the Good Sir @Jonathan will tell you, he tests in Firefox first because that follows the spec.

 

@Shaun Gorneau - it's Friday so that's completely understandable.

 

[mi_cky 25 Likes (Newbie)]

Hey Craig,

 

i am curios again - what i remember - have seen a lot of code with Tweenmax.set ()

but the attr: part i have not seen.

Just looking at the docs - no hint for use the - attr:

 

should i use the - attr: - always ?

 

ok - think i get it - there is a difference in handling css and svg ?

[Shaun Gorneau 2,031 Likes (Superhero)]

@mi_cky This is an SVG thing ... https://greensock.com/svg-tips#6rN7CWTfF0ZzR1wib1l3

[PointC 14,207 Likes (Superhero)]

There is some overlap between CSS properties and SVG attributes so it can be a bit confusing. Check out Jack's answer here:

Here are the docs for the attribute plugin.

https://greensock.com/docs/Plugins/AttrPlugin

 

Happy tweening.