Jump to content
GreenSock

jknott

BusinessGreen
  • Posts

    8
  • Joined

  • Last visited

Posts posted by jknott

  1. I have a button that when clicked, triggers my timeline to play.

     

    There is no delay on start and on the first click it works fine.  On subsequent clicks, it takes time for the animation to start.  Any idea what I'm doing wrong?

     

    I've tried triggering the animation with just TL.restart() and also having an onComplete function that sets the timeline's progress to 0 and pauses it.  Any idea how I remove that delay on subsequent clicks?

    Code here:

    var tl = new TimelineMax({paused: true, onComplete: resetTl});  
    TweenMax.set('.fab', {perspective: 200})
    
    tl.to('#sendplane', 1, {rotation: -20, opacity: 0, x: '+=100', ease: Elastic.easeIn.config(1, .9), onComplete: resetPlane})
    .to('.fab', .25, {scale: 1.2, boxShadow: '0px 7px 15px rgba(0,0,0,0.1)'}, '-=.8')
    .to('.fab', 2, {rotationY: -360, ease: Elastic.easeIn.config(1, .9)}, '-=1.8')  
    .fromTo('.checkmark', .5, {drawSVG: '0%'}, {drawSVG: '100%'})
    .to('.fab', 2, {rotationY: 360, ease: Elastic.easeIn.config(1, .9)}) 
    .to('.checkmark', .2, {opacity: 0}, '-=1.1')
    .to('#sendplane', 1, {x: '+=100',opacity: 1}, '-=.4')
    .to('.fab', .25, {scale: 1,boxShadow: '0px 0px 5px rgba(0,0,0,0.3)'})
    
    function resetPlane(){
      TweenMax.set('#sendplane', {x:'-=200', rotation: 0, opacity: 1})
    }
    function resetTl(){
      tl.progress(0)
      tl.pause()
    }
    
    document.getElementById('fab').addEventListener('click', function(){
      tl.play()
      //I've also tried tl.restart() and it still has a delay.
    })
    

    See the Pen mRezxY by jgknott (@jgknott) on CodePen

  2. I've been trying to create an accordion menu with GSAP.  I have 3 menus and I want the others to reverse their animations when one is clicked.  Each menu item also has a hover state.. which I think is causing my issue.

     

    If you click around on the menu items quickly, then sometimes an element is left with it's old boxshadow property.

     

    If you check out the codepen I think you'll get a good idea of what I'm talking about.  Is there a better way to do what I'm trying to do?

    See the Pen b65004e402311a218643e81a8c27769c by jgknott (@jgknott) on CodePen

×