How to make an infinite animation with random positioning?

[leonardpbd]

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

[OSUblake]

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