Jump to content
Search Community

Clockwise Sequence Master Timeline Issue

cr33ksid3 test
Moderator Tag

Recommended Posts

So gurus, I've been messing with this for some time now. I hope it is minimal enough. I'm having trouble with master timelines and trying to reuse one function for 8 color changes that should go clockwise one right after the other. If possible, please do not change it from master timelines and functions. It confuses me as a beginner. I think I am close but it isn't functioning properly yet and in the console I still get undefined errors. What am I missing?

 

And did I set up the function correctly with the variable "i"?

 

I am trying hard to avoid one long timeline of tweens if possible. I had that working and it looked like a mess... but master timelines and functions are throwing me for a loop again...

See the Pen PoWjgeg by cr33ksid3 (@cr33ksid3) on CodePen

Link to comment
Share on other sites

it looks like your function changeColors() is returning itself

 

function changeColors(i) {
  var circle = "#circle" +i;
  var txt = "#txt" +i +" > path";
  var change = new gsap.timeline();
  change.to(circle, 1, {fill:"#01ac4e"})
      .to(txt, 0.5, {fill:"white"},">")
      .addPause(2)
      .to(circle, 0, {fill:""})
      .to(txt, 0, {fill:""});

    return changeColors(); // should be return change
}

You probably want it to return the change timeline

  • Like 3
Link to comment
Share on other sites

@Carl the function is supposed to take the new "i" value and populate the new timeline so that it fires each of the tweens... if it returns itself, is that where the undefined errors come from in console log? I wouldn't think that returning itself would be a problem since the next part of the master timeline just grabs and does the action of the next in sequence. I guess it does though...

 

I changed the call back line to "return changeColors(change);" and it highlights the first circle/text correctly with no "undefined" errors. However, the master timeline does not move on to the second in the sequence... nor third... etc...

 

@PointC same possible graphics... a different type of animation. I tried to start with what I had learned from those examples but could see the logic in my head, so I built it this way. I'm going through Carl's tutorials several times, Greensock's, and several courses on Udemy hoping that eventually I will be able to troubleshoot these myself. Every time I learn something new. This time may be why a function returning itself is causing my headache with this project. I have been doing these tutorials but also trying to implement things I've learned into real projects. So far, with help, I am stumbling along and learning... Thank you all...

Link to comment
Share on other sites

@PointC I wondered how that was handled... If you fork them though, you end up with a bunch of duplicates in your Pen profile ... and you shouldn't delete them or it messes up these threads right? Seemed kind of lame considering the small change in the return line but I will keep that in mind for future Pens.

 

So, instead of ".to(circle, 0, {fill:""})" to return the objects to their original state... just use ".set(circle, {fill:""})"?

Link to comment
Share on other sites

the reason the master timeline appeared not to be repeating is because each child timeline had pause(2) in it. that just pauses the timeline at a time of 2 seconds https://greensock.com/docs/v3/GSAP/Timeline/addPause()

 

if you want some dead time between tweens in a timeline, use the position parameter.

 

I made this fork and removed some tweens just so you can see each timeline playing in succession. feel free to edit those timelines to do whatever you like with the timing and property changes.

 

See the Pen JjEyPMx?editors=1010 by snorkltv (@snorkltv) on CodePen

 

also, don't use a duration of 0 as separate parameter. with GSAP 3 duration belongs with the other properties in the vars object {}

or like @PointC said use a set()

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

@Carl so in your Fork it looks like you removed the pause all together... I will look into the position parameter as mentioned. It also looks like you got rid of my tweens and replaced them with "yoyo:true" instead. Is that why you used yoyo? That eliminates the use of .set() as well.

 

@PointC I wondered how that was handled... If you fork them though, you end up with a bunch of duplicates in your Pen profile ... and you shouldn't delete them or it messes up these threads right? Seemed kind of lame considering the small change in the return line but I will keep that in mind for future Pens.

 

So, instead of ".to(circle, 0, {fill:""})" to return the objects to their original state... just use ".set(circle, {fill:""})"? Or now the way Carl mentioned...

 

And yes, I think I have enough to finish this part of the project. Its not completely done though... eventually I want to figure out how to have a small block of text appear in that large grey circle when each smaller circle highlights. Not tonight though... I have some tutorials to work on... thanks both of you again...

Link to comment
Share on other sites

9 minutes ago, cr33ksid3 said:

So, instead of ".to(circle, 0, {fill:""})" to return the objects to their original state... just use ".set(circle, {fill:""})"? Or now the way Carl mentioned...

Yup - set() is essentially a zero duration tween, but in this case I'd use the yoyo in the timeline like Carl did in his fork. 

 

Carl was referring to putting the duration in the {}. 

// old GSAP2 duration before vars
.to(txt, 0.5, {fill:"white"},">")

// new GSAP3 
.to(txt, {duration: 0.5, fill:"white"},">")

You'll also notice Carl didn't include a duration in his tweens because 0.5 is the default. If that works for you, no need to add it to the tweens. You can also set a timeline default and override it on any individual tweens.

 

Have fun and happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

@PointC yes, I had found that he had removed the duration. Did not know I was using old GSAP though. If I add a duration of 2 seconds like you have in new GSAP... the time the new green highlight appears is 2 seconds but I want it to change instantly to that green not fade into the green highlight color and white text. Would I use something like "ease:Linear.easeNone" (didn't seem to work for me) to elminate that fade? And if so, the whole point of the duration set to 2 seconds is so that the green highlight and white text stay on the screen for 2 seconds before moving on to the next.

Link to comment
Share on other sites

Not sure where we have duration:2?

 

Do you mean you want each circle to change and then wait for 2 seconds? That's where Carl was talking about using the position parameter. But you could also just use a 2 second delay on the repeat like this:

var change = new gsap.timeline({repeat:1, repeatDelay:2, yoyo:true});

Make sense?

  • Like 3
Link to comment
Share on other sites

@PointC I had tried position parameters like this ".to(txt, 2, {fill:"white"}, "+=2")" but that did work. The sequence was still off. I had also tried it up in the master timeline like this ".add( changeColors(2),"+=2" )" but that didn't seem to work either. I will get rid of the "new" and add a "repeatDelay:2" and see what that does. And yes, I want each circle/text to change and then wait for 2 seconds before moving on to the next circle/text in the sequence.

Link to comment
Share on other sites

4 minutes ago, cr33ksid3 said:

And if I do add a duration of 0 rather than the default of 0.5, there shouldn't be a slide fade in to the highlighted green and white. It should just be instantaneous right?

 

I'm not sure a zero duration tween will work correctly here with the yoyo. You can add something really tiny and it will still be snappy. Like:

  var change = gsap.timeline({
    repeat: 1,
    yoyo: true,
    repeatDelay: 2,
    defaults: { duration: 0.01, ease: "none" }
  });

 

  • Like 2
  • Thanks 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.
×
×
  • Create New...