GSAP Scrollsmoother Scrolltrigger Element Expand

[epicsupreme]

Hi,

 

I'm trying to create something like the expanding/collapsing scrolling found here on the projects: https://k72.ca/en/work

 

I want to set each box to a height of 0 then expand each box on scroll, staggering them, while they stay at the bottom of the window. 

 

I've gotten close with it, but I can't seem to get the timing right with the stagger and scrub values to make it consistent. You can see in the codepen I'm creating a timeline that is managed by the scrolltrigger, and i've almost got the desired effect, but the boxes aren't expanding fast enough to stay at the bottom. Any help in the right direction would be much appreciated.

 

Thanks!

See the Pen GRYjdgE by epicsupreme (@epicsupreme) on CodePen

[mvaneijgen]

Hi @epicsupreme welcome to the forum and being a Club Greensock member 💚

 

I've tweaked your pen a bit and add the padding to an empty element and with this I could make the start trigger to be the top of the element at the bottom of the screen, it didn't look like the effect so I've add some images to the sections, so it better shows the effect. I've also made the duration 1 second and the stagger the same amount and I've set the scrub to true instead of 1.5. This comes a lot closer to the effect you're after, right? Hope it helps and happy tweening! 

 

See the Pen wvYzXGb by mvaneijgen (@mvaneijgen) on CodePen

 

Oh and I've changed the .fromTo tween to a .from tween. I like to keep my tweens simple and you almost never need a .fromTo tween, because your element is usually already at it's end position or at it's start position, so then a .form or .to is all you need

[epicsupreme]

@mvaneijgen Thanks so much for your response! This is close and I've gotten somewhere like this before, but what I can't figure out in the example is how to get the multiple rows to stay at the bottom of the screen while growing exponentially, as well as having the scrub: 1.5 to get the smooth scrub effect. I've taken your example and applied a shorter stagger and the scrub and you can see how it's so close but it pulls the boxes container too high on scroll instead of keeping it at the bottom.

 

See the Pen 6b8ac0b6a94f298d3dd227e26c8e5e73 by epicsupreme (@epicsupreme) on CodePen

 

 

[Rodrigo]

Hi,

 

The issue is in this value of scrub you're using here:

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".boxes",
    start: `top bottom`,
    end: "bottom bottom",
    scrub: 1.5,
    // scrub: true,
  }
});

That in combination with your ScrollSmoother configuration means that both ScrollSmoother and ScrollTrigger are adding a time that takes for the instances to catch up with the scroll position. In this case 3 seconds. Simply set that value to true or just add something small, less than 0.5 seconds and it should be closer to Mitchel's example.

 

Hopefully this helps.

Happy Tweening!

[mvaneijgen]

I think the original demo you've provided does not set the height of the sections to 0, but something like 75px, seems to more like the effect

 

What @Rodrigo said is true and I don't see any difference in animation when both SmoothScroll and ScrollTrigger are adding 1.5 it just takes longer to catch up and is causing the offset issue, so I would leave one of the two to set the delay and not both. 

 

I can't find a better way of animating this, maybe there is a way with math to get the perfect values. Hope it helps and happy tweening! 

 

See the Pen dygOYgy by mvaneijgen (@mvaneijgen) on CodePen

[epicsupreme]

@mvaneijgen this is really close! The example doesn't start from zero but ideally I could start it from any height and it should work.

 

Your example here has given me an idea that I think will work, so thanks for that! if it does work I'll be sure to post it here.

 

Thanks to you and @Rodrigo  for the help!

[epicsupreme]

@mvaneijgen So i got the results i wanted, i used a flex box with columns and justify-content: end along with pinning the container. It works pretty well, but now I have another issue that I cannot figure out at all. I would like to click a button and have the content rest at the top of the window, but when i do it with smoother.scrollTo() it doesn't bring it up to the top, it seems kinda random when you press the button. Any ideas?

 

See the Pen 8c64f13ba8cedf0360ab894a52ff59ed by epicsupreme (@epicsupreme) on CodePen

[Rodrigo]

Hi,

 

There is a third parameter in the scrollTo() method for the position of the element:

position: String
You can optionally define a position in a space-delimited form, like "center center" or "top 100px" where the first value relates to the target element, and the second value relates to the viewport. So "top 100px" means where the top of the target element hits 100px down from the top of the viewport."

https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo()

 

So probably you're looking for this:

goButton.addEventListener("click", () => {
  smoother.scrollTo(".boxes", true, "top top")
})

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Yeah, I don't think that'll work. You've got an extremely unusual and complicated setup where you're dynamically animating the height of that element based on the scroll position AND you've got it nested inside of a pinned container. To accomplish what you're asking, you'll need some pretty customized code. It's beyond what we can provide for free here in these forums. Feel free to reach out to us directly if you'd like to explore paid consulting services and schedule some of our time.