Jump to content

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

Question about timing

Go to solution Solved by Carl,

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'm practicing working with the Timeline, and I've come across a bit of a challenge.


This codepen has a button that moves 3 circles towards a div block, and then towards an SVG of an emoji. The emoji then displays a word in a thought bubble.


All 3 circles move as they should, and eventually move onto the emoji as they should. The problems I'm facing are:


A circle should make a complete trip (start -> div block -> emoji) before the next one starts its animation. Currently what happens is each of the circles go from start -> div block, and only once all 3 are there do they start moving -> emoji.


I'm pretty sure all of this has to do with the way my timeline is being managed but I'm not quite sure where I'm going wrong. I suspect it's the timeline because there's some kind of incremental delay once the circles have to move towards the emoji, and that delay grows even more once the words start appearing in the bubble.


I'm guessing I should use stagger() but I don't know how I'd use it here.

See the Pen ALBaog by pawelza (@pawelza) on CodePen

Link to comment
Share on other sites

See the Pen WGNyAy by pawelza (@pawelza) on CodePen


Actually here's a more stripped down version of the above - this one still has the problem of the circles blocking, and the growing delay to the emoji.

Link to comment
Share on other sites

  • Solution

Thanks for the demo.

I wasn't able to unravel everything you are doing with all those onUpdates that are checking for all the hitTest()s.


However, I did solve mystery of the long delays. It seems you are getting true for your hitTests() many times and each time an update happens you are adding new tweens to the end of the timeline which is adding to the duration of the timeline. Since the same tween is being added many many times moving the same object to the same location, nothing visible is updating on the screen. 


Please open the console and see what this is doing:


function checkFace1Hit() {
  if (Draggable.hitTest(frame1, face, '40%')){
    console.log("i'm adding tweens a zillion times and adding to the duration of the timeline " + tl.duration())
    tl.to(frame1, 0.15, { autoAlpha: 0});
    tl.to(word, { text: 'first thing'});



Your original question about getting each circle to complete its full animation trip before the next one starts is pretty straight-forward and the solution can be reduced to:


// 3 different positions of face
var facePos = [{x:face.position().left, y:face.position().top},
             {x:face.position().left, y:0},
             {x:face.position().left, y:-face.position().top}

$(".frame").each(function(index, element){
  tl.to(element, 1, {x: 300})
    .to(element, 1, {x: facePos[index].x, y:facePos[index].y})



I imagine there is some reason you are using those onUpdates and hitTest()s but I don't have enough information to try to debug all that.

  • Like 1
Link to comment
Share on other sites

Thanks Carl.


Ah that solution of collecting the face positions is pretty neat. That sorts out the problem (and my confusion) around the codepen linked in my second post in this thread - which is really exciting actually.


As for the onUpdates that I'm using - that's almost certainly a bad design decision on my part. I've just added them in there to be able to observe for collisions between the balls and the div, as well as the balls and the face. The idea was that:

checkFrame1Hit - checks to see if the first circle has hit the div (which then should fire off checkFace1Hit)

checkFrame2Hit - checks to see if the second circle has hit the div (which then should fire off checkFace2Hit)

checkFrame3Hit - checks to see if the third circle has hit the div (which then should fire off checkFace3Hit)
checkFace1Hit - checks to see if the first circle has hit the face emoji (which then should make the first text appear)
checkFace2Hit - checks to see if the first circle has hit the face emoji (which then should make the second text appear)
checkFace3Hit - checks to see if the first circle has hit the face emoji (which then should make the third text appear)

  • Like 1
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.