Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
zachschnackel

TimelineMax stagger animations - repeatDelay

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

Hey Carl,

Appreciate the reply. It's bezier curve that I need starting before the other is done; so what I'm thinking I may need to do is duplicate the content and delay a separate toggle on that duped content.

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