Jump to content


Syncing audio with Eases

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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() {
                        // this is where I want the sound to play, but in a loop at a decele                        // rated rate.

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

  • Solution

Hi jonathan.a.katz  :)


pls try like this : 

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

P = Math.round(myDiv._gsTransform.x/100); // change 100 to your desired ratio
  console.log('fire!'); // do whatever you want here 
  • 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.