Jump to content
GreenSock

Thomas Günther

MorphSVGPlugin but stay in same place

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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

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.
×