Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dez

MotionPathPlugin

Recommended Posts

Hi, The attached code pen is a very much simplified example of my project.

The problem is, my "SUN" slows down, almost stopping after completing each rotation.

I can't get it to rotate at the same continuous speed.

Also another a minor problem is, after a long while my "SUN" tends to drift off the path towards a 1 o'clock position while still continuing to circle.

Any help would be very much appreciated.

Thanks

See the Pen MWYEYVK by spring99 (@spring99) on CodePen

Link to post
Share on other sites

Hi Dez,

The reason why your sun slows down is because every animation by default has an ease of "power1" which makes objects slow down. For constant speed you can set ease:"none" on your tween

gsap.to(".sun", {
    motionPath: {
        path: "#path",
        align: "#path",
        start: -1,
        end: -1,
    },

    ease:"none" //do this

    duration: 5,
    repeat: -1,
});

As for the drift, someone else will have to address that. I'm not sure.

  • Like 3
Link to post
Share on other sites

Hi Carl,

Thanks for the quick fix. I thought it must be something simple, but I must have missed it in the docs.

Thanks again

Link to post
Share on other sites

Thanks to Carl I've got a little further in my project of a creating a working locomotive.

See the Pen YzPEgaP by spring99 (@spring99) on CodePen

Using SVGs was the only way I could think of, to make a simple working example in codepen.

 

My problem now is getting the link-arm and wheel to act as one but they are completely out of sync, without using the small delay on the wheel.

I'd like to eliminate that if possible. Plus the link-arm jumps before getting into position.

I intend my finished project to have all the wheels and link-arms as separate PNGs.

HELP!  anyone.  Thank you.

Link to post
Share on other sites
25 minutes ago, Dez said:

Using SVGs was the only way I could think of

Just throwing an data image into an SVG like you did isn't really using SVG... If you're going to use SVG I highly recommend that you recreate the bike parts actually using SVG components, not data images. If you don't want to do that, keeping them as PNGs and using relative units to size and position them is probably a better option.

 

25 minutes ago, Dez said:

My problem now is getting the link-arm and wheel to act as one but they are completely out of sync, without using the small delay on the wheel.

I'd like to eliminate that if possible.

For keeping animations in sync, it's generally best to use one tween/timeline as the controller/runner and in its onUpdate you update the progress of the other animations. Something like this could work:

//register the plugin
gsap.registerPlugin(MotionPathPlugin);

// Use defaults to save yourself hassle of keeping them in sync
gsap.defaults({duration: 5, repeat: 6, ease: "none", paused: true})

// Create ALL of your timelines
var wheels = gsap.to("#leftwheel, #rightwheel", { transformOrigin: "50% 50%", rotation: 360 });

// set the element to rotate from it's center
gsap.set("#linkarm", {
	xPercent: -5,
	yPercent: -50,
	transformOrigin: "5% 50%"
});

// animate the rocket along the path
var linkArm = gsap.to("#linkarm", {
    motionPath: {
        path: ".path",
        align: ".path",
        start: 1,
        end: 1,
        // autoRotate: true,
    },
    immediateRender: true,
});


// Use a proxy object as the animation controller/runner
var master = gsap.to({foo: 0}, {foo: 1, paused: false, onUpdate: function() {
  // Update the other animations based on this animation's progress value
  wheels.progress(this.progress())
  linkArm.progress(this.progress())
}});

 

  • Like 2
Link to post
Share on other sites

 

Math and physics have never been my strength.
So just a little trial and error.

 

See the Pen bGNajzW by mikeK (@mikeK) on CodePen

 

Maybe I should do a course at @OSUblake.

 

Mikel

  • Like 1
Link to post
Share on other sites

Hey ZACH,

 

Terrific. Chapeau.
Let's build a complete locomotive.

 

Best regards

Mikel

  • Like 1
  • Haha 1
Link to post
Share on other sites

Many thanks to Mikel and Zach for your wonderful response to my post.

It’s more than I could ever have hoped for.

 

It would be great if you combined to build your own loco. I can’t wait to see it.

 

My small project is to attempt to automate a drawing I created many years ago of a “Claud Hamilton” class locomotive, using Serif Drawplus7, (now superseded by Affinity Photo).

My inspiration came from “https://codepen.io/devindavid/pen/rxKJLK”.

 

Thank you once again for your amazing help and interest.

 Regards

  • Like 1
Link to post
Share on other sites

Hi all,

Back again with my up to date Codepen: 

See the Pen XWJPZKZ by spring99 (@spring99) on CodePen

I've got the loco linkage working using the MotionpathPlugin but now I'm having problems with the scenery.

It fills the whole page when I run it on my laptop but in my Codepen demo it's failing to work properly by not filling the screen.

At the moment it works using CSS @keyframes but, I really want it all working with GSAP.

Every way I've tried with GSAP it appears in thin horizontal strips of scenery, repeating 3 or 4 times down the page.

Could anyone PLEASE help me on this.

Many thanks for any assistance.

Link to post
Share on other sites
37 minutes ago, Dez said:

It fills the whole page when I run it on my laptop but in my Codepen demo it's failing to work properly by not filling the screen.

Just remove the margin on the body :) 

