Jump to content
GreenSock

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

Looking for help syncing a dot with a moving path using Motion Path Plugin

Go to solution Solved by GreenSock,

Recommended Posts

I've posted about a similar technique a few months back that you all helped me with, but when trying to recreate the same idea, I'm really struggling getting the timing of the dot to sync with that of the line.

A few things to consider is that the dot is near the end of the path when it plays, so there is an offset, but even the speed of the line and the motion of the dot seem to be off so I think I'm just approaching it wrong?

 

Outside of trial and error plugging in numbers, is there any way to better identify what the start and end values should be?

See the Pen rNmGQmG?editors=1010 by ekfuhrmann (@ekfuhrmann) on CodePen

  • Like 1
Link to comment
Share on other sites

Ah. I guess the line shouldn't be moving at a consistent pace in the background. It would take longer for the dot to traverse the big peak than the long horizontal section.

You can use SVG paths as easing curves with custom ease.... maybe there's a solution there.

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

1 hour ago, Cassie said:

You can use SVG paths as easing curves with custom ease.... maybe there's a solution there.

This is a great idea!

Link to comment
Share on other sites

  • Solution

Ooh, this was a fun experiment. I just pasted the SVG <path> data string into the CustomEase editor to convert it, then copied the results into a CustomEase that's used in an animation of the dot's "y" value to -140 because that's the tallest peak and BOOM:

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

 

🎉

 

That'll be much more performant than that StackOverflow post thing that constantly loops to try to find the closest x value. 

  • Like 8
Link to comment
Share on other sites

@GreenSock -- Beat me to it! I just copied the path when I got the post notification.

  • Haha 2
Link to comment
Share on other sites

that's pretty amazing. great idea @Cassie and great implementation @GreenSock . very cool

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Wow this thread has been  incredibly helpful. @Cassie thank you so much for identifying that the pacing would never work due to them needing different easing curves. I really struggled with identifying why the dot seemed to either be so much quicker or so much slower than the path.

@GreenSock this is such an interesting implementation and the first time I'm delving into custom-eases so thank you so much! I also really appreciate the commenting in the file! 

  • Like 1
Link to comment
Share on other sites

6 hours ago, ekfuhrmann said:

@GreenSock this is such an interesting implementation and the first time I'm delving into custom-eases so thank you so much! I also really appreciate the commenting in the file! 

Happy to help! Yeah, this was delightfully simple in the end and a very interesting use case for CustomEase. I'm so glad it came together. I love challenges like this. 🙌

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Ahhh! I was away from my laptop today but this was playing on my mind. Just came back to it now and Jack's already beat me to it.

I'm happy my instinct paid off though!

  • Like 2
Link to comment
Share on other sites

This is my fave forum thread now. Easing is SO cool.

  • Like 2
Link to comment
Share on other sites

@Cassie Unrelated to this thread, I just wanted to let you know I came across your blog not more than a few hours after you responded here, not realizing that you were one in the same as cassie.code until realizing your avatars matched up. Anyway I shared your blog with my team because of just how beautiful and well put-together it is. It's a great site and I just found some humor in that you also just so happened to assist me with my animation question here. Sometimes it can feel like a small world thanks to little interactions like that, thanks for everything you do!

  • Like 3
  • Haha 1
Link to comment
Share on other sites

Ah, this is lovely to hear. Thanks for letting me know. ☺️

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.

×