DouggieO

You can't see me, but you should know I just stood up and clapped. This is perfect, I was hoping there would be a rock solid solution like this. Thank you!

Just when I think I have ScrollTrigger mastered... I'm trying to apply a parallax effect to a section (of unpredictable height) that also gets pinned. Thus, I need the parallax tween to pause while the section is pinned. My approach is 3 ScrollTriggers: 1.) for the pin, 2.) for the parallax tween before the pin, and 3.) for the parallax tween after the pin. The problem I'm running into is with ScrollTrigger 3—how can I calculate the start position? I came up with a solution in this codepen, adding .5% to the pin ScrollTrigger's start position. But I'm honestly not quite sure why it's working, or how brittle it is. Is there a better approach to this problem? https://codepen.io/doug-osborne/pen/GRzEvXZ

Unfortunately we are a bit handcuffed there... we are on a multipage modular CMS which lets our marketing team build the pages with our modules. We tried to find a way to architect everything into 1 app, and we may still get there, but for now there were too many edge cases where modules could not be done in react so each module has its own root/app so they can be inserted into the dom interchangeably. Make sense? If you have any ideas on how to use the context api across multiple apps, please let me know. I think redux could work for this, but I was hoping to not have to introduce that for the minimal things we’d need it for. I’m also wondering if I can just create a global object in plain js that I can use as a simple global state, and write a hook that listens for changes to it.

@AnimatiCSS When you say "global context" do you mean the React Context API? I didn't think it was possible to use that across multiple apps/roots? How else could we do that?

Thank you both, this is extremely helpful. I've taken this info back to the team and we're figuring out how to best execute this. Much appreciated!

Thanks for the insight! The only problem is we have a fairly large site with many components, several developers, and an infinite combination of modules on any given page. A developer down the road could introduce some kind of expanding component and inadvertently break the ScrollTrigger modules on any page that ends up on. Therefore we would need to establish a "special rule" for components that might change the position of other components. If this the only way, that's fine, but the more special rules we have the harder our site is to maintain. So my goal here is to minimize special rules—it would be more ideal if our ScrollTrigger modules could resolve themselves, no matter what else is on the page—expanding components, tabs, drawers, etc. If listening for changes to the client rect is non-performant, do you have any other ideas how to refresh the triggers within the ScrollTrigger module itself?

It does! It’s great to know that .refresh() is the command for the job. However, in the spirit of modularity, I was hoping the solution could be something implemented in the horizontal scroll component itself, since that’s the component that needs to get refreshed (esp in my case since there isn’t a great way to communicate directly between modules). Is there a good way for the Horizontal scroll module to listen for a change in its trigger element and .refresh() itself? A thought that crossed my mind is some sort of event listener (or react hook) that listens for changes to getBoundingClientRect() values of the trigger. Is there more of a “Greensock way” to do something like that?

Hi there! We just completed a major site redesign featuring ScrollTrigger in several modules. It's been awesome, thanks to all involved in making this happen! One issue that came up is illustrated in the Codepen. We have a few modules that "expand" with interaction, like the green Module 2. The horizontal scroll module works great, but if the module above is expanded, it throws off the start/end positions of the trigger. My initial solution was to add a resizeObserver on the height of the body, that would trigger a window.resize event. This was effective in conjunction with MatchMedia, but it's global and is interrupting other animations that are happening on-screen while the body size is changing. What's the best (and more "componentized" ) way to recalculate the trigger when its position changes like that? Note: I don't think it's necessarily relevant, but we are using React in a sort of unique set up... we are working within a modular CMS, so each module is its own React app, similar to how the Codepen is set up. Much thanks!