Jump to content
Search Community

Move then tween on a path???

SLSCoder 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

I've got a Codepen of it but I still can't make it work.

I think I've got the needed javascript files in the settings right.

I can't make it recognize the MorphSVGPlugin plugin.

 

OK, I'm trying to make a red ball:

1. move from off the left screen to a certain point.

When it gets to that point I want it to

2. move along the path of an arc.

 

The arc is made with MorphSVGPlugin.pathDataToBezier.

As best I can see both are running but it looks like they're running simultaneously.

How can I make them run sequentially?

 

	var pathArcLeft = MorphSVGPlugin.pathDataToBezier("#pathLeftArc", {offsetX:0, offsetY:0});
    TweenMax.to("#imgRedBall", 2, {'left':LogoBig.css("left"), 'top': '205.5px'})
    .to("#imgRedBall", 1, {bezier:{values:pathArcLeft, type:"cubic"}});
	

See the Pen VzxLrQ by SLSCoder (@SLSCoder) on CodePen

Link to comment
Share on other sites

Hi @SLSCoder :)

 

If you'd like to make those tweens run in sequence, you'll want to use a timeline. 

https://greensock.com/docs/TimelineMax

 

You'd write it like this:

var tl = new TimelineMax();    
tl.to("#imgRedBall", 2, {left:0, top: 205.5});
tl.to("#imgRedBall", 1, {bezier:{values:pathArcLeft, type:"cubic"}});

 

I made a couple small changes to your tweens. I'm not sure what the left position of 'LogoBig' is doing in there? It looks like you're trying to use jQuery's css() method, but I didn't see jQuery loaded in the pen nor did I see a variable with the name of LogoBig. I just used 0 for the left position to get you started. Just FYI - animating x and y is preferred to left and top. Your red ball image wasn't loading for me as it looks like a linking problem with CodePen, but the above timeline should work for you. Though the image will animate into the scene and then jump to the start of the path. I'm not sure if that's the intended animation or not. I'll wait for the next version of your pen to see where you go with it. 

 

Hopefully this helps. Let us know if you encounter more problems.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Thanks for your help.

 

Oops, LogoBig is kind of a place holder in my 'real' file.
I thought I'd removed that. Sorry. Yea it's a JQuery object that's another image.

In Codepen I put the references to the javascript files, including JQuery in the Settings -> Javascript area.

Was that not correct?

 

I'm not sure what you meant here " animating x and y is preferred to left and top ".

The idea is to move to the start of the arc and for it to just keep going around the arc.

I'll see if I can pull that off.

 

My biggest problem here was apparently, TimelineMax, not TweenMax.

I'll have read the docs and learn the difference between the 2.

 

Thanks again for your help.

When I'm done I'll show you the site.

 

Link to comment
Share on other sites

I've changed the code in my Codepen.

I don't know whether I'm doing something wrong or if Codepen just doesn't work but I can't make it run.

It doesn't seem to like any links that are ssl secured. ??

I've got a reference to TimelineMax.js in Settings -> Javascript but Codepen doesn't recognize it.

 

Anyway, that code is closer to what I'm really trying to do.

I thought the offsetX and offsetY set to 0 caused the movement on the path to start from where the logo was.

Apparently I'm still wrong. I first thought they were the coordinates on the screen. That's wrong too.

What do offsetX and offsetY represent?

 

Notice that I create the path after the logo is where I want it to start following the path.
Would that create a stop in the animation? If so, it won't work for me.

How can I make the logo start following the path from right where it is at the end of the move without stopping the total animation?

	    var tl = new TimelineMax();    
    tl.to(LogoSoft, 2, {left:LogoBig.css("left"), top: 205.5});
    var pathArcLeft = MorphSVGPlugin.pathDataToBezier("#pathLeftArc", {offsetX:0, offsetY:0});    
    tl.to(LogoSoft, 2, {bezier:{values:pathArcLeft, type:"cubic"}});
	


 

Link to comment
Share on other sites

Looks like you're loading TimelineMax, but not TweenMax. I know it can be a bit confusing when you're first starting out. :)

 

TweenLite is the core or everything. Think of TweenMax as a more powerful version of TweenLite. You need to load one of those to use timelines or the other plugins. I'd recommend loading TweenMax which automatically loads:

  • TweenLite
  • TweenMax
  • TimelineLite
  • TimelineMax
  • CSSPlugin
  • AttrPlugin
  • RoundPropsPlugin
  • DirectionalRotationPlugin
  • BezierPlugin
  • EasePack

Then you don't have to worry about the CSS Plugin, Bezier etc. It's all done for you. If you switch your pen to TweenMax, your animation should work. Note: you still have to load the Morph plugin separately.

 

