Skydive animation

[bqhieu]

Hi bro,

 

I am a newbie with TweenMax. I have to make a banner with skydive effects. I spent all day to research and tried to make it but it's too hard with me. I am stucking with 2 problems. First, please, view this video : https://www.youtube.com/watch?v=EoBW5NVm6C0

 

I don't know how to make 3 small products stand at air plane door. After that, 3 products jump out and the brolly come off. My jsfiddle : https://jsfiddle.net/bqhieu/dnqmunxd/12/. I also attached my code.

 

Thank you so so much for your helping!

code.zip

[Carl]

Hi and welcome to the GeenSock forums. 

 

Thanks for the demo and video. This isn't the type of thing I can build out in entirety for you.

The biggest trick is to get the products and plane flying at same speed and then having the products drop while the plane continues moving.

 

Perhaps this will help:

 

var speed = 100; // plane and boxes move at 100px per second




//figure out duration based on amount of distance needed to travel at global speed.
function getDuration(distance) {
  return distance / speed;
}


var tl = new TimelineLite();
tl
  //animate green and orange items across and then have them jump
  .to(".green, .orange", getDuration(400), {x:400, ease:Linear.easeNone})
  .to(".green, .orange", 1, {y:300, ease:Back.easeIn}, "-=1")
  //start plane animating at same speed at time of 0.
  .to(".plane", getDuration(800), {x:800, ease:Linear.easeNone}, 0)

 

http://codepen.io/GreenSock/pen/pyPYpE

[bqhieu]

Hi Carl,

 

Thank you so so much for your helping. Wow wow, how very great! It's really helpful. Carl, do me a favor, please. I still can't make the parachute appear while products drop. Could you please give me an idea? Really appreciate for your help!

 

Many thanks!

[Carl]

it really depends on how you you want your parachute to appear and how detailed you want to be.

 

My guess is that even the most advanced animators around here could take over 4 hours to a day trying to get it perfect as they struggle with the following questions:

 

how fast should the parachute fly up?

should the strings unwind?

how quickly should the chute open?

how will the opening of the chute impact the speed at which the products fall?

 

Even with all that considered you have then figure out if the opening should be a spritesheet animation or comprised of multiple tweens.

 

I took the very very very quick approach just to illustrate the concept of a parachute being quickly revealed as they fall

 

updated demo: http://codepen.io/GreenSock/pen/pywJZX?editors=0010

[bqhieu]

Hi Carl,

 

Thank you so much for your quick reply. That's brilliant. I will follow your instruction. Have a nice weekend!

[bqhieu]

Hello Carl,

 

Thanks for your helping. I still have a big problem. While products drop, it must zoom in and swing.  Please, have a watch video above. How can i solve it? I have attached my new code.

new code.zip

[Carl]

You did a very good job applying the concepts to your project. Congratulations.

 

Please keep in mind that we can't just don't have the resources to help everyone with every part of their projects as it can be very time consuming.

 

To make the products zoom you just need a scale animation at the right time.

Please see if this helps: http://codepen.io/GreenSock/pen/pywJZX?editors=0010 (updated)

[bqhieu]

Hi Carl,

 

Thanks for that. After few days researching, i think my experiences about TweenMax is better now. You're right, i shouldn't ask every part of my project like that. Thanks for your helping!

[bqhieu]

Hi bro,

 

Haizz, i tried a lot but i can't make it swing while drop. Do you have any idea? Thanks for your helping.

new code.zip

[Dipscom]

You wish has been (partially) granted.

 

Here's a little way for you to animate your jumping products. It is not a complete solution as I do not have the time at the moment to go over the whole thing - Neither I should as that way, you won't be learning much. Take the code apart and see how much you can extrapolate from what you can see.

 

If something does not make sense, come back and ask away. Be happy to elaborate. Right now I just have to go back to work.

 

Happy Tweening.

amended.zip

[Carl]

lookin' good, Dipscom. Thanks for jumping in.

[bqhieu]

Hi Dipscom,

 

