Help making ball follow path with MorphSVGPlugin.pathDataToBezier

[SLSCoder]

I tried to set up a Codepen for this but can't get it to let me set up the javascript files in the header.

 

I can't make the ball follow the path.

I've verified that MorphSVGPlugin is making the path but the tween is choking.
I can't figure out why. The error I'm getting in the console is:
"Unable to set property 'vars' of undefined or null reference"

I paid for the use of MorphSVGPlugin but so far I can't get what I need.

I've attached the file.

The javascript file url for MorphSVGPlugin is relative for obvious reasons.
If you test it you'll need to fix that url.

index.php

[PointC]

Hi @SLSCoder

 

Welcome to the forum and thanks for joining Club GreenSock.

 

The target that you're aligning to the path needs to be SVG. I used your file to make a quick pen, but I used a SVG circle instead of the red ball png.

 

See the Pen eEVKqy by PointC (@PointC) on CodePen

 

Just FYI - this is a good pen to bookmark as it has all the Club plugins for use on CodePen when you have other questions.

 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

Hopefully that helps. Happy tweening and welcome aboard.

[PointC]

Just to follow up. You can make an image follow the path, but it's tricky if the image is not sitting at 0,0. Like this:

See the Pen YxejeX by PointC (@PointC) on CodePen

You'll save yourself a lot of headaches by making the target a part of the SVG. 

 

Happy tweening.

[Carl]

Great job, Craig. Yup, the target doesn't need to be in the SVG but it does make it easier.

 

SLSCoder, welcome to the forums. Let us know if you need more help getting started. As Craig AKA PointC mentioned its best to provide a CodePen, plunkr or jsFiddle demo so we can easily see all the moving parts, edit and provide solutions.

 

Happy Tweening!

[PointC]

Thanks Carl. 

 

Yeah - I wasn't completely clear in my first response about a target using a path and aligning the target to the path in the MorphSVGPlugin.pathDataToBezier method . I think this can trip people up a bit. You can use any element and follow the path, but if you try to align a non-SVG target to the path, you will get an error. That was the case in this thread:

[SLSCoder]

Thanks for the replies.

Also, thanks for the links to the plugins. Now I can use codepen even with them.

I'm not sure what made it work.

 

In reality, I don't want to see the svg at all.

Also, I want the ball to start at about 250 to 300 pixels below 0. I want the left to be 0.

I also can't use an svg ball. What I want to move is actually a .png image which is part of a logo.

 

To complicate it, I want to run 2 of this animation inverse to each other.

Basically, the other one will be this one upside down and starting on the right.

It should start I think at around left:600px and move left along an arc, upward.

The 2 parts of the logo will 'hook' at the end of the animation.

 

If I understand correctly, I should be able to do that by adding a delay:0 to the tween??

 

I'll play with what you've given me and see what I can do.

 

 

[SLSCoder]

I think *this* was the problem.

TweenMax().to . . .

I put parens after TweenMax and should not have.

Once I removed that the code worked fine.

 

I simply didn't duplicate the code correctly.

I thought I was creating a TweenMax object and then using it in one line.

 

That's what happens when I can't copy & paste. I'm forced to learn the code

 

[PointC]

Glad to hear you got it working @SLSCoder

 

Just FYI - you can make an image part of the SVG and align it to the path. One of the big advantages of that is the image will scale perfectly with the SVG. Here's another fork of your project. I've removed the width and height attributes from the SVG so it will scale up and down. See how the .png works nicely with that scaling?

 

See the Pen XaZLVx by PointC (@PointC) on CodePen

Thanks again for being a Club member and let us know if you have additional questions.

 

Happy tweening.