Jump to content
Search Community

How would i solve this scenario?

bQvle test
Moderator Tag

Go to solution Solved by Diaco,

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



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.



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


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)



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

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