Thank you in advance for spending valueable time to help me. Wow, genius! To be honest, it's quite complicated with a newbie like me but your code are working greattt! I would like to attached my lastest code. Hope it helpful for someone. Thanks you so much - Carl, Dipscom!

code.zip

[Dipscom]

It's all good Bqhieu, we're all here to help each other.

 

I'm afraid the code is a bit complicated because what you want to achieve is not that simple. As a rule of thumb you want to start with simple things and then put several of those simple things together. You will be surprised how much a bunch of simple things together can look like something very complicated.

[bqhieu]

Hi bro,

 

I am thinking about responsive on my project. It isn't easy. I decided to make multi version for each break-point. Example: one version for min-width:1100px. One version for min-width:750px and max-width:1099px. 

 

But when i resize the browser window, my code is not running well. I want to make my code refresh while resizing. Could you please give me an idea? Please, download my newest code : https://www.dropbox.com/s/ql6q5c316obzwmh/new%20code.zip?dl=0

 

My code is quite messy now because i would like to make it running well first. Thank you in advance for your helping!

[Dipscom]

bqhieu, do you think you could make a simplified version of what you are trying to achieve in CodePen? It will be much easier for us to help you that way.

 

[bqhieu]

Hi Dipscom,

 

Thanks for your quick reply. Yes, i did it. Please, have check this link : 

See the Pen mPqmZO by bqhieu (@bqhieu) on CodePen

 

I want to make responsive on my project. But i really can't. So, after a lot of research, i decided to make multi version for each break-point. Example: one version for min-width:1100px. One version for min-width:750px and max-width:1099px. 

 

But when i resize the browser window, my code is not running well. I want to make my code refresh while resizing. Example : after resize to tablet mode, my animation will restart (not refresh page). I know greensock support restart() function. But it isn't working. Really need your help. Thank you so much!

[bqhieu]

Hi Carl, Dipscom,

 

Do you have any idea how to make animation start again while resize windows? Thank you so much!

[Dipscom]

Hi bqhieu,

 

It is nice that you provided an example but the example itself is rather complicated - Actually, it looks like it's you whole banner and as Carl mentioned before, we can't just build the whole thing for you.

 

We ask people to provide a reduced example because we just do not have the time/resources to go over everybody's code and figure out what is wrong.

 

What you are asking now is a completely different question than what this thread is about. That's another thing. If we break the questions into unique threads, it makes it easier for other people to search for the same answers.

 

I hope you understand that is not that we do not want to help, we do, we love it. It is just that there needs to be a compromise.

 

I am going to start another thread with this question of yours in the main GSAP forum, look out for it.

[bqhieu]

Hi Dipscom,

 

Thanks for your answer. Yes, you're right. I am new in here so i don't understand about some rules. Okay, i will try my best to solve this problem before create new thread. I know your time is very precious, so, i really appreciate your help. Hope one day, i have good experiences to help people to solve technical problem about GSAP!

 

Thanks

[Carl]

Diaco has an excellent demo that pauses and animation while you are resizing and then continues playing when you are done. You could just grab his debounce function and make your animation restart()

 

http://codepen.io/MAW/pen/WrdbVY?editors=0010

 

If you don't want to wait for the resizing to be completely done, you can use his throttle example:

http://codepen.io/MAW/pen/yewOgZ

 

Since resize events fire very often, this approach allows you to limit how many times a function can be run in response to resizing. For what you need I would go with the first approach.

[Dipscom]

bqhieu,

 

Just a follow up.

 

It's not that there are rules per se that you have to follow. It's more like explaining why it is not possible to go over all of your code and work out what is wrong, what should be done or how it should be done.

 

It would take forever, really. Because there's a big number of people that come here. We can't really do it for everyone. And it is not fair to debug someone's code but not others.

 

That is why, it is very helpful to everyone, to keep the threads to one question/answer. And to break your problem down to one issue only. 

 

Someone else can come tomorrow, do a quick search in the Forum and find that he/she needs to find out how to pause the timeline while the window is being resized and then, resume playing.