In answer to your x/y question: With the left/top vs x/y comment, I was referring to your first tween that moves the image into the scene, not the tween that follows the path. Left/top get rounded to whole pixels whereas x/y do not so you'll get smoother animations with sub-pixel rendering.

 

In order to move your logo to the start of the path, you'll have to animate it to those coordinates and then animate along the path. That does get a bit tricky when the image is not part of the SVG. That's what I was referring to in your other post here:

Please make those changes to your pen and see what that does for your anmation. Let us know if you have additional questions. 

 

Hopefully that helps. Happy tweening.

:)

 

 

  • Like 3
Link to comment
Share on other sites

Thanks again for working with me on this. So far I'm lost! :o)

That's great news about TweenMax. I don't have to load all those other scripts!

 

I can't make heads or tails out of the coordinate placements.

I tried using x & y for the first tween. It did a dive.

So, left & right did what I expected. Using x & y did not.

What do x and y represent?

Also, I still can't get a clue as to what offsetX and offsetY represent in the MorphSVGPlugin.pathDataToBezier function.

They don't represent:

1. the coordinates on the screen;

2. the top & left coordinates of the target image or

3. the top & left coordinates of the svg file.

I can't think of anything else they might represent.

 

I've updated the Codepen to use x and y.

You should be able to edit it and you certainly have my permission.

Link to comment
Share on other sites

o.k. - let's see if we can get you on the right path. ;)

 

the x/y offset are the offset from the beginning of the path. Your SVG is particularly troublesome for making calculations because the viewBox is odd. 

viewBox="242.261 -79.592 210.257 411.966"

 

Ideally, you'd like to see this (it will make your life so much easier):

viewBox="0 0 210 411"

 

I'm not sure what vector software you used to create the SVG, but that viewBox makes an already tricky situation even trickier. Here's your path and logo in a new demo. I've added a gray rectangle so we can really see what's happening. You can see that I have the SVG and the img at 0,0, but I still have to use an offset to get the logo to follow the path. That's because of those viewBox coordinates.

 

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

Try removing that offset and watch what happens.

 

Here's another version in which I've made a new SVG. The SVG is positioned at 200px from the left and 200px from the top (that's also the offset). The logo is at 0,0. Now, to animate to the start of the path I have to figure out where that is with the SVG not being at 0,0. We know the SVG is at 200, 200 so that's where we start. I also know that the first point of the arc path it at 200, 20 in the SVG. We then add the 200px from the left with the 200 'x'  units in the SVG and get an x animation of 400. Doing the same thing with the 'y' position we add the 200px from the top SVG position along with the 20 unit y position inside the SVG and we get a y animation of 220. That's how we move to the start of the path with an element that is not part of the SVG. 

 

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

That all works if the SVG is not responsive. If that is allowed to scale, new problems are going to arise because the image and SVG would then be using different coordinate systems. That's why in your other thread I said your life will be a lot easier if the target element is part of the SVG. I'd strongly recommend the approach I used in the demo from that thread:

 

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

Hopefully all this makes sense.

 

If you haven't done so, I'd recommend:

https://greensock.com/get-started-js

https://greensock.com/jump-start-js

 

SVGs and viewBox coordinates are beyond the scope of this forum, but here's some excellent reading about it:

https://www.sarasoueidan.com/blog/svg-coordinate-systems/

 

Hopefully that helps. Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Thanks again. I'm sure this is frustrating for you but please don't leave me yet :)

OK, I get x & y. Thanks.

I still don't get offsetX & offsetY in the MorphSVGPlugin.pathDataToBezier function.

What do they represent?

 

Also, I notice that if I try to move an object after TweenMax has moved it, I can't.

In the example below it doesn't move it back in the JQuery command at the end.

I put one in another function and it did move it but not back to where the css indicates.

Why is that?

 

Example:

	var nLeftTo = nLeft + LogoSoft.width();
	var tl = new TimelineMax();    
	tl.to(LogoSoft, 2, {x:nLeftTo, y:0});
	var pathArcLeft = MorphSVGPlugin.pathDataToBezier("#pathLeftArc", {offsetX:0, offsetY:0});	
	tl.to(LogoSoft, 1, {bezier:{values:pathArcLeft, type:"cubic"}}, '+=1');
	
	LogoSoft.css({"left":"-250px", "top":"205.5px"});

 

Also, I still don't know why tying the motion path to the svg is so important.

You've mentioned it numerous times.
Ideally I'd like to be able to start the path from any position on the screen I want.

Or, at least from where the target (moving element) is on the screen.
Can I do that?

Link to comment
Share on other sites

