Scrolltrigger elements triggering wrong with max-height

[Pieter Biesemans]

So I have this situation where I have a grid with elements. The elements are animated when they enter the viewport with a simple fade in. This works like a charm.

 

Now, on user interaction (click of a button) I need to show something (a map) next to the grid, and the grid needs to have a max-height set on it. Of course, now the fade-in animations are all wrong, because we're no longer scrolling the body element.

 

I understand why this is happening. But I can't seem to figure out a good way to solve this issue.

• Refresh isn't the tool for this job.
• I've thought about just disabling ST when enabling the max-height. But that doesn't seem to put the scroll elements back into their original state (before gsap.set).
• I've tried using gsap.set to set the elements to full opacity, but then the items don't animate properly when unsetting the max-height. Also, the real world code is more abstract, and the attached animation could be more than just opacity.
• I've thought about making the parent element (.grid) the ST parent, but that's not an option I think.

 

Am I missing something obvious here? Or is there a way to get around this issue?

 

Worst case, I could just leave off the enter animations on the elements, but I' rather not.

See the Pen GRwaaVb by pieter-biesemans (@pieter-biesemans) on CodePen

[Cassie]

Heya Pieter how are you doing! ☺️

You can set a scroller - so maybe something like this?

See the Pen WNYBVGJ?editors=1010 by GreenSock (@GreenSock) on CodePen

Setting everything up again on click, using context to revert the animations so everything's kept nice and tidy.

 

 

[Pieter Biesemans]

Hey Cassie

 

Thanks for your swift response, per usual. I'm doing great, thanks for asking.

As I said, the actual code is a lot more abstract, since the fade-in animations are set in a completely different script, which is loaded on page load. The animations are set through data-attributes on the elements. Much like a scroll animations library like Animate On Scroll.

I can't just overwrite or reset the animations, since I don't really know what the animations _are_.

 

I'll have to experiment, and see if I can work the swopScroller function into the animations library.
I'll report back.

[Cassie]

Quote

I can't just overwrite or reset the animations, since I don't really know what the animations _are_.

Sounds like a whole different issue there really! 

 

But never say never. Creating a context is nice and tidy, but you can just grab any tweens associated with those elements. Lots of ways to approach this. Same concept though, find the tweens, revert the tweens, set it up again with a different scroller.

let tweens = gsap.getTweensOf(".el");
console.log(tweens)
    
tweens.forEach((tween) => {
 tween.revert();
})

 

[Pieter Biesemans]

Quote

 

Sounds like a whole different issue there really! 

 

Yes. The downside of a reduced test case: reality is oftentimes infinitely more complex. Actually I'm also using ScrollTrigger to lazy load images inside of the elements. So the real world code is even more complex 😀

 

For context, this is the code I'm using for the Animate On Scroll animations: https://gist.github.com/pieter-biesemans/bdd437d02e722d2c3bc8de61371bf85e

 

Downside of using revert() is that it doesn't undo the gsap.set() properties.

For now I'm just going with killing the tweens and removing the style attribute.

 

$('.el').each((i,el) => {
    gsap.killTweensOf(el);
    $(el).removeAttr('style');
});

 

[Cassie]

Glad you found a route around!

In terms of that library, I noticed you're using a static matchMedia check. just a note that If someone changes their preference it won't update. That's a perk of gsap.matchMedia, it'll update the animations if someone tweaks their preferences - (added benefit of being able to call revert too.)

See the Pen jOQjLRd?editors=1011 by GreenSock (@GreenSock) on CodePen

 

Quote

Downside of using revert() is that it doesn't undo the gsap.set() properties.

Also for clarity purposes - revert definitely does undo properties changes by gsap.set, but because the tweens were just grabbed and not stored in a context (which does a bunch of clever stuff for you) and you're reverting manually, you'd have to make sure to revert the first tweens last (I think)? This seems to work.

See the Pen oNQrGvW?editors=1011 by GreenSock (@GreenSock) on CodePen

[Pieter Biesemans]

Quote

 just a note that If someone changes their preference it won't update.

 

Yeah, I know. I've opted to use a static because users almost never change their preference while browsing a page. As soon as they reload or navigate, the preference is respected. But your method does seem powerful, thanks for that.

 

 

Quote

because the tweens were just grabbed and not stored in a context (which does a bunch of clever stuff for you) and you're reverting manually, you'd have to make sure to revert the first tweens last (I think)? This seems to work.

 

Oh, yes, that makes sense thinking about it. Definitely will have to look into contexts for future reference.

 

---

 

And actually, I found a different solution altogether, that doesn't require setting a max-height at all. 😆

I gave the map a position: sticky, so it stays next to the grid while scrolling. This keeps the natural scroll, and so there's no need for anything fancy (just a good old ScrollTrigger.refresh()). This isn't how the designer designed it, but the client is happy just the same.

 

But I learned a lot from you, as usual, so the exercise definitely hasn't been pointless.

 

 

[Cassie]

Quote

But I learned a lot from you, as usual, so the exercise definitely hasn't been pointless.

Hooray! Job done 🙌