Jump to content
Search Community

TimelineMax stagger animations - repeatDelay

zachschnackel 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

Hi all,

If I am using the staggerTo() property to run through a series of elements, is it possible to "start" the stagger animation again before the original stagger is complete? I've tried using the repeatDelay property, but there's still quite a gap in-between the timeline restarting.

$wave.timeline = new TimelineMax({ repeat: -1, repeatDelay: -4 });

$wave.timeline
.staggerTo('.Employee', 1.5, {
  delay: 1,
  opacity: 1
}, offset, 'path')
.staggerTo('.Employee', 20, {
  bezier: {
    type: "soft",
    values: bezierCurve
  },
  ease: Power1.easeInOut
}, offset, 'path')
.staggerTo('.Employee', 1.5, {
  opacity: 0,
  delay: 15
}, offset, 'path');
Link to comment
Share on other sites

Since timelines are linear you really can't replay the first part before its over.

However, if each of your staggerTo()s were in their own timelines and then you nested those timelines its possible each of those child timelines could repeat independently and maybe that would give you the effect you are after.

 

something like

 

var timeline = new TimelineMax();
var t1 = new TimelineMax({repeat:-1, repeatDelay:1});
var t2 = new TimelineMax({repeat:-1, repeatDelay:1});
var t3 = new TimelineMax({repeat:-1, repeatDelay:1});


t1.staggerTo('.Employee', 1.5, {
  delay: 1,
  opacity: 1
}, offset, 'path');


  
  
 t2.staggerTo('.Employee', 20, {
  bezier: {
    type: "soft",
    values: bezierCurve
  },
  ease: Power1.easeInOut
}, offset, 'path');




t3.staggerTo('.Employee', 1.5, {
  opacity: 0,
  delay: 15
}, offset, 'path');


timeline.add(t1, 'path');
timeline.add(t2, 'path');
timeline.add(t3, 'path');

It's helpful if you provide a reduced CodePen demo so we can better see the effect.

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

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