MotionPathPlugin With MorphSVG on scroll

[FrancisBacon]

Hey good people, 
I'm trying to create an animation where 2 dots travels along their paths as you scroll down and at the end they should morph into the shape of the final circle. 

I'm using morphSVGPlugin for the first time and by documentation it says we need to convert the circle/polygons etc to a path, the problem is if I add
MorphSVGPlugin.convertToPath("circle") to the code, the scroll animation stops working.

I have added the codepen.

Can someone help me figure out what am I missing?

See the Pen RwqGxoE by rohaidAli (@rohaidAli) on CodePen

[GreenSock]

That's because when you convertToPaths(), it must literally create a whole new element for each <circle> and swap it into the DOM. So you were setting up all your animations to target the original <circle> elements...and then swapping all those out of the DOM for new elements which aren't animated. So all you'd need to do is call the convertToPaths() BEFORE you create all your animations. 

 

That being said, I don't think you need to do any morphing at all since the shape you're "morphing" to is also a circle, thus you could simplify things by just scaling/moving the elements. If you morph, you'll need to adjust for the movement you're doing on the motionPath since the morphing just animates the raw coordinates but you're moving the elements, so they wouldn't be aligned anymore. It's totally fixable, of course, but I just think morphing is a waste of time here.

 

I noticed your paths don't converge on the same spot either. You should probably fix your SVG artwork to resolve that.  

 

There's also a helper function I whipped together to make it possible to keep elements in the viewport as you're scrolling down. Normally we don't do this type of custom development in these forums for free, but I was curious and liked the challenge so I did it as a courtesy: 

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

 

Hopefully something in there is helpful and gets you headed in the right direction. 

 

Have fun! And thanks for being a Club GreenSock member. 💚

[FrancisBacon]

19 hours ago, GreenSock said:

That's because when you convertToPaths(), it must literally create a whole new element for each <circle> and swap it into the DOM. So you were setting up all your animations to target the original <circle> elements...and then swapping all those out of the DOM for new elements which aren't animated. So all you'd need to do is call the convertToPaths() BEFORE you create all your animations. 

 

That being said, I don't think you need to do any morphing at all since the shape you're "morphing" to is also a circle, thus you could simplify things by just scaling/moving the elements. If you morph, you'll need to adjust for the movement you're doing on the motionPath since the morphing just animates the raw coordinates but you're moving the elements, so they wouldn't be aligned anymore. It's totally fixable, of course, but I just think morphing is a waste of time here.

 

I noticed your paths don't converge on the same spot either. You should probably fix your SVG artwork to resolve that.  

 

There's also a helper function I whipped together to make it possible to keep elements in the viewport as you're scrolling down. Normally we don't do this type of custom development in these forums for free, but I was curious and liked the challenge so I did it as a courtesy: 

 

 

 

Hopefully something in there is helpful and gets you headed in the right direction. 

 

Have fun! And thanks for being a Club GreenSock member. 💚

19 hours ago, GreenSock said:

That's because when you convertToPaths(), it must literally create a whole new element for each <circle> and swap it into the DOM. So you were setting up all your animations to target the original <circle> elements...and then swapping all those out of the DOM for new elements which aren't animated. So all you'd need to do is call the convertToPaths() BEFORE you create all your animations. 

 

That being said, I don't think you need to do any morphing at all since the shape you're "morphing" to is also a circle, thus you could simplify things by just scaling/moving the elements. If you morph, you'll need to adjust for the movement you're doing on the motionPath since the morphing just animates the raw coordinates but you're moving the elements, so they wouldn't be aligned anymore. It's totally fixable, of course, but I just think morphing is a waste of time here.

 

I noticed your paths don't converge on the same spot either. You should probably fix your SVG artwork to resolve that.  

 

There's also a helper function I whipped together to make it possible to keep elements in the viewport as you're scrolling down. Normally we don't do this type of custom development in these forums for free, but I was curious and liked the challenge so I did it as a courtesy: 

 

 

 

Hopefully something in there is helpful and gets you headed in the right direction. 

 

Have fun! And thanks for being a Club GreenSock member. 💚

WOW !! that's really great insight, thank you so much for a detailed explanation.
Yes, I'm aware of the SVG paths issue, not an SVG expert so I created them quickly to get started with the coding fun  I'll fix it.

I was going for morphSVG because I wanted to create an effect where both left and right circles merge into one another with a goovy effect changing their colors to the final circle. any tips on that?

[GreenSock]

Sure, just add the "fill" to the final tween: 

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

 

Is that what you mean? 

[FrancisBacon]

This is what I'm aiming for, maybe it won't be a 100% match but I was trying to get as close as possible. see screen recording
https://www.awesomescreenshot.com/video/18594805?key=6d7a8ffd4c05750d3474163cea9aed77

[GreenSock]

Oh, yeah, that's a very different effect. I'm not sure morph is the right choice - you might want to look at this from @Carl and his excellent Creative Coding Club training: 

We don't really have the resources to build it all for you, but if you need more customized assistance, feel free to contact us about paid consulting. 

 

Good luck!

[FrancisBacon]

Yes this helps, thank you so much !!