Changing repeat delay

[jomifo]

In Javascript, I have a timeline that I want to repeat indefinitely, but want to delay the repeat with a different value every time(actually the same delay every third time) and then repeat the sequence over and over again.  This is how it is represented on a Flash moveclip timeline-

 

 

First approach using a parent timeline. This did not work-

var parentTimeline = new TimelineMax({repeat: -1, repeatDelay: 2.58});
parentTimeline.add(timelineToRepeat,0);
parentTimeline.add(timelineToRepeat,3.67);
parentTimeline.add(timelineToRepeat,6.17);

Second approach trying to change repeatDelay on the fly.  This did not work-

var repeatDelays = [2.67, 1.5, 2.58];
var timelineToRepeat = new TimelineMax({repeat: -1, onRepeat: onRepeat})
function onRepeat(){
    var delay = repeatDelays.shift();
    repeatDelays.push(delay);
    timelineToRepeat.repeatDelay(delay);
}

Any suggestions on a good way to do this kind of animation of Greensock?

 

Thanks

 

 

 

 

[jamiejefferson]

Hmm this is an interesting problem. The issue you had with your first example is that a timeline can only exist once in one parent timeline. Similarly

var parentTimeline1 = new TimelineMax();
parentTimeline1.add(timelineToRepeat);

var parentTimeline2 = new TimelineMax();
parentTimeline2.add(timelineToRepeat);

would result in timelineToRepeat only existing in parentTimeline2.

 

One feature of GSAP we can leverage to achieve this (without creating 3 duplicate timelines) is to create tweens of the timelines.

var parent = new TimelineMax({repeat: -1, repeatDelay: 2.58});
parent.add(timeline.tweenFromTo(0, timeline.duration()), 0);
parent.add(timeline.tweenFromTo(0, timeline.duration()), 3.67);
parent.add(timeline.tweenFromTo(0, timeline.duration()), 6.17);

Each call to tweenFromTo() creates a new TweenLite that will scrub the playhead of 'timeline' from start to end. Since it creates 3 separate tweens, they can all co-exist inside the parent timeline. Note that 'timeline' was not added as a child of the 'parent' timeline. If a timeline is a child of another timeline, its playhead is locked to the parent's playhead which would prevent the effect we're creating here.

 

You can read more about tweenFromTo() here.

[Carl]

Hey Jamie, 

 

Quite impressive and clever use of fromTo(). I don't think I would have come to that solution quickly. 

[jomifo]

Thanks for the reply.

 

Still does not seem to work for me.

 

Strangely, when I log out the children of the glowRepeatTimeline, there is only one element in the array.  I would expect three.

 

Here is the code,

        this.glowTimeline = new TimelineMax();
        this.glowTimeline.set(this.sparkleGlowScale, {x: 0.21, y: 0.21});
        this.glowTimeline.set(this.sparkleGlow, {alpha: 0.0});
        this.glowTimeline.set(this.sparkleGlow, {setVisible: true});
        this.glowTimeline.to(this.sparkleGlowScale, 0.25, {x: 1, y: 1, ease: Quad.easeOut}, 0);
        this.glowTimeline.to(this.sparkleGlow, 0.25, {alpha: 1.0, ease: Quad.easeOut}, 0);
        this.glowTimeline.to(this.sparkleGlowScale, 0.67, {x: 0.21, y: 0.21, ease: Quad.easeIn}, 0.25);
        this.glowTimeline.to(this.sparkleGlow, 0.67, {alpha: 0.0, ease: Quad.easeIn}, 0.25);


        this.glowRepeatTimeline = new TimelineMax();
        this.glowRepeatTimeline.repeat(-1);
        this.glowRepeatTimeline.repeatDelay(2.58);
        this.glowRepeatTimeline.add(this.glowTimeline.tweenFromTo(0, this.glowTimeline.duration()), 0);
        this.glowRepeatTimeline.add(this.glowTimeline.tweenFromTo(0, this.glowTimeline.duration()), 3.67);
        this.glowRepeatTimeline.add(this.glowTimeline.tweenFromTo(0, this.glowTimeline.duration()), 6.17);
        console.log(this.glowRepeatTimeline.getChildren());

Thanks for any insight.

[jomifo]

oddly, if I assign the children tweens to variables before adding to the timeline things work as expected and the number of children for the parent timeline is three as I would expect.

 

        this.glowTimeline = new TimelineMax();
        this.glowTimeline.set(this.sparkleGlowScale, {x: 0.21, y: 0.21});
        this.glowTimeline.set(this.sparkleGlow, {alpha: 0.0});
        this.glowTimeline.set(this.sparkleGlow, {setVisible: true});
        this.glowTimeline.to(this.sparkleGlowScale, 0.25, {x: 1, y: 1, ease: Quad.easeOut}, 0);
        this.glowTimeline.to(this.sparkleGlow, 0.25, {alpha: 1.0, ease: Quad.easeOut}, 0);
        this.glowTimeline.to(this.sparkleGlowScale, 0.67, {x: 0.21, y: 0.21, ease: Quad.easeIn}, 0.25);
        this.glowTimeline.to(this.sparkleGlow, 0.67, {alpha: 0.0, ease: Quad.easeIn}, 0.25);


        var tw1 = this.glowTimeline.tweenFromTo(0, this.glowTimeline.duration());
        var tw2 = this.glowTimeline.tweenFromTo(0, this.glowTimeline.duration());
        var tw3 = this.glowTimeline.tweenFromTo(0, this.glowTimeline.duration());
        this.glowRepeatTimeline = new TimelineMax();
        this.glowRepeatTimeline.repeat(-1);
        this.glowRepeatTimeline.repeatDelay(2.58);
        this.glowRepeatTimeline.add(tw1, 0.0);
        this.glowRepeatTimeline.add(tw2, 3.6667);
        this.glowRepeatTimeline.add(tw3, 6.1667);
        console.log(this.glowRepeatTimeline.getChildren());

 

[Carl]

Hi Jomifo,

 

thanks for posting your problem and solution. It seems this helped expose a slight issue in the way tweenFromTo() tweens were overwriting each other (which is why getChildren() only showed 1). We specifically added this behavior awhile back to solve a very particular use case. What you are doing seems much more common.

 

The next release will include a fix for this so that things will work exactly as Jamie suggested.

However, for now, you can get the proper behavior without creating those tween instances separately by setting {overwrite:false} on each tweenFromTo() (other than the first).

 

Please see this pen which shows how it can work

http://codepen.io/GreenSock/pen/e94d4f53f2b37e8c210a760253d237d4?editors=001

 

Thanks again for your patience and sorry for the inconvenience / confusion

[jomifo]

Hi Carl-

 

No worries and thanks for the workaround.  It's cleaner to me than declaring all the tween instances.  Also, I verified it works for me.

 

I encounter this type of animation fairly frequently when porting over Flash animations from old-school animators.  They use a variable delay between multiple "particle-effect" flicker animations that are the same and then loop the whole thing.  This gives a randomness to the "flicker".  Also, they usually add a bit of actionscript on frame 1 so that the initial start of the animation is on a different frame for each "particle".  Something which I'm happy I can easily do with greensock by passing a from value to play().

 

jomifo