How would i solve this scenario?

[bQvle]

Hi,

 

I recently discovered GSAP and it looks amazing. I'm currently developing a game, and I want to change my hardcoded animations to use GSAP.

 

I have an Air drop animation. (plane fly from from A to C, and drop parashoot at B

 

Currently its all handled with an animate function thats called every frame with a delta-time. And i have all the control in the world. but its just alot of work and time for simple animation).

 

My problem converting to GSAP:

 

When the parashoot is dropped, it starts with a scale of "1.2" in both x and y. and over 5 seconds the scale animates to "0.4".

This is not a problem.

 

But I want some soft "noice" to it, to make the parashoot seem more alive. some random soft variation in X and Y scale.

 

In my hardcoded animation i just used Math.cos / Math.sin and applied it to the elapsed duration. and appied that as a factor to my scales, after the scales had already been lerped between its Start and Target scale. 

 

I also want to wiggle the parashoots rotation on its way down. But I guess that could easily be solved with a seperate "yoyo" timeline.

 

Solution?

I guess one solution would be to make a CustomEase and use that on the "main" scale tween.

 

But is there a way of achieving this without using CustomEase?

[Diaco]

Hi bQvle 

 

pls make a reduced Codepen Demo of your current version available :

 

Read This First : How to Create a CodePen Demo

[OSUblake]

You should check out his leaf falling demo. It's pretty close to the movement of a parachute.

 

See the Pen vOrqKR by MAW (@MAW) on CodePen

[bQvle]

Thank you for answering.

 

Heres a codepen

See the Pen OVYxeB by anon (@anon) on CodePen

 

The red box is the parashoot, the blue box is the effect i would like to add to the red box. (on top of the scales already beeing tweened by the "fall" animation)

[bQvle]

You should check out his leaf falling demo. It's pretty close to the movement of a parachute.

 

See the Pen vOrqKR by MAW (@MAW) on CodePen

 

Except my parashoot is top-down

 

I could probertly solve it by just hardcoding individual keys/tweens. but I'm curious if it can be solved with an easier method.

 

The main scale for the falling, and something else for the wiggle effect. (blue square in my codepen)

 

Edit:

Combining Scale and width is not a solution. I'm not going to use this with CSS, but on Sprites in PIXI.js. so I only have scale.x and scale.y to work with.

[Diaco]

hmm , how about using a container : 

See the Pen XbwzMp by MAW (@MAW) on CodePen

[bQvle]

hmm , how about using a container : 

See the Pen XbwzMp by MAW (@MAW) on CodePen

 

Thanks, I think I'll go with this. I't will required me to re-arrange some of my animations gameobjects. but thats a small tradeoff concidering the "ease of use" in future animations.