delay or waiting between animation inside a timeline

[ngrmm]

as you see in the codepen i have 4 articles inside my section.

 

i would like to have this animation timeline

while section is pinned:

– fadeout article.intro

– fadein article.one

– wait a bit

- fadein article.two

– wait a bit

- fadein article.two

 

something like:

industries.to('article.intro', {autoAlpha: 0, duration: 1})
	.to('article.one', {autoAlpha: 1, duration: 3})
	// wait  duration:3	
  	.to('article.two', {autoAlpha: 1,duration: 3})
	// wait  duration:3	
	.to('article.three', {autoAlpha: 1,duration: 3});

 

and my other question is:

am i right that i can use the duration as a relative time, because of using scrolltrigger. so my time are actually the pixels. and the sum of all durations are relative to my pixel-distance?

 

See the Pen gOMzJxw by ngrmm (@ngrmm) on CodePen

[ZachSaucier]

Hey ngrmm and welcome to the forums.

 

24 minutes ago, ngrmm said:

.to('article.one', {autoAlpha: 1, duration: 3}) // wait duration:3 .to('article.two', {autoAlpha: 1,duration: 3})

That's a perfect use case for the position parameter. In this case .to('article.two', {autoAlpha: 1,duration: 3}, "+=3").

 

26 minutes ago, ngrmm said:

am i right that i can use the duration as a relative time, because of using scrolltrigger. so my time are actually the pixels. and the sum of all durations are relative to my pixel-distance?

That is correct when you have a scrub. It's explained more in the ScrollTrigger docs.

[ngrmm]

thank you Zach!

i did another codpen for beginner like me with the result:

See the Pen KKMRjrO by ngrmm (@ngrmm) on CodePen

 

and is it possible to have each function for all those articles in case i would have a dynamic number of articles?

 

 

[ZachSaucier]

13 minutes ago, ngrmm said:

is it possible to have each function for all those articles in case i would have a dynamic number of articles?

Sure it is:

See the Pen JjKvgJp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

For more info see my article about animating efficiently.