Jump to content
Search Community

stagger with timing change in timeline

Guest struthyBhoy
Moderator Tag

Go to solution Solved by Carl,

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

Guest struthyBhoy

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"
	);
Link to comment
Share on other sites

  • Solution

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.
  • Like 1
Link to comment
Share on other sites

Guest struthyBhoy

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.

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