Jump to content

Guest Arun

Joining two staggerTo tween with loops

Go to solution Solved by PointC,

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 created two pens as I cannot combine both in the same pen example to explain my issue.


Pen1 (part 1)

See the Pen dMgxKg by nudgepixels (@nudgepixels) on CodePen


The clock ticking tween repeats for 3 times as seen on the pen.


Pen2 (part 2)


See the Pen PNyMaM by nudgepixels (@nudgepixels) on CodePen


At the end of my pen 1, I want Pen2 to follow without any delay.


My objective is to join these two pens.

(And at the end, I will have to join this single pen to my main project - i.e, 

See the Pen XdRVdP by nudgepixels (@nudgepixels) on CodePen

 - I will handle this part)


As you can see, for the clock loop tween, I'm using a new variable -

var time = new TimelineMax
time.staggerTo(".clock", 1.04, {display: 'block'}, 0.25)
    .to(".clock", 0, { display: 'none'});
which is different from my main variable - 
var tl = new TimelineMax();
tl.staggerTo([frame274_12a, frame274_1, frame274_2,frame274_3], 0.32, {display: 'block'}, 0.25)

My main project is based on 'tl variable. For some reason, I cannot loop and join the second tween (Pen 2) using the same timeline variable. This looks simple, for some reason, none of my solutions are working.


If this can be achieved, it would help me to apply similar solution to other animations.


Kindly help me on this.

See the Pen by nudgepixels (@nudgepixels) on CodePen

Link to comment
Share on other sites

Hi Arun  :)


I think you may be working too hard on this animation.  ;-)


You're showing and hiding the same SVG 12 times to get an animated clock hand. We can make your whole animation a lot easier by animating the hour and minute hands of the clock.


If you want it to jump to each position on the clock, steppedEase is perfect for that kind of thing. Your code would then look like this:

tl.to(".minute1", 3, {rotation: 360, ease:SteppedEase.config(12)}) 
//we then update the hour hand rotation on each repeat of the timeline

More reading about steppedEase:



If you don't want the jump animation of the hour and minute hands, you can get a super smooth clock using a Linear ease.


I've made a CodePen for you with both types of clocks.


See the Pen grQOdK by PointC (@PointC) on CodePen


I think doing it this way will save you a lot of code and make changes much easier.


Hopefully that helps a bit.


Happy tweening.


  • Like 3
Link to comment
Share on other sites

Awesome work, Craig!

  • Like 1
Link to comment
Share on other sites

Hi @PointC,


Highly appreciate your help on this. This was an eye opener to what all GSAP can do when I'm "really trying hard :)" to make things done. 


As far as the objective of the project goes, I'm trying to use the emoji SVG's provided by http://emojione.com/ as-is and not to modify them. That was the reason, I used all these existing emoji svg's which gives me all hourly times instead of modifying the svg(I didn't know that it can be done untill you showed me 8-) ). Your intention to animate the clock as naturally as possible was perfect, but the project require something like this:


https://drive.google.com/file/d/0B90SBTqxxkRBekRJNU9SZ3ZIOEE/view. (actual required output)


As seen on the video clip, the minute hand stays at 12 and only the hour hand rotates. I could modify the svg and your code, that helped me to achieve 3 loop of hour hand rotation. Please see the new pen.


See the Pen aNQNda by nudgepixels (@nudgepixels) on CodePen


But then, I want 3 more steps before the animation completes ( i,e,1, 2, 3 hours - as highlighted in yellow in the frame chart below or on the video clip). How do I do that?


https://drive.google.com/file/d/0B90SBTqxxkRBT3VRMkZlektiQk0/view (frame chart)


This is the part I was stuck originally as well, how to join another stagger tween(1,2,3 hours) along with the loop.


Overall, I'm really happy what I'm learning from this support forum, unlike any other forums I interact, you guys really reach out to us with great solutions and insights into scopes of GSAP.


Great Job, guys!

Link to comment
Share on other sites

  • Solution

I thought it was a little strange that the minute hand never moved in your original pen, but now I see you're trying to match what's happening in that video. :)


In that case, we can take the repeat off the timeline and add it to the first tween so that does a complete loop 3 times. Then we add a tween to the timeline that moves the hour hand 90 degrees into the 3 o'clock position like this:

var tl = new TimelineMax();
tl.to(".hour", 1.04, {rotation: 360, ease:SteppedEase.config(12),repeat:2})
  .to(".hour", 0.32, {rotation: "+=90", ease:SteppedEase.config(3)});

Here's a revised pen:

See the Pen vGQKwd by PointC (@PointC) on CodePen


Happy tweening.


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