Offset x/y are offsets of the path. This demo should help. I'm only using offset x for simplicity. See how all three motion paths are grabbing their data from the same path in the SVG? See how the red (with no offset) follows the path perfectly, but green and blue have their x position offset? They are following that path, but are just using an offset of 50 units. 

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

If the target and the path are both part of the SVG, you usually won't need to deal with any path offsets.

 

I would strongly discourage trying to animate with jQuery and/or CSS alongside GSAP. If you need to change the values of some properties without tweening, you can use the convenient set() method. Think of it as a tween, but you don't use a duration. (It's essentially a zero duration tween). 

https://greensock.com/docs/TweenMax/static.set()

 

I understand why you may not yet see why having the target be a part of the SVG may be important, but the first time you try to set up a responsive SVG motion path that scales up/down with the users window, it will be apparent. ;) For what you're doing with this logo demo, it's not that big of a deal. But to answer your question about starting the path anywhere, yes you can move the entire SVG anywhere you want it in the window and all the elements will scale nicely like in my little super hero demo above. Make sense?

 

Hopefully that helps. Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Yes, that makes sense. Thanks.
So, there really is no way to set the 'position' of the path except to offset it from the position of the svg?

Does a reference doc exist for the MorphSVGPlugin?

 

Does the animation only start from the left?
Can I make it start from the right on the 2nd path?
I want to do that with the 2nd animation.

It should come from off the right edge and then arc up.

 

Also, once TweenMax has taken control of an element,  css left and top are no longer useable for that element?

Link to comment
Share on other sites

@SLSCoder welcome to the community! I see that @PointC has done an incredible job of offering practical help with your project. My hat's off to him. 

 

All the docs are at https://greensock.com/docs/, and plenty of learning articles are at https://greensock.com/learning. 

 

We really try to keep these forums focused on concise, GSAP-specific questions. I wish we had the resources to offer general consulting services for free and help with your whole project but alas, there are only so many hours in the day.  I'd encourage you to tinker and read the docs and then if you come up with a GSAP-specific question, create a new topic for each one rather than adding questions to an existing thread, just to keep things a little more organized and easy to follow. 

 

Anyway, I see that @PointC is working on an answer for you right now. Good luck with the project, and thanks for being a Club GreenSock member! I think you'll like it around here. 

  • Like 3
Link to comment
Share on other sites

Offsetting is your best option (IMHO) for using an SVG motion path and animating an element that is not a child of that SVG, but that does get a bit tricky as you've seen. If they're all part of the same parent, that little problem goes away. Docs for the Morph plugin are here:

https://greensock.com/docs/Plugins/MorphSVGPlugin

 

Animating along a path doesn't necessarily start from the left. It starts at the first point of your path. It all depends on how you create the SVG path. If you start drawing it from the right, the motion path will start from the right. If you have a path that starts on the left, but you want the element to animate from the right, you can play your tween backwards. 

 

GSAP changes the inline style of your elements. You can clear everything it has added by using clearProps()

https://greensock.com/docs/Plugins/CSSPlugin#clearProps

 

My original advice stands though. You can run into problems trying to mix animation types. GSAP can do everything you could do with CSS animations and so much more so I'd go with the robust choice. ;)

 

Be sure to check out those getting started links I posted above as they'll help you build a solid foundation of all things GSAP related.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

I think I finally get it.
About the positioning of MorphSVGPlugin.pathDataToBezier

MorphSVGPlugin.pathDataToBezier("#motionPath");

If no left, right, x or y parameters are set (as shown above) the target starts following the 'path' here:

The SVG's left & top coords PLUS the target's left and top coords PLUS the left & top coords at the START of the path (the first pair in the path).

NOTE: If the target is inside the SVG then the target's 0 coords = the SVG's top, left corner, not the screen's.

 

If offsetX and offsetY are used, the target starts following the 'path' offsetX and offsetY AWAY from the coords described above.

MorphSVGPlugin.pathDataToBezier("#motionPath", {offsetX:100, offsetY:100});

 

YES???
So, I've updated my Codepen and it finally WORKS!
I have 1 problem left.

Is there any way I can get it to not stop just before it starts following the path?

Link to comment
Share on other sites

Glad to hear you have it working now. :)

 

Yes - you can eliminate that little stop by using an easeIn on your first tween and an easeOut on your Bezier tween. Something like this:

 

tl.to(LogoSoft, 1, {left:0, ease:Power1.easeIn});
tl.to(LogoSoft, 1, {bezier:{values:pathArcLeft, type:"cubic"}, ease:Power1.easeOut});

 

Of course, you can use any ease you like. 

 

Good luck with your project and happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

I'm sorry to keep bugging you. I'm still having problems that I can't figure out.

I've updated my Codepen. The whole animation *almost* works.

 

