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>

What I'd like to do is have the last tween start at the same time as the trigger element fires the animation and the duration overlaps the entire timeline from start to finish. In my code, .to(".opening-element-2 > .oe-bg-img") is the one I'm trying to achieve this with. I can't get it to work without extending the length of the TImeLine and/or starts/stops early. var controller2 = new ScrollMagic.Controller(); var openingelement2 = new ScrollMagic.Scene({ triggerElement: ".opening-element-2", triggerHook: "onLeave", duration: "300%" }) .setPin(".opening-element-2", {pushFollowers: false}) .addIndicators() .addTo(controller2); var oe2a = $(".oe-2-arrow"); var ytm =$(".yellow-triumph-mask") var oe2Amination = new TimelineMax(); oe2Amination .to(".frame", 100, {autoAlpha: 1, ease: Power4.easeInOut}, -100) .to(".oe-2-slash", 100, {height: 88, x: 220, y: -44, ease: Power4.easeInOut}, '-=100') .to("p.oe-2-text > span:nth-child(1)", 100, {autoAlpha: 1, ease: Power4.easeInOut}, '-=100') .to("p.oe-2-text > span:nth-child(2)", 100, {autoAlpha: 1, ease: Power4.easeInOut}, '-=90') .to("p.oe-2-text > span:nth-child(3)", 100, {autoAlpha: 1, ease: Power4.easeInOut}, '-=90') .to("p.oe-2-text > span:nth-child(4)", 100, {autoAlpha: 1, ease: Power4.easeInOut}, '-=90') .to(oe2a, 100, {autoAlpha: 1, y: 21, ease: Power4.easeInOut}, '-=90') .fromTo("img.line-globe", 100, {rotation: -33, scale: 0}, {rotation: 0, scale: 1, ease: Power4.easeInOut}, '-=70') .to(ytm, 100, {right: 0, ease: Power4.easeInOut}, '-=70') .to("p.yellow-triumph", 1, {autoAlpha: 1, ease: Power4.easeInOut}) .to(ytm, 200, {left: "100%", ease: Power4.easeInOut}) .to("#trumph-square", 100, {rotation: -45, scale: 1, ease: Power4.easeInOut}, '-=70') .to(oe2a, 50, {bottom: 13, ease:Power2.easeOut}) .to(oe2a, 25, {bottom: 0, ease:Bounce.easeOut}) .to(oe2a, 50, {bottom: 8, ease:Power2.easeOut}) .to(oe2a, 25, {bottom: 0, ease:Bounce.easeOut}) .to(".opening-element-2 > .oe-bg-img", 2400, {y: 4, x: 4, scale: 1.02, ease: Power4.easeInOut}, '-=2000') var openingelement2Animation = new ScrollMagic.Scene({ triggerElement: ".opening-element-2", triggerHook: "onLeave", offset: "0", duration: "150%" }) .setTween(oe2Amination) .addIndicators() .addTo(controller2);

I'm very new to GSAP and ScrollMagic and very eager to learn as much as possible on my own. But I'm struggling to grasp all the options and abilities while rushing to meet a project deadline! I appreciate the help! What I'm trying to do is have four opening elements panel (or stack) until the last has been shown for the same duration as the others. Then as it's unpinned, the page content pushes it up and scrolls normally. I need a duration of at least 200% because I plan on having timelines in each panel animate elements during that duration. What I have now doesn't pin the last of the four elements and because of the absolute positioning, there is a 300% gap between the 4th element and the content. There may be a much better way than I'm trying here. In fact, I'm positive there has to be a better way.