Jump to content


On first click animation plays smooth, subsequent clicks causes delay on start

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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(){

document.getElementById('fab').addEventListener('click', function(){
  //I've also tried tl.restart() and it still has a delay.

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

Link to comment
Share on other sites

Hi jknott :)


Looks to me like the problem is coming from the third tween in your timeline. You're setting the position parameter to a relative value of "-=1.8", but that puts it before the start of the timeline. If you adjust that offset, I think you should be just fine.


Happy tweening.


  • Like 4
Link to comment
Share on other sites

Ah geez! I knew it had to be something simple like that! Thanks for your help :)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.