Opacity and SVG

[Jean-Baptiste Janot]

Hi !

 

I have been working on a full SVG animation with TweenMax.

It was a pleasure as everything works really really well with the great addition of cross browser transform origin.

Thanks !

 

I just noted one thing that you might be able to adjust for future releases.

 

At first, I was using opacity attribute to tween elements opacity. It worked with <g></g>, <path />, <rect />, quite everything. But not on ios...

On ios, if you tween opacity and you move the element using x property, it creates a glitch. I couldn't find a way to make it behave correctly.

 

I dig around a little, and the only way I could manage to use opacity for now has been by creating a tween using attr: {'fill-opacity': 0.5} or attr: {'stroke-opacity': 0.5}, and by being sure that the property was set before tweening it (using TweenMax.set did the trick).

 

The big downside of that technique is that you can't tween group (<g></g>) opacity, and for tweening the global opacity of an object, you have to tween the stroke and the fill.

 

The codepen attached shows three ways of tweening the opacity.

Chrome handle the three ways perfectly, but ios and firefox not. Please have a look.

 

I hope you'll have an idea of a better way to use this.

 

Have a nice day !

See the Pen KwdGXN by extralagence (@extralagence) on CodePen

[Jonathan]

Hello Hypolythe, and Welcome to the GreenSock Forym!

 

I had a question for you

• Do you mean Firefox mobile on IOS or Firefox desktop version?

I tested your codpen URL example in:

 

Firefox on PC Windows 7 (64-bit)

 

And the animation played as expected for the 3 different opacity tweens.

 

I do not have IOS to test with at the moment.  But this looks like it might be a bug with IOS in Firefox and Safari, and not related to GSAP. Maybe someone here in the Forum can test Firefox or Safari on IOS for you.

 

[Jean-Baptiste Janot]

Hi Jonathan,

 

Thank you for your help.

I'm sorry, I was not very precise while describing the problem.

 

My tests were on Firefox running on windows 7 64 bits, Google Chrome running on Windows 7 64 bits too, and I also tested it on an iPad air 3 (ios8).

 

Here is an image showing the differences between the 3 browsers :

 

The first, chrome, is ok for the three tests.

The second, Firefox, fails in tweening the opacity with 'stroke-opacity' (third test).

The third, safari ios 8, fails in moving the dots in the first test.

 

Other tests :

Chrome on ipad is the same as safari on ipad (first fails).

Safari on macos is the same as safari on ipad (first fails).

Chrome on Macos is the same as chrome on windows (all good).

Firefox on macos is the same as firefox on windows (third fails).

 

I guess there is a bug with firefox and ios, but as you managed to reduce the differences between firefox and such with transform origin, I wondered if it could be the same for opacity

 

Thanks again anyway !

Hope it helps.

[Jonathan]

I see it now.. i had to test in incognito mode to .. weird. 

 

Firefox states on this page to test and see if the CSS equivelent for the SVG attributes work, to test and see.

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

 

In addition to setting attributes on objects, you can also use CSS to style fills and strokes on them. The syntax for this is the same as CSS used in normal HTML, except you'll be setting values like fill and stroke instead of background-color or border. I should note that not all attributes can be set via CSS. Things that deal with painting and filling are usually available, so fill, stroke, stroke-dasharray, etc. can all be set this way, in addition to the gradient and pattern versions of those shown below. Things like width, height, or path commands, d, can't be set through CSS. Its easiest just to test and find out what is available and what isn't.

 

I know you can set the fill-opacity  and it works in Firefox when i apply it. But I do see GSAP animating the value.. but it looks like Firefox is not animating the interpolation of the fill-opacity.

 

Looks like Firefox doesn't have that available as animatable, unless im missing something.

 

I even explicitly made GSAP that fill-opacity was CSS using the css:{} object:

 

View in Firefox:

See the Pen myeQpr by anon (@anon) on CodePen

:

timeline3
.set(dots3, {css:{'fill-opacity': 0}})
.staggerTo(dots3, 1, {css:{x: '+=300', 'fill-opacity': 0.2}}, 0.2)
.staggerTo(dots3, 1, {css:{x: '-=300', 'fill-opacity': 1.0}}, 0.2); 

:

But still no dice. Maybe one of the Grand Masters, Jack or Carl can shed some light on animating fill-opacity in Firefox (on Windows 7)

 

Thanks for your patience!

 

[Diaco]

Hi [ Hypolythe , Jonathan ]

 

this works in all of Chrome , FireFox , Safari , even Stupid IE  :

timeline3
.set(dots3, {fillOpacity: 0})
.staggerTo(dots3, 1, {x: '+=300', fillOpacity: 0.2}, 0.2)
.staggerTo(dots3, 1, {x: '-=300', fillOpacity: 1.0}, 0.2); 

See the Pen empQoa by MAW (@MAW) on CodePen

[Jonathan]

Nice job Diaco.AW..

 

My brain must still be on Thanksgiving vacation!

 

I forgot / missed the easiest solution which is to just use camelCase for fillOpacity

 

[Jean-Baptiste Janot]

Hi Diaco.AW !

 

Well... 

I though I had tested it but it seems not because it works like a charm !

No need to set the var before, and I just discovered that you can apply it to a <g></g>, and it works for the children. 

Wow, just perfect.

 

I'll test it on ipad tomorrow to see if it works there too.

Anyway, thanks a lot !

 

PS : As I am passing by, any idea if an extension that could do the same job as snap.svg for morphing between shapes is on the rails ? That would be awesome. TweenMax already do 90% of snapsvg's job, the only missing feature is this shape morphing... 

 

Have a nice day guys !

[Carl]

Thanks  everyone for all the info, and especially a round of applause to Diaco for the fillOpacity suggestion, which appears to work fine in Safari on iOS6 and iOS7.

 

Hypolythe,

 

Shape / path morphing is on our radar, but we have other priorities at the moment. Within the next 2 weeks we will be releasing a tool that will do wonders for SVG animations. Be sure to read the next newsletter we send out. 

 

Happy Tweening!

[Jean-Baptiste Janot]

Thanks Carl, can't wait to see what you guys are working on.

 

By the way, I have tested it on iOS 8, macOS Safari, IE11, Chrome and Firefox, and it works everywhere. 

So, the TL;DR of the topic is stop using opacity, and go for fillOpacity or strokeOpacity.

 

Have a nice day everyone.

[Carl]

Hey Hypolythe,

 

Looks like we got some things ready quicker than we expected. Here is our new DrawSVGPlugin: http://greensock.com/drawSVG

[Jean-Baptiste Janot]

It's awesome, as I expected.

I have the perfect project to start using it right now.

Thank you guys, you do wonders.