Jump to content
Search Community

Is there a way to cut off the gap left by y-axis animations?

bettsonbox test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

  • Solution

That seems like more of a logic thing - you're translating elements away but the overall layout doesn't change so you're creating a big gap. Imagine there was no ScrollTrigger anyway - you'd still see the gap. To get rid of that, you could just set margin-top: -150vh on your footer so that it overlaps and compensates for the gap you're creating. Otherwise, you'd have to fundamentally change the height of the entire page to fill in that gap while you're animating those which is far less performant. 

 

Also, you are using invalid start values. It's supposed to be a space-delimited value that has something like "top 40%" or "150px center" or whatever. Relative values like "+=40%" only make sense for end because it's relative to the start. There's nothing that the start would be relative to. I'm not really sure what you were trying to do with start: "-=40%"

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