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>