Animation feGaussianBlur of clipped object

[Spacefuel]

Hi, 

 

I try to make blur animation for clipped image in SVG, but at the start of the animation the image loses clip-path mask. How to change the filter value without loosing the clipping path?

 

<filter  id="welcomeGaussianBlur" color-interpolation-filters="sRGB">
	<feGaussianBlur stdDeviation="0"></feGaussianBlur>
</filter>	

<defs>
	<path id="welcomePath" d="....."/>
</defs>
	
<clipPath id="welcomeClipPath">
	<use xlink:href="#welcomeClipPath"  style="overflow:visible;"/>
</clipPath>

<g style="clip-path:url(#clipPath);filter:url(#welcomeGaussianBlur);">
	<image id="svg-image_welcome" style="overflow:hidden;" width="1920" height="1282" xlink:href="/images/1fbg.jpg"   />
</g>

.........

timeline[1].to('#welcomeGaussianBlur feGaussianBlur', 0.1, {attr:{stdDeviation:10}}, "blur")

 

[Spacefuel]

I have found the simple solution. Just use mask with opacity instead clipping path.

 

	<mask id="welcomeMask">
		<use xlink:href="#Mask" style="stroke:none; fill: #ffffff"/>
	</mask>

	<g style="mask:url(#welcomeMask);fill: #0000ff;filter:url(#welcomeGaussianBlur);">
		<image id="svg-image_welcome" style="overflow:hidden;" width="1920" height="1282" xlink:href="/images/1fbg.jpg"   />
	</g>
	

[Jonathan]

Hello @Spacefuel and Welcome to the GreenSock forum!

 

This will be hard to debug without seeing your code in a live editable environment like codepen.

 

Can you please create a reduced codepen demo showing us your issue, so we can test it live?

 

 

But below are examples of animating fegaussianblur using the GSAP AttrPlugin to animate the fegaussianblur svg attribute.

 

See the Pen 1665374267b019526d531f30c8d4bd86 by jonathan (@jonathan) on CodePen

 

Another example animating fegaussianblur

 

See the Pen pjOKxo by jonathan (@jonathan) on CodePen

 

And adding fegaussianblur on an image

 

See the Pen GJPjjQ by jonathan (@jonathan) on CodePen

 

Happy Tweening!