ScrollTrigger shrink Scroller height while Trigger scrolls up with the bottom of Scroller

[treadway]

Sorry to jump in here once again, but I need some help before I am bald.

I am using ScrollTrigger trying to create what essentially would be a sort of fixed header that the Trigger content rolls up into (I also want to add some inertia fun later). So I am trying to shrink the height of the content Scroller container as the Trigger content scrolls up showing the bottom of the Trigger content at the bottom of the Scroller container when it comes into view.
I have tried many different methods but none seem to get it right. Any thoughts or ideas would be of great help (you guys always seem to come dropping science when in need, thanks) ... (Also while my nose is brown, ScrollTrigger is absolutely DOPE, thank you! (once again))

 

Codepen might be easier to visually understand ay 0.5x or on Codepen.

 

Thanks!

—Treadway

See the Pen MWJZwVe by Treadway (@Treadway) on CodePen

[GreenSock]

Howdy, @treadway. Thanks for the kind words. 

 

I read your question 3 times and I'm still totally lost, sorry. I don't understand your question. 

[treadway]

Currently, as you scroll the "Scroller" (container here with a white rounded border) the bottom moves up from what would be out of view to stop once it is in view (plus padding)
Then the "Trigger" (div with all the repeating language buttons) scrolls down where it finishes when you reach the end.

I am trying to get the "Trigger" to scroll up like normal, and the "Scroller" bottom to follow the bottom of the "Trigger" up. Ending in a nice little white rounded border rectangle in the view having scrolled the "Trigger" simultaneously.

[GreenSock]

I think I've now read your latest post 5 times, and I'm still scratching my head. Sorry, it's probably due to sleep deprivation. Maybe someone else understands and can help you. I see two scrollbars in that area which seems like very weird UX. Did you intend that? 

 

Maybe a solution is to do a "fake scroll" where you're simply animating the "y" property with a tween that's linked to the outer scrollbar (eliminate the inner one). Just an idea. Might be useless given the fact that I don't understand the goal or why you'd want two nested scrollers.  

[treadway]

Yeah the secondary scroll bar was just a miss, sorry this is a hacky rip out of my full code. Yeah, I am really sleep deprived also.

 

So yes all I am tryin to do is shrink my container (scroller) as I scroll. I would also like the internal content ("trigger") to not just sit still verticalls but move with the shrinking container. So you are still scrolling through the content. 

Yes a simple y tween seems like it would work (the first way I tried to do this, see code below) but it does not work as expected. 

 

I keeping hoping to rubber duck myself here, but no luck... 

I updated the codepen with the y tween (I am not sure how to see errors there). You can see the markers here and it works closely to the desired point. I could use this but I would like the scrolling to stop when the end marker get to the scroller-end marker.

 

scrolling with resize code

let tl1 = gsap.timeline();
tl1.pause();

tl1.to("#page-" + newPageNumber + " .question-container", {
	height: scrollHeight, 
}, "scrollLabel");

tl1.to("#page-" + newPageNumber + " .choices-container", {
	y: -scrollAmount, 
}, "scrollLabel");

this.scrollAni = ScrollTrigger.create({
	animation: tl1,
	trigger: "#page-" + newPageNumber + " .choices-container",
	scroller: "#page-" + newPageNumber + " .question-container",
	scrub: true,
	pin: true,
	markers: true,
	start: "top top",
	end: "bottom " + scrollHeight +"px",
});

error

zone-evergreen.js:171 Uncaught TypeError: Cannot read property 'splice' of undefined
    at ScrollTrigger.self.refresh (ScrollTrigger.js:1131)
    at Tween.<anonymous> (ScrollTrigger.js:1313)
    at _callback (gsap-core.js:939)
    at _renderZeroDurationTween (gsap-core.js:509)
    at Tween.render (gsap-core.js:3073)
    at Timeline.render (gsap-core.js:2133)
    at _lazySafeRender (gsap-core.js:192)
    at Array.updateRoot (gsap-core.js:2564)
    at _tick (gsap-core.js:1252)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)

 

[GreenSock]

That error kinda sounds like you forgot to register the plugin: 

gsap.registerPlugin(ScrollTrigger);

If I understand you correctly now, I think the problem is that when you animate "y" upward, it's actually making the container scrollbar longer because there's now more to scroll. I'd try nesting it in another container <div> that has overflow: hidden so that when you animate the "y" of its content upward, it doesn't have any effect on the outer container's scrollable area. See what I mean? 

[treadway]

Yeah that makes sense, I tested a solution like this and was seeing the same issue. Perhaps I made a mistake, I have been racking the hours. I will try again fresh.

Thanks Jack! Sorry for the confusion.

[treadway]

Hey jack got it basically working!  ..unpinned the scroller and manipulated a different element remove the weirdness.  So yeah, trying to alter the the "scroller" and / or the "trigger" seems to be a bad thing. Nesting things that you want to manipulate further down is best.

Also just an FYI that "splice" error (shown above) was real whenever you are trying to tween the trigger element (from what I have seen).

 

As always thanks so much for the help and the dope framework that has kept me making smooth flowing interactive pieces for, I believe, over a decade.

[GreenSock]

23 minutes ago, treadway said:

Also just an FYI that "splice" error (shown above) was real whenever you are trying to tween the trigger element (from what I have seen).

Hm, something seems off there. Can you elaborate? Are you saying that if you animate any property of the element that's the trigger, you get a splice() error? If so, can you provide a minimal demo? Sounds super weird to me. 

 

24 minutes ago, treadway said:

As always thanks so much for the help and the dope framework that has kept me making smooth flowing interactive pieces for, I believe, over a decade.

🙌

 

Glad you got things working!

[treadway]

Hey Jack, sorry for the delay I had a deliverable today and was slammed till.

So, yeah. the bug was mine and was just tracking back though GSAP where the call originated in an onComplete.

Derrr. It all worked out in the end.

 

Thanks for your help! ...always.

 

—Chris