Jump to content
Search Community

Page size increases after animation completes

ex-homedepot-cashier test
Moderator Tag

Recommended Posts

What's causing the page height to increase drastically after the animation completes?

 

I'm trying to get the text "Grow" to scale and encompass the screen.

After the animation completes the page size suddenly increases by a lot and causes some odd behavior.

 

How can I stop this from happening?

See the Pen mddgegX by homedepot (@homedepot) on CodePen

Link to comment
Share on other sites

Hm, I'm not very familiar with ScrollMagic or how it works (it's NOT a GreenSock product) but this definitely sounds like a ScrollMagic question rather than a GSAP question. When I inspected your demo, theres a ".scrollmagic-pin-spacer" that has padding-top of 5000px, so that's likely your culprit. And you've got something that's 1000% scale, so that's very likely making things quite tall as well. 

 

If you have any GSAP-specific questions for us, we'd be happy to help. ScrollMagic questions should be directed to the author or the Github issues area.

 

Happy tweening!

  • Thanks 1
Link to comment
Share on other sites

You need to wrap the element in some container with desired height and use wrapper as trigger.  In this case I am using another wrapper to keep set overflow on visible elements. Hiding overflow in some way will prevent page height from growing. You can tweak everything to get desired result.

 

See the Pen oNNOLZb?editors=0010 by Sahil89 (@Sahil89) on CodePen

  • Like 6
Link to comment
Share on other sites

6 hours ago, Sahil said:

...

 

?

 

@Sahil, I just wanted to say that its really good to see you posting again Sahil. Its been almost a year and I'm sure anyone whom has ever read one of your posts here at the forum is thankful that you're back and eager to see your participation again. Many of us really missed you Sahil, so welcome back its really great to see you !

  • Like 4
  • Thanks 1
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...