The height is longer than the content

[nicobonder]

Hi, I am using GSAP for first time. I want to create a path with an airplane that move at the left of some text.

I could do it, but the body or the area where is the text is much longer than the content. So, I dont know how to fix that.

I was trying to change the height of the body or the div "text" any of that fixed the problem.

so, I guess the problem is in the GSAP configuration. I think I should use some end property, but I dont understand how to do it.

 

Can you help?

 

The idea is to learn how to use it to include this in a biger proyect.

 

Thanks.

moverObjetos.css moverObjetos.html movimiento.js

See the Pen gOxqQrm by nicobonder (@nicobonder) on CodePen

[nicobonder]

I also tryed to use gsap.fromTo , but I dont know where should I use it. Because if I do it like in the docs and just put it in JS, I got the "gsap is not defined" message.

[GreenSock]

Welcome to the forums, @nicobonder! And more importantly, welcome to GSAP. 

 

You're using a very old version of GSAP with an old syntax and you're also using ScrollMagic which is NOT a GreenSock product (we can't really support it here). The good news is we have ScrollTrigger which does everything ScrollMagic does plus a LOT more. It's a native GSAP plugin, so we totally support it here. I think you'll find it easier to work with too. 

 

Here's a fork of your demo with the simplified code: 

See the Pen PoKLqGY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But the animation looks odd to me because you've hard-coded "y" values to go to 900 and then to whatever the viewport height is, so if your screen is less than 900px tall, your animation is making the element move out of the screen before coming back. You'd probably need to adjust those values in your Array. 

 

Does that help? 

[nicobonder]

Thanks @GreenSock When I try that (I copied your solution), but I recive the "gsap is not defined" message. 

I tried to declare gsap using:

var gsap = require("gsap/dist/gsap").gsap;

var MotionPathPlugin = require("gsap/dist/MotionPathPlugin").MotionPathPlugin;

And I guess I should include some script in html to include the plugins, right? I really dont understand the installation page. Sorry, I am pretty new developing.

 

Thanks for your help!

[nicobonder]

I found a tutorial and now I am pretty much closer. You can check the code again in codepen.  

 

as the text can be shorter o longer, I need to know how to make the airplane stop exactly when the textos div finish or make it flight beyond the window limit. 

Can you help me with that? 

Thanks.

 

[GreenSock]

I don't really understand the effect you want, but if you just want to keep that image on the side of the text while that section is in view, you can simplify it even more by using the pin feature: 

See the Pen yLowPqQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Did you figure out your installation problem? 

[nicobonder]

Yes, I solved the installation problem. 

I just want the flight keep moving down until the text finish and stop in the same line where the text finsh. Just that. 

[nicobonder]

I am sorry, I just saw your code. 

what I was trying to do is that the airplane had some movement to the sides. That is why I used tl

[GreenSock]

15 minutes ago, nicobonder said:

what I was trying to do is that the airplane had some movement to the sides.

Sure, you can just animate to various x positions: 

See the Pen WNEmdoP?editors=0010 by GreenSock (@GreenSock) on CodePen

[nicobonder]

That is beautiful! Thank you very much!