Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

bg-scro

Members
  • Posts

    5
  • Joined

  • Last visited

Community Answers

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