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

Share this post


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

Share this post


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

Share this post


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.

Share this post


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

Share this post


Link to post
Share on other sites

Hey Zach,

 

Here we go

 

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

 

Happy tweening ...

Mikel

Share this post


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

Share this post


Link to post
Share on other sites

Hey ZACH,

 

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

 

Best regards

Mikel

  • Like 1
  • Haha 1

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×