Jump to content
GreenSock

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

How would i solve this scenario?

Recommended Posts

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?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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