My problem is that both the top and bottom animations jump to the right about 10? px right at the beginning of the arc.

If you run the Codepen it's more noticeable in the bottom Link animation but both of them do it.

 

left:0 = the left edge of the div tag that is the container of the svg.

I've got both offsetX set to 0 (actually no parameter set)

var pathRightArc =  MorphSVGPlugin.pathDataToBezier("#pathRightArc", {offsetY:-407});

And when I move to the path I move to left:0 which should be the same exact spot.

If I change either of those properties it throws the end of the animation off.

 

I'd like to use align as you suggested but I can't make it work. The images are inside the svg.

var pathRightArc =  MorphSVGPlugin.pathDataToBezier("#pathRightArc", {align:LogoLink});

 

Why is the image jumping to the right? More importantly, is there any way to get rid of that?

Link to comment
Share on other sites

Your demo is not working. There are errors in the JavaScript. If you use the little arrow pull-down in the JS panel, you'll see an option that says 'Analyze JS'. Choose that and then scroll through your code. You'll see red highlights where something needs to be fixed.

 

As @OSUblake mentioned, it is better to create a new version each time you make progress. The easiest way to do that is simply create a fork and maybe name it with a version number. 

 

Once you have those errors fixed, I'll take a look at it for you.

 

Thanks.

  • Like 2
Link to comment
Share on other sites

43 minutes ago, PointC said:

Your demo is not working. There are errors in the JavaScript. If you use the little arrow pull-down in the JS panel, you'll see an option that says 'Analyze JS'. Choose that and then scroll through your code. You'll see red highlights where something needs to be fixed.

 

:shock: Wait... what?

 

TIL that CodePen can analyze your HTML, CSS, and JavaScript and will google the error for you!

 

  • Like 2
Link to comment
Share on other sites

Hi @SLSCoder

 

Don't confuse left and top with x and y. Two completely different concepts. My advice, don't use left and top if it can be done using x and y. Positioning is much easier when you set top and left to 0, and use GSAP to set and animate x and y. You should also read up on how xPercent and yPercent work in this blog post.

 

And motion paths are not tied to SVGs. All the pathDataToBezier methods does is it converts path data into an array of points, which can be used with the BezierPlugin. That's where the real magic happens. Learn that, and you'll be golden.

 

There's some good stuff in here. There are no hard coded values, so it's pretty flexible. It requires more code, but makes it easier to test out different things.

 

See the Pen BdOpJM?editors=0010 by osublake (@osublake) on CodePen

 

 

And a variation of that using the BezierPlugin's thru type instead of path data.

 

See the Pen QMVdxL?editors=0010 by osublake (@osublake) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

Thanks. That code is pretty elaborate.

I studied it and it pretty much makes sense to me.

 

I've gotta make this animation responsive.

How can I make the path and the motion scalable in Javascript?

I tried using align but to no avail.

 

Also, where can I learn about x & y as opposed to left and top?

Link to comment
Share on other sites

The easiest way to make that whole thing responsive is build the entire element as one SVG. Everything then scales together as one item like in my little superhero demo shown earlier in this thread. Here's an example from another forum question:

 

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

 

See how the path and target all scale perfectly together when you change the window size? You don't need to make any adjustments or new calculations when the user resizes the window. I'd recommend converting your logo to SVG too rather than using those .pngs. You'll get a smaller file size and they'll stay crisp and perfect at any screen size. It would only be a few paths and line elements to turn your logo into an SVG. You also won't need to concern yourself with left and top in the SVG coordinate world. Everything starts at the top left corner: x:0, y:0. 

 

Hopefully that helps. Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

WOW! Thanks for such a quick response!

 

I'm guessing you were referring to the codepen with the 3 circles?

I was playing with it a bit. I see that I can change the size of the svg and not the viewbox.

The arc & 3 circles change in size as expected and they moved along the arc as expected.

 

This isn't really a 'greensock' question but I don't know where else to turn. I've googled it to death.

Maybe you could just refer to another forum or point me in a direction if you don't want to answer it?

 

I scale the svg by leaving the viewbox as is and setting width:16%; height:auto in css.

Now the svg will scale as the browser (device) size changes.

 

For it to be responsive I have to move the paths so that the center of the 'scaled' svg is exactly at the top, left corner of the BigLogo.png.

I can get the scaled width by reading the

elSvg.width.baseVal.value

but when I try to read the height it doesn't change.

I'm guessing it's because I set the width in css but leave the height at auto. With preserveAspectRatio, it'll do that anyway.
I need it because the top of the svg needs to be LogoBig.top - svg.height/2.

 

How can I find both the width and height of the scaled svg?

 

 

 

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...