Morph + Bezier

[mk1]

I want to move the black dot from the start of the motion path to it's end and than back. However my test case behave not as expected. Can you guys take a look?

 

As I can see when selecting the dot element in the console it moving over a path with same shape but misplaced

See the Pen MJgdaX by Nikolaus91 (@Nikolaus91) on CodePen

[GreenSock]

There are a few problems I noticed:

 

You forgot to tell the pathDataToBezier() to align the data with the dot. See the docs at https://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/ (the "align" property)

 

You set the transform to percentage values directly in CSS, but it's impossible for GSAP to discern that because the browser always reports computed values in pixels (actually, as a matrix() or matrix3d()) - it's always best to set that explicitly via GSAP, like with a TweenLite.set() call. That way, GSAP understands that your intent is percentage-based. So your code should look like:

var dot = document.getElementById('cls-2');
var circle = document.getElementById('cls-1');
TweenLite.set(dot, {xPercent:-50, yPercent:-50});

var path = MorphSVGPlugin.pathDataToBezier("#cls-1", {align:dot});

TweenMax.to(dot, 5, {bezier:{values:path, type:"cubic"}, transformOrigin: "50% 50%", ease:Linear.easeNone, repeat:-1});

Better?