Jump to content
GreenSock

madelyncruz

Adjust delay on each element

Go to solution Solved by Tahir Ahmed,

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

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

Link to comment
Share on other sites

  • Solution

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.

  • Like 5
Link to comment
Share on other sites

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 :)

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