[Safari Bug: Animated Blurred SVGs]

BTW: Adding will-change: transform to the SVG does also fix the error and might make more sense as the SVG itself is only rotated and scaled. 
My reading is Safari applies some kind of optimization as soon as a will-change is present. 

[Safari Bug: Animated Blurred SVGs]

Adding will-change: filter; to the parent DIV that has the blur-filter applied did not work.

 

Adding will-change: filter; to the SVG that is being transformed (rotated/scaled) does fix the issue. 🤯

[Safari Bug: Animated Blurred SVGs]

Ok. Updated the Codepen Demo.

[Safari Bug: Animated Blurred SVGs]

I am sure this is a Safari bug not a GSAP bug. Hence, the title.
GSAP has historically found ways to circumvent browser inconsistencies and bugs, so my hope was this is maybe a known problem, that can be addressed by doing it "another" way. 

[Safari Bug: Animated Blurred SVGs]

i am rotating 3 shapes in an SVG with GSAP. When i apply filter:blur to the parent div there a some strange rendering issues on Safari: 

 

 

See the Pen vYbRVLd by paul-siteway (@paul-siteway) on CodePen

[ScrollMagic GSAP SVG Mask Bug]

Hello @Carl, Hello @Jack, Hey @Yashi-2

 

 

Manual animation (click the button in the CodePen demo) works. It just does not work synced to the scroll. 

I will try a workaround the <defs> Animation. Will post an Update here. 

[ScrollMagic GSAP SVG Mask Bug]

I am using ScrollMagic with the GSAP Plugin.

I am trying to reveal a line based on an animated mask that should sync to the scroll.

This demo works on Desktop but not on iOS:

 

 

I am not sure if this is an ios, svg, scrollmagic or gsap bug.

 

Any help is appreciated!

See the Pen aVGwEw by paul-siteway (@paul-siteway) on CodePen