Counter with values from ACF Fields

[Heimes57]

I'm trying to build out a WordPress theme where there is an ACG repeater with nested groups. I want the back-end user to be able to enter an ending value and a label. I then want the numbers to count up from a preset value and end on the value pulled from the ACF number field. 

 

This is my feeble but logical attempt (to me).  When the loop runs, the number in the first row goes from 100 to the ending value of the last row. All other numbers don't change. 

 

This is my code:

<?php if( have_rows('counters') ):?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>

	<div id="counter-wrap">
		<?php while ( have_rows('counters') ) : the_row();?>	
			<?php if( have_rows('single_counter') ):?>
				<?php while ( have_rows('single_counter') ) : the_row();?>	
					<div class="single_counter">							
						<div class="single-number"><?php the_sub_field('starting_number');?></div>
					</div>
					<?php the_sub_field('label');?>
					<script>
						jQuery( document ).ready(function($) {
							jQuery('.single_counter').each(function() {
								var Cont={val:'<?php the_sub_field('starting_number');?>'} , NewVal = '<?php the_sub_field('ending_number');?>' ;
								
								TweenMax.to(Cont,3,{val:NewVal,roundProps:"val",onUpdate:function(){
								  $(".single_counter > .single-number")[0].innerHTML=Cont.val
								}});
							});
						});
					</script>									
				<?php endwhile;?>
			<?php endif;?>				
		<?php endwhile;?>
	</div>
<?php endif;?>	

 

And this is what is output: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>

	<div id="counter-wrap">
					
		<div class="single_counter">							
			<div class="single-number">100</div>
		</div>
		Likes and comments on instagram alone							
        <script>
    		jQuery( document ).ready(function($) {
        		jQuery('.single_counter').each(function() {
            		var Cont={val:'100'} , NewVal = '300' ;

            		TweenMax.to(Cont,3,{val:NewVal,roundProps:"val",onUpdate:function(){
              			$(".single_counter > .single-number")[0].innerHTML=Cont.val
            		}});
        		});
    		});
		</script>									

        <div class="single_counter">							
            <div class="single-number">0</div>
        </div>
		Press Coverage Impressions							
          <script>
    		jQuery( document ).ready(function($) {
        		jQuery('.single_counter').each(function() {
            		var Cont={val:'0'} , NewVal = '9' ;

            		TweenMax.to(Cont,3,{val:NewVal,roundProps:"val",onUpdate:function(){
              			$(".single_counter > .single-number")[0].innerHTML=Cont.val
            		}});
        		});
    		});
			</script>									

          <div class="single_counter">							
              <div class="single-number">0</div>
          </div>
			Attendees
              <script>
    			jQuery( document ).ready(function($) {
        			jQuery('.single_counter').each(function() {
            			var Cont={val:'0'} , NewVal = '4.5' ;

                    TweenMax.to(Cont,3,{val:NewVal,roundProps:"val",onUpdate:function(){
                      $(".single_counter > .single-number")[0].innerHTML=Cont.val
                    }});
                  });
              });
			</script>									

          <div class="single_counter">							
              <div class="single-number">1000000</div>
          </div>
			Beers Distributed During Events
              <script>
                  jQuery( document ).ready(function($) {
                      jQuery('.single_counter').each(function() {
                          var Cont={val:'1000000'} , NewVal = '1389283' ;

                          TweenMax.to(Cont,3,{val:NewVal,roundProps:"val",onUpdate:function(){
                            $(".single_counter > .single-number")[0].innerHTML=Cont.val
                          }});
                      });
                  });
              </script>									

</div>

 

[Sahil]

Here are couple of threads about counting numbers using GSAP,

 

 

 

[Visual-Q]

I suggest you take this to a Worpress forum. If i'm understanding your request this is a question about passing values from Wordpress to javascript.

 

 

However, a variation of what you are doing might work, but you'll want to output the script once in the footer not on every ACF repeater field, and with ACF output the desired values as a data attribute on single-number elements such as:  

 

<div class="single-number" data = "<?php the_sub_field('ending_number');?>"><?php the_sub_field('starting_number');?></div>  

 

not sure about syntax (escaping quotes and such) above but it's approximately what you need to output

 

<div class="single-number" data= "end-value ">100</div>

 

then retrieve end values in your each loop for the counter.