bg-scro's post in Start/Stop timeline when element is hovered on was marked as the answer
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:
See the Pen BogoWK by bg-scro (@bg-scro) on CodePen
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();
}
