Jump to content
GreenSock

tyelrx

SVG mask tween - flicker

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Just curious-

 

But in Chrome/Safrai - the svg animation flickers (at the end of the animation) and the mask is almost reset. I would like the animation to end on the solid white color. (this works in Firefox).

 

I must be over looking something. Any help would be helpful.

 

thanks

See the Pen dGGzBe by tyelrx (@tyelrx) on CodePen

Link to comment
Share on other sites

Hi tyelrx,

 

I have not read all of your code carefully, there is a load there but, focusing only on the movement of the mask. You seem to be overcomplicating it there and got the y's confused.

 

If you want the mask to come from the bottom to the top (keeping the gradient effect) you want to tween the y1 from 100%, you shouldn't really need the fromTo().

 

Check this out:

See the Pen KVVGLv?editors=101 by dipscom (@dipscom) on CodePen

 

Little comment on the side: The many other timelines, why do you need so many? I didn't really see much moving other than the bubbles.

 

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

  • Solution

Hello tyelrx, and Welcome to the GreenSock Forum!

 

What is happening in Chrome / Safari is that the stop-opacity for the SVG <linearGradient> <stop>, with id #stop2 is ending at zero 0 instead of 1.

 

This codepen example will now work in Chrome and Safari:

 

See the Pen yeeQKx?editors=101 by jonathan (@jonathan) on CodePen

 

You would need to set() that attribute to one for stop-opacity for your SVG  <linearGradient> <stop> tag

.set("#stop2",{attr:{"stop-opacity":1}}); /* add on line 89 */

So you can add the GSAP set() after your line 88

var fadeTL = new TimelineLite();
    fadeTL.add('fade')
            .fromTo("#gradient1", 2, {attr:{y2:"100%"}},{attr:{y2:"0%"}, ease: Sine.easeIn},"sT+=0.0")
            .fromTo("#stop2", 2, {attr:{offset:"100%"}},{attr:{offset:"0%"}, ease: Sine.easeIn},"sT+=0.0")
            .set("#stop2",{attr:{"stop-opacity":1}}); /* add on line 89 */

And then you should see it not reset in webkit based browsers, when setting that to one for your fadeTL timeline.

 

:)

  • Like 3
Link to comment
Share on other sites

Great work, Dipscom and Jonathan!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×