scrolltrigger animation on scroll up (with scrub)

[jklue]

I have a large menu that I don't want visible when scrolling down the web page (aside from initially visible at the top). But I would like it to slide (scrub) into view on scroll-up. In my codepen I've reversed the progress so it does scrub, but it takes the whole page to fully reveal (even with duration set).

 

Can I make this slide down a little quicker, while still "scrubbing" with the mouse?

 

(scroll to bottom of codepen, then back up to see menu reveal)

 

See the Pen wvOboWv by lukehatfield-the-sasster (@lukehatfield-the-sasster) on CodePen

[jklue]

After I posted I realized how to shorten the duration (just multiplied the progress by 8 or whatever). Two questions remain...

1. Is there a way to start current progress of menu scrolling down from 0 anywhere on the page? Right now it  understandably jumps to reveal if you don't go all the way to the bottom first.

2. Might there be a way to get rid of the fixed duplicate menu and use some sort of sticky position to apply these transforms on the original menu? Thank you!

 

See the Pen GRearMN by lukehatfield (@lukehatfield) on CodePen

[Rodrigo]

Hi @jklue and welcome to the GSAP Forums!

 

Thanks for being a GSAP Club member and supporting GSAP! 💚

 

I think this demo does what you're looking for:

See the Pen qBawMGb by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!