Jump to content
GreenSock

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

How to make an infinite animation with random positioning?

Recommended Posts

I wanted to create an infinite animation with the rocket per my demo but I'm not sure how to do it. 

I'm currently using MotionPathPlugin and I want it to fly anywhere inside the box like circling around.

Also, I would like to make the rocket fire blink somehow while moving.

 

Does the MotionPathPlugin  is the best option here? I've noticed some jitters maybe because of the coordinates that I've set. 

Is there anyway to animate it flawlessly? 

Appreciate any help! 

 

 

See the Pen dyRKwqE by leonardpbdigital (@leonardpbdigital) on CodePen

Link to comment
Share on other sites

To make a motion path seem random, you can just make it really long with several loops, think of a swirl, but then have end connect to the start. The MotionPathHelper would be a good tool to help visualalize that, or you could just draw a path in a SVG editor.

 

https://greensock.com/docs/v3/Plugins/MotionPathHelper

 

For the flame, you can create another animation just for the flame, and maybe change its opacity using some sort of custom ease, like RoughEase or CustomWiggle.

 

You could even add some rotation to the SVG to make it appear more random. Just a quick example I made using the MotionPathHelper.

 

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

 

 

  • Like 4
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.
×