jonathan.a.katz

Thank you Carl! This is a great solution. Much appreciated.

I'm trying to animate an image swap when hovering on different elements in the page. I already know I'm on the wrong track given how much code I've written to accomplish this. There must be a simpler solution (and this one doesn't even work, so there's that too). The codepen demonstrates what I have already and the effect I'm trying to achieve. Any help on a better/working solution would be greatly appreciated!

Thanks Diaco, that did the trick

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.

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(); }); });