Adjust delay on each element

[madelyncruz 1 Likes (Newbie)]

I would like to start the animation of the next element before the previous element complete, but I don't know on how to. I've set a delay to -1, but nothing happens. Please help. Thank you.

See the Pen LbwWZa by madelyncruz (@madelyncruz) on CodePen

[Tahir Ahmed 93 Likes (Contributor)]

I think you are looking for an overlapping animation if I understand it correctly. I think you can achieve this in a number of ways but

See the Pen LbwjaY by tah_med (@tah_med) on CodePen

is what I would propose with slight modifications to your animations timing and the properties that are actually animating but most importantly, utilising position parameter and nested timelines:

var mainTimeline = new TimelineMax();

$('.animated').each(function(index){
  var tl = new TimelineMax();
  tl.from($(this).find('.image'), 0.6, { alpha: 0, y: -20, ease: Power2.easeOut }, 0);
  tl.from($(this).find('.title'), 0.6, { alpha: 0, y: 10, ease: Power2.easeOut }, 0.2);
  mainTimeline.add(tl, '-=0.6');
});

$("#play").click(function() {
  mainTimeline.restart();
});

To understand more about this position parameter in the world of GSAP, I strongly recommend you to take a look at this in-depth article explaining all the different ways you can use it: https://greensock.com/position-parameter.

 

Hope this helps.

[madelyncruz 1 Likes (Newbie)]

I think you are looking for an overlapping animation if I understand it correctly. I think you can achieve this in a number of ways but

See the Pen LbwjaY by tah_med (@tah_med) on CodePen

is what I would propose with slight modifications to your animations timing and the properties that are actually animating but most importantly, utilising position parameter and nested timelines:

var mainTimeline = new TimelineMax();

$('.animated').each(function(index){
  var tl = new TimelineMax();
  tl.from($(this).find('.image'), 0.6, { alpha: 0, y: -20, ease: Power2.easeOut }, 0);
  tl.from($(this).find('.title'), 0.6, { alpha: 0, y: 10, ease: Power2.easeOut }, 0.2);
  mainTimeline.add(tl, '-=0.6');
});

$("#play").click(function() {
  mainTimeline.restart();
});

To understand more about this position parameter in the world of GSAP, I strongly recommend you to take a look at this in-depth article explaining all the different ways you can use it: https://greensock.com/position-parameter.

 

Hope this helps.

 

Hi Tahir Ahmed,

 

This is exactly what I'm looking for. Thank you so much for your response and helping me out to achieve what I need. I'm now looking at the position parameter. Thank you again