bg-scro

Thanks much!! @Jonny - Thanks for fixing my Javascript...still getting the hang of the language. @Jonathan - thank you for the very quick an detailed walkthrough. Here's my final solution: http://codepen.io/bg-scro/pen/BogoWK function init() { needleSpin.play(); } // Animation for compass needle on site hero var needle = document.getElementById("hero-compass-needle"); var needleSpin = new TimelineMax({delay: 1, repeat: -1, repeatDelay: 5}); var pointSouth = new TimelineMax({paused:true}); needleSpin .to(needle, 0, {rotation: 0}) .add("startFirstSpin") .to(needle, 2.0, {rotation: "+=1480", ease: Power4.easeIn}) // , ease: Back.easeOut.config(4) .to(needle, 1.0, {scale: 0.6, ease: Power2.easeIn}, "startFirstSpin+=1.0") .add("endFirstSpin") .to(needle, 1.0, {scale: 1}, "endFirstSpin") .to(needle, 1.75, {rotation: "+=1400", ease: Elastic.easeOut}, "endFirstSpin") ; // Stop and resume spinning needle animation on mouse event; point south pointSouth .add("startHover") .to(needle, 1.5, {rotation: "180_short", ease: Power4.easeOut}) .to(needle, 1.0, {scale: 1}, "startHover") ; needle.addEventListener('mouseover', pauseSpin); needle.addEventListener('mouseleave', resumeSpin); function pauseSpin() { console.log('pauseMe'); needleSpin.pause(); pointSouth.play(); } function resumeSpin() { pointSouth.pause(); needleSpin.play(); }

Having some trouble grokking how to get the timeline to stop when I hover over the animated element with the mouse. Essentially, what I want is for the animation to stop spinning and the arrow to point south (180-deg) when user moves the mouse over it. Here is the codepen: http://codepen.io/bg-scro/pen/gaNOOY Based on the discussion in another forum post here, I assumed that code like the following would work, but the element shows no sign of responding to mouse events. (Note that `needleSpin` is the animation that runs when the page loads - it works fine; the `pointSouth` animation is what I want to occur when the mouse rolls over the `needle` element). needle.onRollOver = function() { needleSpin.pause(); pointSouth.play(); }; Appreciate the help...

DOH! <face palm> That fixed it. THANKS!

Thanks for the quick response. Here is the live site hosted on Github Pages (site not finished, but you can see the behavior of the arrow): http://bg-scro.github.io/azimuth-blog/ To clarify some of the points asked/raised earlier: * The codepen isn't the issue. The arrow works perfectly on the Codepen * I'm loading the most recent version of GSAP with the script: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> If you watch the behavior of the error "in the wild" it seems to start moving clockwise toward 220 degrees, sort of bounces back at ~20 degrees, then moves CCW to ~340 degrees before settling back at 0 degrees. When I experimented with setting just the first move `"+=220_ccw"` it did the same thing, except it kept moving counterclockwise after the first bounce (off the 20 degree stop), and settling at 220 degrees. Ultimately I'm trying to animate the arrow so that it spins around a couple of times before settling at 0deg. But it's behaving unpredictably. The code on the deployed site matches the expected code, with the change to relative suggested by Jonathan for the first move: var needle = document.getElementById("hero-compass-needle"); var needleSpin = new TimelineMax({delay: 1, repeat: -1, repeatDelay: 4}); needleSpin.to(needle, 1, {rotation: "+=220_cw"}) .to(needle, 1, {rotation: "0_ccw"}); $(document).ready( function() { needleSpin.play(); }); Not clear how this might be a Jekyll issue? The javascript is loading correctly as far as I can tell, and should be executing in the browser, not on the server side..?

I'm mystified. Attempting to animate an arrow so that it rotates through various points on a circle. The codepen seems to work perfectly: the arrow rotates smoothly to the number of degrees set, then rotates back to 0. However, the behavior isn't working properly in Chrome browser. The arrow rotates approximately 30 degrees, seems to bounce back from that limit, rotates to negative 30 degrees (i.e. ~330), overshoots back to ~+10 deg, before returning to 0. On Safari the arrow rotates to about 60 degrees before returning to 0. Both browsers behaving very differently despite running the same script served from the same server. I'm running this with Jekyll on localhost. I have a GIF of the Chrome behavior here (file is too large to upload on this site). https://s3-us-west-2.amazonaws.com/miscellaneous-shares/chrome_gsap_animation.gif Appreciate any insights or hacks on why this is happening.