Jump to content
Search Community

Changing repeat delay

jomifo test
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

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-

 post-33638-0-16258900-1420735578_thumb.png

 

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

 

 

 

 

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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());
 
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

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