On the homepage, I have tabs with an animation contained in each. Each animation is triggered when the tab is set to active using the “Tab” trigger. My client would like the animation in the tab to also animate initially when “Scrolled Into View.” Is there a way to give the animation two different triggers without conflicting with one another?
I tried adding a second trigger, but conflicts with the active tab trigger and doesn’t load correctly.
Then using a little code (put at the footer section code of your page), we can detect when we hit the middle of that section and then trigger a click on the first tab which sequentially triggers the animation;
<script>
$(window).on('scroll', function () {
$('.desktop-tabs').each(function () {
var objTop = $(this).position().top + ($(this).outerHeight() * 0.75),
winBottom = $(window).scrollTop() + $(window).height();
if ($(this).hasClass("element-run")) {
// do nothing, function already run
} else if (winBottom > objTop) {
$(this).addClass("element-run");
$(this).find('.w-tab-link').eq(0).trigger('click')
}
});
});
</script>
Perhaps there is a scroll interaction that is conflicting with the custom in the first tab link on second set of tabs because if you change eq(0) to eq(1) , ideally trigger the click on the second tab instead of the first, it works fine. See video below;
