Scroll trigger inside pinned section breaking on window resize

[Nitro]

Hi I'm quite new to GSAP and having an issue I can't figure out. I have full width section that pins when it gets to the top of the window, then inside that section I have scrolltrigger which toggles the class on some tab sections to open them as you scroll.

This works well until the browser is resized, then the markers for the tabs jump to the top of the page and therefore aren't being triggered any more.

 

You can see it on the lower green section of my dev site https://avidd2024.dev.avidd-design.co.uk

 

if (window.innerWidth > 640) {
  // Pin the tabs container when a tab title is active
  const tabsContainer = document.getElementById("pintrigger");
  gsap.to(tabsContainer, {
    scrollTrigger: {
      trigger: tabsContainer,
      start: 'top 0', // When to start pinning at the top of the screen
      end: '+=1000', // Unpin after scrolling 1000px past the start
      pin: true, // Pin the element
      pinSpacing: true, // Maintain the pinned element's position
       invalidateOnRefresh: true
    }
  });
}

// Loop through each tab title and define ScrollTrigger
const tabTitles = document.querySelectorAll(".vertical .tabs-title");
tabTitles.forEach((tabTitle, index) => {
  gsap.to(tabTitle, {
    scrollTrigger: {
      trigger: tabTitle,
      start: "top top", // Start when top of tab title reaches top of screen
      end: "bottom top", // End when bottom of tab title reaches top of screen
      scrub: true,
       invalidateOnRefresh: true,
      toggleClass: {
        targets: tabTitle,
        className: "is-active"
      },
      onToggle: (self) => {
        const panelId = tabTitle.querySelector('a').getAttribute('href');
        const panel = document.querySelector(panelId);
      
      }
    }
  });
});

<section class="primary-color full-width" >
    <div class="block-tab-container" id="pintrigger"> 
      
     <?php if (have_rows('repeater_content_tab')) {
		$counter = 0; ?>
		<ul class="tabs vertical" data-responsive-accordion-tabs="small-accordion medium-tabs" data-multi-expand="true" id="<?php echo esc_attr($id); ?>">
			<?php while (have_rows('repeater_content_tab')) { the_row(); 
			$tab_heading = get_sub_field('tab_heading');
			$counter++;
			?>
			<li class="tabs-title">
				<a href="#tab<?php echo $counter?>-<?php echo esc_attr($id); ?>" aria-selected="true">
				<div class="tabs-title-container">
					<div class="text"><?php echo $tab_heading ?></div>
				</div>
				</a>
			</li>
		<?php } ?>
		</ul>
	<?php $counter = 0; ?>
	</div>
	<div class="tabs-content secondary vertical" data-tabs-content="<?php echo esc_attr($id); ?>">
	<?php while (have_rows('repeater_content_tab')) { the_row();
		$tab_content = get_sub_field('tab_content');
		$counter++; ?>
			<div class="tabs-panel" id="tab<?php echo $counter?>-<?php echo esc_attr($id); ?>">
				<?php echo $tab_content ?>
			</div>
	<?php } ?>
	</div>
<?php } ?>	
		
	</div>
</section>

 

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Nitro]

Here is a basic codepen showing the issue (you'll need to go though to the codepen site to change the browser window to make it break)

 

See the Pen zYQYZMB by nitrokev (@nitrokev) on CodePen

[Rodrigo]

Hi,

 

Sorry but I really don't understand what the issue is here exactly. I tested your demo and tried different screen sizes and everything is working as it should. The only advice I would offer is to not make the body tag a flex container.

 

Also I would advice you to create the ScrollTrigger that is pinning the container after creating the ScrollTriggers of the tabs, since those are not pinned they don't affect the start/end position of the pinned one, but the pinned one does have an impact because of the pin space is created.

 

I'm not sure if you're looking for something like this:

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

 

Hopefully this helps.

Happy Tweening!

[Nitro]

Hi thanks for the reply,

To see my version break you need to scroll down until it is pinned and triggering one of the tabs, then change the vertical size of the browser window, then the markers jump for the pinned section to the top.

 

Having said that, the version you have provided seems to fix the issue anyway, so thank you for providing it.