Jump to content
Search Community

Controlling Speed of Tween

RichardC 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 have a 3D project developed using Blender and Babylon.js. I have a submarine where diving (and movement /rotation) is controlled by the user. I want to use a Tween to control stopping the dive and all is well, except the tween is starting at a speed faster than the sub is already descending / ascending. Can someone please advise if and how I can control the initial speed of the object in a tween.

 

Thanks very much

 

Richard C

 

Link to comment
Share on other sites

GSAP has default ease of Power1.easeOut on every tween maybe that is causing this unexpected behavior. You can set ease on tween as,

 

TweenMax.to(object, 1, {ease: Linear.easeNone});

 

Or you can set default ease globally as,

 

TweenLite.defaultEase = Linear.easeNone;

 

 

EDIT: Initally I thought you were using GSAP in blender to control animation but I guess it is other way around and you are importing blender animation into Babylon. In that case, I think you will be able to post a demo which will be helpful. But I am not sure if you will get answer right away as our Champion member is enjoying holidays.

  • Like 2
Link to comment
Share on other sites

Sahil - Thanks for your reply.

 

Sorry if I am missing something but to try to explain my problem a little more clearly. The object (in this case a submarine) is already moving (up/down) using the javascript based Babylon.js. I want the Back.easOut or Back.easeIn to start at a specific speed. Currently, the sub is already diving at a prescribed speed (as it happens the equivalent of 30'/mins) and I want the easeBack to commence at the speed the sub is already moving, ie to start at the equivalent of 30'/min and slow to 0'/min (with a slight overshoot and back). 

 

So the Q is, how to start a tween at a specific speed?

 

Thanks

Link to comment
Share on other sites

Hi @RichardC

 

Is it just the ease for stopping the sub you're after?

 

// this ease just creates a forward<->back-motion
var stopEase = 'M0,0 C0.124,0 0.394,0.151 0.484,0.162 0.656,0.182 0.838,0 1,0';

function _Stop(speed) {
  TweenLite.to(div, 0.2, {
    ease: CustomEase.create("custom", stopEase),
    x: '-=' + 300*speed
  });
}
_Stop(0.5);

 

See the Pen Mrmwow by lennco (@lennco) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Using ThrowProps as PointC suggested is a great way to match the current velocity at the start of a new tween and then slow down as you meet your end value. It sounds like you will need another tween though to start moving in the opposite direction.

 

I think another way of looking at this is to consider that instead of tweening the x or y position of your sub you could tween the velocity directly. 

 

//if you have something like

ship.velocity = 30


//you can tween

TweenLite.to(ship, 2, {velocity:0});

 

I suspect you may have a vx and vy value that gets changed based on user input. My point is you can tween those values to change the speed and direction of the object that is updating its position based on those values.

 

 

 

 

  • Like 2
Link to comment
Share on other sites

Tweens usually aren't ideal for user controlled animations, like with moving an object around in a simulation or game. Not saying you shouldn't use a tween, it's really hard to say without seeing what's going on, but a physics based animation might be easier to control.

 

If you want to use a tween, @PointC suggestion of using the ThrowPropsPlugin might work well...

 

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

 

 

And if you're interested, here's a good intro to physics book. I don't know if it will apply to what you're doing, but there is a chapter that goes over buoyancy.

http://a.co/cVI6Qww

 

  • Like 4
Link to comment
Share on other sites

@PointC,    @OSUblake, @Carl, @lennco

 

 

Having spent sometime exploring your various suggestions I have realised I was approaching the problem from the wrong angle. The answer has been to not try to integrate Greensock tweening WITH / INTO Babylon.js renderloops but to use Greensock tweening for all the diving animation and using timeScale to stop and start the dive as  needed. 

 

I feared a Greensock tween would not allow other Babylon.js operations while it was being executed but this proved not to be the case.

 

So with your help, the problem is solved.

 

Again many thanks.

 

Richard C

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