Jump to content
Search Community

Animate a Rocket

thirdknife 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 currently trying to achieve a rocket animation. It should start very slow as a lift off and then gradually increase the velocity at the top of window.

 

I cannot achieve the effect with slowmo, as it starts too quickly and the rocket reaches midway the window. I'd appreciate the help and tips.

 

 

Thanks.

 

See the Pen mPwYjB by thirdknife (@thirdknife) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi thirdknife :)

 

Welcome to the forums.

 

Yep - Shaun is putting you on the right track with easing. In addition to the Ease Visualizer he linked to, you can take a look at these resources

 

I've just made a new GreenSock Easing Playground you can try:

See the Pen RaVEpP by PointC (@PointC) on CodePen

 

Blake has a Cubic-Bezier Easing CodePen:

See the Pen OyPGEo by osublake (@osublake) on CodePen

 

This is the forum post that goes with it: 

http://greensock.com/forums/topic/7952-javascript-custom-ease/?p=51357

 

In addition to easing you can gain a lot of control by animating the timescale too. You could start extremely slow and then really ramp it up as the rocket gains altitude. Check out the docs about timeScale():

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/timeScale/

 

Here's a great GreenSock CodePen showing timeScale() animation in action:

See the Pen LuIJj by GreenSock (@GreenSock) on CodePen

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

:)

  • Like 4
Link to comment
Share on other sites

Sometimes you can also animate the background to make it look like the rocket is moving, if you seem to be running out of space for the rocket to go--just a tip once you get it into the air and the launch has already taken place following PointC, and Shaun's great advice!

 

Here's a pen showing an older rocket I was animating with GSAP:

See the Pen RWoPya by celli (@celli) on CodePen

  • Like 3
Link to comment
Share on other sites

Great question and suggestions so far.

To take PointC's "tween the timeScale()" suggestion one step further here is another demo:

 

var rocket = document.getElementById("rocket");
var marker = document.getElementById("marker"); // red line for visualizing where acceleration occurs
var position = 70; // percentage of window height where acceleration gets triggered
var tween;


marker.style.bottom = position + "%"; 


//create animation on demand
function blastOff() {
  tween =  TweenLite.fromTo(rocket, 5, {bottom:"0%"}, {bottom:"100%", ease:Linear.easeNone, onUpdate:checkPos});
}


function checkPos() {
  console.log(parseInt(rocket.style.bottom));
  if(parseInt(rocket.style.bottom) > position){
    TweenLite.to(tween, 1, {timeScale:5}); //speed things up
    tween.eventCallback("onUpdate", null); //stop running the callback to check position
    console.log("accelerate!!!"); //rejoice!
  }
}


document.getElementById("restart").onclick = function() {
  blastOff(); 
}


blastOff();

 

http://codepen.io/GreenSock/pen/zqdObG?editors=0010

 

The rocket moves up using a Linear (constant rate) tween. Once it gets to a certain window-height percentage we tween the timeScale of the tween making it accelerate.

  • Like 4
Link to comment
Share on other sites

  • 5 years later...

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