body {
  margin: 0;
}

 

39 minutes ago, Dez said:

At the moment it works using CSS @keyframes but, I really want it all working with GSAP.

Easy! Leave the background sizing in CSS (unless you want to move it to a .set() call in GSAP) and just animate the background position using GSAP:

gsap.to(".background", {duration: 45, ease: "none", repeat: -1, backgroundPosition: "100% 0"});

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

  • Like 2
Link to post
Share on other sites

Many thanks Zach for your prompt reply.

It’s always the most simple and obvious solutions that are so easily missed.

 

My next objective is to slow down and stop the loco at a station, then leave and speed up again.

That’s why I required to have control of the background speed within GSAP.

 

That probably means I have to get my head around Master Timelines.

Maybe that will be a future question on the forum.

Thanks again

 

Link to post
Share on other sites
55 minutes ago, Dez said:

My next objective is to slow down and stop the loco at a station, then leave and speed up again.

That’s why I required to have control of the background speed within GSAP.

That probably means I have to get my head around Master Timelines.

It's easier than you might think! Here's a quick example that slows the train when you hover it:

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

 

Perhaps this post on the position parameter in GSAP would be helpful:

 

Link to post
Share on other sites

That's brilliant Zach. I can work with that.

Earlier you mentioned moving the background CSS to a .set().

How would I do that?

Thanks for your input and interest.

Link to post
Share on other sites

Say gsap.set(".background", {...properties...}), like so:

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

 

It's not that helpful unless you need to size things in a way that CSS can't handle or want to dynamically switch out the background URL or something like that.

  • Like 1
Link to post
Share on other sites

Thanks Zach.

I thought I needed to place it within GSAP to allow me to control what I may require the "background" to do at some future date within the timeline.

For example, when I introduce signals, a station, "Stop at next Station buttons" etc., to my project.

Link to post
Share on other sites

Hi Zach,

Sorry if I'm becoming a bit of a nuisance. But I could do with a little more assistance please.

My loco animation stops at the start of the second cycle through the background, but the background continues.

This is occurring in all the above codepens.

Also when I place stop/start buttons on the page and I run my project on my pc, when the stop button is pressed the loco stops but the background jumps and stops at a different position.

When I copy my project files into codepen it doesn't replicate the problem for some reason, but the problem changes to something completely different.

i.e. The buttons attitude changes from stop/start to reverse/forward.

See the Pen BaygYwp by spring99 (@spring99) on CodePen

I wondered if you had any thoughts as to where the problems lay.

Thanks

Link to post
Share on other sites
On 1/31/2020 at 6:50 AM, Dez said:

My loco animation stops at the start of the second cycle through the background, but the background continues.

This is occurring in all the above codepens.

Oops, good catch. I set the default number of repeats for the timeline to 45 but didn't overwrite that value for the background animation :) So the background would go all the way 45 times before the other stuff repeats... adding repeat: 0 to the background tween fixes that.

 

On 1/31/2020 at 6:50 AM, Dez said:

the problem changes to something completely different.

This is because version 3.0.5 which you're using has a bug related to timeScale. That's why I (secretly) updated your pen to 3.1.1 :) 

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

 

I noticed that you used the old TweenLite API form - why is that?

Link to post
Share on other sites

Thanks once again Zach, you're my Superhero as well as a Greensocks one.

Downloading the latest version seems to have cured my problems.  I didn't get the email about the latest version update so I was in the dark about that.

As for using the old TweenLite API form, I can't answer that one.

See the Pen mdyZLYN by spring99 (@spring99) on CodePen

I'll attempt to progress on my own now, but I may be back.

There's a lot to be learned from mistakes.

  • Like 1
Link to post
Share on other sites
2 hours ago, Dez said:

I didn't get the email about the latest version update so I was in the dark about that.

Ya, we have had some email troubles. An email should be going out about it to you today sometime hopefully. Sorry about that! You can learn more about it here:

 

Link to post
Share on other sites

Hi Zack,

I hope you’re available to see this post.

In reference to you earlier reply to Mikel’s post where you said:

“You could do it using some geometry ”

 

Well I could do with a little help with my project because my geometry skills are almost none existing.

I’m trying to expand my “Locomotion” animation with a new loco, based on your example, with more moving parts.

 

But the piston and connecting-rod are on a 5.24 degree angle. Which is posing a problem.

See the Pen WNvEdZp by spring99 (@spring99) on CodePen

 

Also I could do with the loco travelling to the left which means reversing all the math.

 

Hope you can find the time to help me please.

Regards

 

Link to post
Share on other sites

Hi Zach and Blake, that’s brilliant.

I can’t stop looking at it, it’s mesmerising. It’s so smooth and accurate using the new MotionPathPlugin.convertCoordinates() and with Blake's "transform", in the SVG, for the angle.

What can I say. Glad I don’t need to do a course in geometry, I’m too old for that.

 

If you don’t mind me asking. What do you use to create the SVG’s? Has anyone ever thought of creating a tutorial for it? I’ve used Illustrator, Gimp, Inkscape, Affinity Photo and Designer etc. But the code I output never looks as concise as yours.

Many, many thanks for your help. It’s saved me a lot of head scratching.

Regards,

Dez

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.

×