Shorten div after scrolling past

[srbm]

Hi, 

How can I shorten a div's height after I scroll past it with scrollTrigger set to scrub: true so that I can scroll to the top much faster.

Scrolling down I have a long div that's pinned with a long animation series created with a set of images. On the way back up I want to freeze all the animations at the last frame and have a much shorter scroll length to get to the top. I'm able to freeze the content by using pause in the onUpdate function of the tween, but I'm stumped on making the scroll height smaller.

 

Thanks for your help.

 

PS. I tried getting a code pen together from your starter code pen but kept getting errors.

See the Pen XWdKevW by srbm (@srbm) on CodePen

[ZachSaucier]

Hey srbm and welcome to the GreenSock forums!

 

1 hour ago, srbm said:

I tried getting a code pen together from your starter code pen but kept getting errors.

That just means you need to keep fixing them  There are several formatting errors in your code.

 

Usually people don't want to do this because it causes a jump in the page's scroll position. But you can do it by killing off the ScrollTrigger and setting the animation's state in the onLeave:

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