Jump to content
Search Community

Adjusting speed of marker along a path

birdy247 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

Hi

 

I am using the Bezier plugin to move a marker along a path.  This is working well.

 

What I want to do, is slow down/speed up the marker along the path.

 

I thought about using timeScale() but I find this "jumps" the marker to a new position.  Instead, I want it to be a gradual "natural" motion.

 

The use case is a car going along a circuit

 

Thanks

 

 

Link to comment
Share on other sites

Hi Rodrigo

 

Thanks for the help!

 

I have put a codepen example together.

 

What I want, is to be adjusting the speed of the marker (from another event listener).  The speed is likely to vary but the marker never needs to go in reverse.

 

So far I have tried the time(), progress() and timeScale() but cant get it to work as I require.

 

See the Pen grXPzJ?editors=1111 by birdy247 (@birdy247) on CodePen

  • Like 1
Link to comment
Share on other sites

This sounds really familiar... 

http://greensock.com/forums/topic/13327-animations-along-a-svg-path/?hl=gravity#entry58510

 

This is what you want, but it's not easy.

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

 

But it's not too hard to get a similar effect. Place boxes over you track in areas where you want something to happen. You can even use colors or other element attributes to help identity what should happen, i.e. green to speed up and red to slow down. Once you got got that setup, just do a hit test to see if your racer is inside a box and make any necessary adjustments. I just made one corner where the racer will slow down to show you how to do it. Once your good with your shapes, make them transparent and you're good to go.

 

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

  • Like 3
Link to comment
Share on other sites

This sounds really familiar... 

http://greensock.com/forums/topic/13327-animations-along-a-svg-path/?hl=gravity#entry58510

 

This is what you want, but it's not easy.

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

 

But it's not too hard to get a similar effect. Place boxes over you track in areas where you want something to happen. You can even use colors or other element attributes to help identity what should happen, i.e. green to speed up and red to slow down. Once you got got that setup, just do a hit test to see if your racer is inside a box and make any necessary adjustments. I just made one corner where the racer will slow down to show you how to do it. Once your good with your shapes, make them transparent and you're good to go.

 

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

 

Hi, many thanks for the assistance.

 

Just to be clear, it will not be pre-defined where the user speeds up or slows down.  I actually have a web-socket which is listening for speed data.  I am then doing some calc to work out how much the marker should speed up (or slow down).

 

There are also 2 markers on the track which need to be controlled independently.

 

Thanks

Aaron

Link to comment
Share on other sites

Well, fix your errors first. And what's up with those path selectors? 

See the Pen zqPpad?editors=1010 by osublake (@osublake) on CodePen

 

Keep your timelines separate. It's probably not a good idea to even use a timeline. My fighter jet demo seems to be having cross-origin issues at the moment. Thanks CodePen! But here's another version you may want to look at. I use a paused tween with a linear ease for the bezier. That gives me complete control over the speed of the element.

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

 

Most people don't realize this, but creating realistic looking race car animations is pretty hard to do, especially when you have more than 1 car. You need to give your cars a little AI to make it look realistic.

 

Just assume for a moment that you got the animations for one car looking pretty good. It's doing a good job of slowing down in corners, and speeding up in the straight aways. Congratulations! Now put another car on the track.

 

These aren't slot cars, so what's going to happen? The same thing that happens on the freeway in any major city. Cars grouping up on each other, and then trying to spread out, creating an accordion like traffic pattern. So while the lead car may not have to do much thinking, and can continuing cruising along without a care in the world, the cars behind him can't. They have to constantly be predicting what the car in front of it is gong to do. Am I going too fast? Am I getting too close? Can I pass it? 

 

Just something to think about.

Link to comment
Share on other sites

Hi

 

Another great response.

 

I have updated the code pen and its closer to what I want 

See the Pen RajMdx by birdy247 (@birdy247) on CodePen

 

I am not worried about this mimicking a car race.  I just want each marker to be independently controlled. If one is behind and then goes "over the top" of the other, that is fine.

 

My main worry was I could not adjust the speed of each marker in "real time".

 

From the code pen, it looks like this is possible? (Unless I am mistaken!).

 

I have built a timeline which takes the user through a series of transitions (they look like new pages to the user) before this "screen" is presented.  So, should I simply omit this from the timeline and then when its time to play this sequence, just use some callback to trigger play()?

 

^^ Hope that makes sense

Link to comment
Share on other sites

Since you're not worried about mimicking a race, basing your animations off of my demo will work just fine. It sounds like you are starting to understand how it works.
 
Speed is just distance over time, which is what the bezier tween does. To adjust the speed, you just need to change how fast the tween is playing, which you can do using timeScale. If you're getting your speed data in real-time, you need to setup some type of ratio to convert a speed to a timeScale value.
 
As an example, lets use 100mph as the baseline speed for a timeScale value of 1. You can now use that value to convert your speed data into a timeScale value. So if you just got some speed data that says the car should be going 120mph, just divide that value by your baseline speed to get the timeScale value.

120mph / 100mph = 1.2 timeScale

So instead of looking up a speed value like I'm doing in my demo, you would pass in the speed data. Something like this...

var baselineSpeed = 100;

function setSpeed(speed) {
    
  TweenLite.to(progressTween, 0.2, { timeScale: speed / baselineSpeed });
}
  • Like 3
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...