Syncing audio with Eases

[jonathan.a.katz]

I am trying to sync a short audio clip to fire at every 180px as a div scrolls horizontally.  If this animation were linear, it would be easy...but I am using Power4.easeOut and I am not sure how to synchronize the audio clip with the rate of deceleration in the tween. Any help on this issue would be much appreciated!

Essentially, I want the audio clip to fire every time one of those blue squares passes the green line in the middle (view codepen).

	$(document).ready(function() {
		// Animation Variables
		var target = $('.animation--scroll');
		var animTime = 3;
		var random = Math.random() * 170;
		var rewardItem = $('.rewardItem-container');

                // Audio Variables
		var scrollSound = new Audio('/img/animations/8bit_coin.wav');
		
                // Animation Functions
		var tween = function(index) {
			TweenMax.to(target, animTime, {
				ease: Power4.easeOut,
  			x: (index * -180) + 90 - random
  		    });
		};

		$('.toggle-animation').click(function() {
			tween(5);
			
                        // this is where I want the sound to play, but in a loop at a decele                        // rated rate.
			scrollSound.play();
		});
        });

See the Pen mejOxQ by anon (@anon) on CodePen

[jonathan.a.katz]

Also, I would like the audio loop to pause when the browser tab is not active...just like the animation.  And the animation only needs to run once.

[Diaco]

Hi jonathan.a.katz 

 

pls try like this : 

var myDiv = document.querySelector('#myDiv'),OP=0;

TweenMax.to(myDiv,1,{x:500,onUpdate:function(){
P = Math.round(myDiv._gsTransform.x/100); // change 100 to your desired ratio
if(OP!=P){
  console.log('fire!'); // do whatever you want here 
  OP=P;
}
}});

[jonathan.a.katz]

Thanks Diaco, that did the trick