Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Marcelo Vaz

GSAP V3 Alternative to MorphSVGPlugin.pathDataToBezier

Recommended Posts

Hi. 

Amazing lib, just became a club member and i'm having a lot of fun trying it out.

I am trying to recreate this pen on a create-react-app product. I would like to know if there is an analogous function in the motionPathPlugin that would return the array of objects i need (that was provided by MorphSVGPlugin.pathDataToBezier) in the pen attached.

See the Pen pbzEYr by chrisgannon (@chrisgannon) on CodePen

  • Like 1
Link to post
Share on other sites

Hey Marcelo and welcome to the GreenSock forums! We're so glad that you're having fun and that you are finding the tools helpful.

 

The MotionPathPlugin has a .stringToRawPath() method that can give you the RawPath information for a given path's data. 

 

I hope you're making use of the GSAP 3 migration guide for updating that project :) 

 

 

  • Like 1
Link to post
Share on other sites

Hey  Zach.  
I wasn't aware of that guide but i'll look into it, thanks a lot for the help!

  • Like 2
Link to post
Share on other sites
Posted (edited)

Hey Zach, sorry to bother you again. I've been having some trouble with this for the past few days. Is there any way to convert the raw path provided by  .stringToRawPath() to an array of objects like this one on the image? I Couldn't find it in the MotionPathPlugin documentation. 
 

image.png

 

Edit: I think it would help if i provided more information, i'm trying to provide this path info to a bezier object inside a tl.to method, like in the image below:

 

image.png.3caa7c2ae6906fd7f78151acbed40e12.png

 

Thanks.

Edited by Marcelo Vaz
providing more information
Link to post
Share on other sites

I actually think this is way simpler than you anticipated. A few key points: 

  1. There is no BezierPlugin in GSAP 3; it was replaced by the much more capable and easy-to-use MotionPathPlugin. 
  2. MotionPathPlugin lets you define the path as an SVG, so there's no conversion necessary. You don't need the old MotionPathPlugin.pathToBezierData() at all. It's obsolete. 

I took the liberty of porting that demo over to GSAP 3 for you so that you can see how it works: 

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

 

Notice:

// OLD:
graphBezier = MorphSVGPlugin.pathDataToBezier(graphLine.getAttribute('d'));
...
bezier: {
  type: "cubic",
  values: graphBezier,
  autoRotate: false
}

// NEW:
motionPath: graphLine

That's it!

 

But is there some other reason that you need to get all those cubic bezier points out of the SVG <path>? I can definitely help you with that, but I suspect it's irrelevant now...right? 

  • Like 4
Link to post
Share on other sites

If you really need the path data converted into that old format, here's a helper function for you: 

function pathToBezierData(path) {
  let segment = MotionPathPlugin.getRawPath(path)[0],
      result = [],
      i;
  for (i = 0; i < segment.length; i+=2) {
    result.push({x: segment[i], y: segment[i+1]});
  }
  return result;
}

// usage:
let bezier = pathToBezierData('#graphLine');

 

  • Like 3
Link to post
Share on other sites

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

See the Pen pbzEYr by chrisgannon (@chrisgannon) on CodePen

 

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.

Link to post
Share on other sites
5 hours ago, qweq3 said:

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

 

Hardware is always an issue when it comes to svg. 😉

 

I don't have to time to look, but something is definitely wrong with the v3 version. The line and floating bubble go crazy on my computer.

 

 

  • Like 1
Link to post
Share on other sites

Yeah, sorry, when I did the porting over, I missed a few things. Should be fixed now. 

  • Like 1
Link to post
Share on other sites

Hey guys, sorry to bring up an old topic again, but i would like some orientation in how i would go about implementing several instances of this inside a carousel, any tips? Thanks for the help so far.

Link to post
Share on other sites

@Marcelo Vaz feel free to post a CodePen demo with a minimal test case and show us where you're running into trouble. We'd be happy to help with any GSAP-specific questions you may have. 

Link to post
Share on other sites
Posted (edited)

@GreenSock sure, here it goes. 

 

See the Pen GRowpjN by drunksheep (@drunksheep) on CodePen

 

there are some other variables (my current enviroment has some css differences and is inside a react App, but this is the gist of it.)

 

i understand if you guys can't help because this seems to pertain more to JS/React skills to GSAP in itself. 

Edited by Marcelo Vaz
Wrong codepen Link
Link to post
Share on other sites

I didn't see anywhere that you're trying to put several instances in a carousel. Did I miss something?

 

Yeah, unfortunately, we don't have the resources to do general consulting and build stuff out (especially if it's React-based), but we're happy to answer any GSAP-specific questions for sure. 

 

Good luck with the project!

Link to post
Share on other sites

Perhaps someone else is willing to jump in and help you with your integration and build out, but that's not really something we can dig into for you. Sorry. Feel free to ask anything GSAP-specific, though. If you need some consulting/freelance help, there's a forum here for that specifically so you should definitely be able to get some help if you need it. 

  • Like 2
Link to post
Share on other sites
On 7/17/2020 at 6:36 PM, Marcelo Vaz said:

Hey guys, sorry to bring up an old topic again, but i would like some orientation in how i would go about implementing several instances of this inside a carousel, any tips? Thanks for the help so far.

 

Please remember to include the full license if you use this (my work) in your project 👍

  • Like 1
Link to post
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.

×