Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jonathan.a.katz

Syncing audio with Eases

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;
}
}});
  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×