ngrmm Posted November 2, 2020 Share Posted November 2, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 2, 2020 Share Posted November 2, 2020 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. 1 Link to comment Share on other sites More sharing options...
ngrmm Posted November 2, 2020 Author Share Posted November 2, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 2, 2020 Share Posted November 2, 2020 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now