[SVG animate shadow, feBlend, feGaussianBlur]

Mikel, hi!

 

During this time I decided to make the animation of the shadow a little different, changing dx and dy of feOffset. Here is:

See the Pen QJKBQx by AlkoLINE (@AlkoLINE) on CodePen

 

I think it looks nice

 

Honestly, I thought it was not possible, to animate drop-shadow. Thank you for this example! 

It pushed me to learn more about CSS variables)

[SVG animate shadow, feBlend, feGaussianBlur]

Yeah! drop-shadow exactly what i need, thank you very much

[SVG animate shadow, feBlend, feGaussianBlur]

Hello, Mikel! 

I want the shadow to appear after morphing, so the square will be without shadow and the circle will be with shadow. 

[SVG animate shadow, feBlend, feGaussianBlur]

Hi everyone!

I want to animate shadow appearence of svg after the morph. I was trying to change stdDeviation attr, but shadow stays visible. Will be glad to any advice ?

See the Pen qQPoQX by AlkoLINE (@AlkoLINE) on CodePen

[Save previous shape, MorphSVG]

1 hour ago, OSUblake said:

 

If this is what you're trying to do, then ridiculous seems like a good option.

 

See the Pen bQpBKa by osublake (@osublake) on CodePen

 

Thanks! Exactly this.

 

31 minutes ago, Carl said:

I don't see how you can morph shape A into shape B and keep the original shape A on screen without duplicating that path data in the SVG as Blake illustrated. Perhaps you can better explain what you would like to have happen or how GSAP would do this for you.

 

Something to note that is semi-related and not a solution to your problem is that GSAP puts a "data-original" attribute on the target of your morph so that you can easily morph back to the original shape. the data-original attribute stores the original, pre-morph, path data

 

var tl = new TimelineLite({onUpdate:updateSlider}),
    circle = document.getElementById("circle");

tl.to(circle, 1, {morphSVG:"#elephant"})
  .to(circle, 2, {morphSVG:"#circle"}, "+=1")

See the Pen bQpqaV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I have simple svg picture which consists of few layers (paths) so i want to draw this picture. One layer morph to another, stays on screen and so on. I think it will be awesome using Greensock MorphSVG plugin. If I succeed i will share a link here) Thank you for explanation about data original attr btw.

[Save previous shape, MorphSVG]

Hi, everyone! I want to save prev shape of my morphsvg on the screen. So in this codepen example at the end of animation would be circle inside the elephant. Any ideas?

 

The first thing that comes to mind is to duplicate the path in svg manipulating the DOM, but i think it's ridiculous.

See the Pen RqaGeX by AlkoLINE (@AlkoLINE) on CodePen