FrancisBacon

Yes this helps, thank you so much !!

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

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?

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?