[GSAP V3 Alternative to MorphSVGPlugin.pathDataToBezier]

I've noticed that @Marcelo VazGSAP v2 version runs smoother on my laptop

 

than Gsap v3 version provided by @GreenSock

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

 

while dragging the big dot. Especially on full screen.

Do you know why there are performance lossess in v3?

 

I use Firefox, my laptop has core i5 3230M 2.6 Ghz so it's not hardware issue.

[Stagger Pause Error?]

Thank you. Indeed it works with newest GSAP version. Thank you

[Stagger Pause Error?]

Hello!

As I learn GSAP 3 from

https://courses.snorkl.tv/courses/gsap-3-express

 

I try to make animation play after button is clicked.  But when I add stagger to the animation and try to play - nothing happens.

Check my codepen. Try to click play. Then delete "stagger" option and run again - the animation works.

I am doing sth wrong or it is just a bug that it needs to be fixed?

Regards

[Animate motion between DOM elements]

8 hours ago, GreenSock said:

 

Is this what you're looking for? 

 

 

WOW! Yes! This is exactly what I'm looking for! Amazing!

I will test some GSAP options on codepen and definitely buy Shockingly Green Membership.

 

@mikel Thank you for your answer, it's also nice, but Jack's solution fits better to my need

 

[Animate motion between DOM elements]

Ok sorry, I thought GSAP can add random small curve by adding " curviness"  in random direction. Sorry.

Ok let's say I have SVG path between 2 elements. But when I resize window vertically the distance between elements changes, so the path isn't working properply anymore like in my Pen in the first post. How I can a make this scalable to the screen (viewport) size?

 

 

edit: nevermind

How to just animate between 2 elements. I know how to do that via JS, but im asking if GSAP has native function to do that (I believe it has)

[Animate motion between DOM elements]

Thanks for quick response. 

Quote

Is there some other point through which you want the curve to animate? 

First - I'd like to achieve an effect of animating between elements with no additional point, curve.

 

Then I'd like to know if it's possible to add a curve when animating between elements.

[Animate motion between DOM elements]

Is it possible to animate position of an element from element-a position to element-b position only by passing their ID into GSAP? I pass element ID's and GSAP do the calculation and animate it.

For example

 

motionPath:{
    path: [{#element-a}, {#element-b}],
    curviness: 1
  }