CounterUp JS cancelling the Tabs Hover JS - I'll pay :)

Community resources Webflow Tips
1

Can anyone help, please - it would be much appreciated?

On the Tabs widget, I wanted the tabs to change on hover. I have successfully done this using the usual javascript (I have displayed the JS on the shared link))

I also have a counterUp Javascript used to animate numbers counting up from 0 to the desired amount i.e 0-100 (I have displayed this JS the shared link)

When I add this javascript for the counter, it cancels out the Tab Hover javascript. The only way around this is to have the two separate javascript on different pages. However, I need to have both the Tabs Hover javascript and the counterUp javascript on the same page.

Would anyone care to offer any creative solutions?

I have assumed there is a simple workaround, but as I am not the best coder, I am reaching out to the very clever people on here.

I will also be happy to pay you with a virtual coffee.

Please be my guiding light.
Best wishes

https://map-test-0677c2.webflow.io/

Shared link
https://preview.webflow.com/preview/map-test-0677c2?utm_medium=preview_link&utm_source=designer&utm_content=map-test-0677c2&preview=e47efbb6fc7fe08f3e43ee58cc6f14a3&workflow=preview

2

Hi @BUMPandHUSTLE,

Try using CounterUp2 - paste all this into Page Settings > Custom Code > Footer Code:

<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"></script>
<script>
const counterUp = window.counterUp.default
const el = document.querySelector( '.counter' )

// Start counting, typically you need to call this when the 
// element becomes visible, or whenever you like.
counterUp( el, {
    duration: 1000,
    delay: 10,
} )
$('.counter').addClass('animated fadeInDownBig');
</script>

<script>
$('.tab-link').hover(
  function() {
    $( this ).click();
  }
);
</script>

You’ll just need to add a text element with class ‘counter’ - test by adding a <p> with text “1000000”

Let me know how you go!

3

@mww Thanks for the reply.

You nearly got there. I added the new counterup 2 but it only animates one text-block with the CSS ‘counter’. The other text-blocks that also have the CSS ‘counter’ do not animate BUT it does keep the hover-over tabs map working.

I just need to work out why the other text-blocks with ‘counter’ on the CSS do not animate even though they have ‘counter’ as their CSS property.

Any ideas?

4

Hi @BUMPandHUSTLE,

Try this out, should work on each tab:

<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script>

$('.tab-link').hover(  function() {    
$( this ).click();  
	
	jQuery(function ($) {
    	"use strict";
    
    	var counterUp = window.counterUp["default"]; 
    
    	var $counters = $(".counter");
    
		$counters.each(function (ignore, counter) {
			var waypoint = new Waypoint( {
				element: $(this),
				handler: function() { 
					counterUp(counter, {
						duration: 5000,
						delay: 16
					}); 
					this.destroy();
				},
				offset: 'bottom-in-view',
			} );
		});

	});
 });
</script>

Let me know how it goes - if it’s not working, please send read-only and published link for troubleshooting.

1 Like
5

@mww,

Thank you for getting involved in this. You are nearly there :slight_smile:

There are a couple of glitches:

  • Numbers should animate on load - once only
  • Tabs on hover should not make the numbers above animate

I am happy to pay you for the solution to this.

Here is the read-only
Shared link

Preview
https://test-map-100.webflow.io/

6

@BUMPandHUSTLE I got @mww first code block to work by changing querySelector(‘.counter’) to querySelectorAll(‘.counter’) and then running a forEach loop. Here’s a video of me working through to a working a solution: Webflow Forums - JS CountUp - BUMPandHUSTLE - YouTube

And here’s the code you can drop into the before page settings in Webflow.

<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"></script>
<script>
const counterUp = window.counterUp.default
const elements = document.querySelectorAll( '.counter' )

// Start counting, typically you need to call this when the 
// element becomes visible, or whenever you like.
elements.forEach((el) => {
        counterUp( el, {
    duration: 1000,
    delay: 10,
} )
})

$('.counter').addClass('animated fadeInDownBig');
</script>

<script>
$('.tab-link').hover(
  function() {
    $( this ).click();
  }
);
</script>
7

@learyjk @mww

That’s the baby. Fully working (not sure how to mark it as the solution).

Hey guys, you both helped me immensely. @mww you were so nearly there but honestly, you built 99% of it for @learyjk who tied the knots - the video you did was beyond the call of duty. Both of you thank you! If you drop me a pm and tell me the best way to buy you a virtual coffee I will do so - post haste.

1 Like