Jump to content
Search Community

Move,scale SVG group, then move element of the group with pathDataToBezier

Tasty test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello everyone !

I have some very fun and complex thing to do, and any help will be much appreciated ! 

I'm trying to move SVG group along the path, scale it down, and then move elements of that group along different path.

But when I scale down the parent element I also scale the motion path of the child element, and I'm wondering what I'm doing wrong here? Or, maybe my approach is just totally bad.

That is what I have





And that is what I would like to achieve - of course the group should scale down, but the path should be the same

See the Pen EmaqLP?editors=1010 by Dikus (@Dikus) on CodePen


Final SVG - maybe this will help you to imagine what I would love to achieve - the last movement of the purple particle, should move along the purple stroke



So, my question is - is it possible to scale down the main element, and do not scale the path with it?

Wish you all the best !

pathDataToBezier just rocks! Probably I miss something big here 



See the Pen EmaqbV by Dikus (@Dikus) on CodePen

Link to comment
Share on other sites

Eh, god, so I solved this by just scaling down the child elements instead of scaling down the whole group.

See the Pen JNdPrM by Dikus (@Dikus) on CodePen

Anyway I'm curious, why it scales down the motion path while scaling down the group :)?

If anyone will bump into this, just scale down the child elements using the svgOrigin of the element you would like to scale down. 

Nice tool for quick checking the svg Origin - https://gist.github.com/brunnolou/cab8c0a481ea78ff50dc works like a charm !
just paste the code into the console and enter the class/id in the prompt

Link to comment
Share on other sites

Hi Patryk,


interesting animation of an spectrometer.


Just a tipp: the bluecircle isn´t on path because of the gap between both path.


Try:   greenPath = MorphSVGPlugin.pathDataToBezier("#greenPath", {offsetY:0, offsetX:97, align:"relative"});


Happy tweening


  • Like 2
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.
  • Create New...