MorphSVGPlugin but stay in same place

[Thomas Günther 50 Likes (Contributor)]

I'm wondering if it's possible to use the MorphSVGPlugin only for the shape, not for the position of elements.

 

My use case: I want to morph an object randomly into one of many objects. I know I can duplicate the objects onto every drop, but I feel like there's a better solution.

 

Thank you!

See the Pen YzegBaZ by medienbaecker (@medienbaecker) on CodePen

[mvaneijgen 2,469 Likes (Superhero)]

The path of an element has a lot of position data on it , so what I would do is create several SVGs and place them on a grid, then have a separate SVG with the morph data and animate each path in a SVG to a random path, with this they stay in place.

 

@PointC has a better explanation over here

 

My understanding was that if you add `repeatRefresh: true` to a tween it would recalculate on each repeat, but I never can get it to work, or I'm just really lucky and my random luck is insane!

 

See the Pen OJQqGBR?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[Thomas Günther 50 Likes (Contributor)]

@mvaneijgen That's very clever! Thank you. I could even try to nest SVGs as this (surprisingly) seems to work, too.

[mvaneijgen 2,469 Likes (Superhero)]

@Thomas Günther cool. Glad it helps . This also seems fun and maybe it helps your use case. Now it recalculates without resetting the timeline

 

See the Pen gOvEJMW?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[Thomas Günther 50 Likes (Contributor)]

Thanks you so much, @mvaneijgen 💚

 

I've created a pen with the final code incl. nested SVGs and a reset animation

 

See the Pen RwQdmoo by medienbaecker (@medienbaecker) on CodePen