Jump to content


full height path

Recommended Posts

I have to do a airplane that fly vertically left and right whenever the user scrolled,
I already did it with Scroll magic and I can't figure how to do it right,

i know the problem is on the path it must take full height of my container 
but i don't know how to do it 
do you have any idea guys I've been stacked for 2 days
Thank you  

See the Pen qBddMOG by omar-errabaany (@omar-errabaany) on CodePen

Link to comment
Share on other sites

Hey Errabaany and welcome to the GreenSock forums!


4 hours ago, Errabaany said:

I already did it with Scroll magic and I can't figure how to do it right

What's wrong with what you currently have?

Also note that ScrollMagic is not a GreenSock product and we don't really support it here. So you may not get an answer depending on what your question is. What we usually recommend using is updating a timeline's progress value based on the scroll position of the page. 


A related thread:


Link to comment
Share on other sites

Hi @Errabaany


I may not fully understand the question.


Is your path going to be that simple? If so, you may consider just using a more in-depth timeline with x and y values as vh and vw units.


	.to(ship, {x:-100, y:'-40vh'})
	.to(ship, {x:100, y:'-50vh'})

Or similar. And with that, of course, you'll need to add/tweak the eases for each tween/entire timeline, depending. 


If your path is more complex, you may consider loading setting the motionPath to an SVG path that's sized appropriately to the browser window.


If that isn't what you're looking for, you may also be having issues with your ScrollMagic scene not being setup to the the correct duration or proper triggerHook.

  • Like 2
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.