stagger with timing change in timeline

[struthyBhoy 4 Likes (Newbie)]

Hi again,

 

Another newbie question. Can anyone help. I am trying to get the last element in my timeline to start before the previous animation finishes. Thanks in advance.

	var h = $("h1"),
 	  para = $("p"),
 	  over = $(".overlay"),
 	  mod = $(".header-cta .module-cta");

	var t1 = new TimelineLite()

	t1.from(over, 1, {
	 	css:{opacity: 0},
	 	// /delay: 6
	  });


	 t1.from(h, 2, {
	 	css:{marginTop:400, opacity: 0},
	 	ease:Bounce.easeOut,
	 	// /delay: 6
	  });

	  t1.from(para, 2, {
	 	css:{marginTop:600, opacity: 0},
	 	ease:Bounce.easeOut,
	  }, "-=1.3"
	);

	t1.staggerFrom(mod, 1, {
	 	css:{marginTop:600, opacity: 0},
	 	ease:Bounce.easeOut, 
	  },  0.1, "stagger"
	);

[Carl 9,066 Likes (Superhero)]

I'm a little unclear on what you need but if you need the staggered animations to all end before para is done you will need to use a negative offset in the position parameter

 

t1.staggerFrom(mod, 1, {

css:{marginTop:600, opacity: 0},

ease:Bounce.easeOut, 

 },  0.1, "-=2"

);

 

I guessed at the number 2 as I have no idea how many items are animating which impacts how long the sum of all the staggers is. 

 

It really helps if you supply a reduced CodePen demo with your questions. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Also, since this question relates directly to the GreenSock API I moved it to the GSAP forum. The banner forum is really for discussing best practices for GSAP in ads, specs, networks, workflow, animation programs (IDEs) and things related to the Ad industry in general. No biggie. Just wanted to clarify.

[struthyBhoy 4 Likes (Newbie)]

Thanks this works.

 

Ok - any future questions I will create a code pen and I will post in the correct forum.

 

I was sure I had tried this solution,,,,, thanks again.

[Carl 9,066 Likes (Superhero)]

No worries. Glad it worked!