Streaming live at 10am (PST)

Animation Trigger on Tab and Scroll Into View


#1

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.

Any suggestions?


Here is my public share link: https://preview.webflow.com/preview/infima?utm_source=infima&preview=bad32c011b7ee3d8b7ed76d635188b33


#2

It should be working. If triggers are affcted to different elements (nest in another container if it helps.)

But definitely craft a new animation. That will end up with elements in the same state that the end of the other anims.

Your clients is kind of right, it would be could that it animates on scroll at first.

Site is still a bomb :slight_smile:


#3

@DesignByDre

Hey Andre. What you could do is set the active tab to none for the tabs you need this animation to work on.

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>

#4

This worked well! Thanks a ton. Question though, it looks like the first “Phishing” tab isn’t animating when scrolled to. It’s only fading in.


#5

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;