shozo Posted February 15, 2021 Share Posted February 15, 2021 Hello, I am a beginner of GSAP and new to the community. I have a question. What I would like to do is each item staggered fades in when they appear on the stage using scrolltrigger. However, they will appear at the same time when I scroll down. Does anyone have an idea? Thank you. See the Pen qBqRJjL by shozo (@shozo) on CodePen Link to comment Share on other sites More sharing options...
angelokeirsebilck Posted February 15, 2021 Share Posted February 15, 2021 Hi shozo, See the Pen YzpZqQM by AngeloKeirsebilck (@AngeloKeirsebilck) on CodePen I would do it like this, not sure if this meets your requirements? As I made three separate grids now. But it surely works like this. 6 Link to comment Share on other sites More sharing options...
Solution tailbreezy Posted February 15, 2021 Solution Share Posted February 15, 2021 These staggers that happen near to each other time-wise are a job for ScrollTrigger.batch It essentially triggers them in close proximity to each other. You can read up on the method in the docs. It is quite extensive and thorough. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch() Additionally, you can also add back onLeave and onEnterBack as in the docs, if you want to re-trigger the first batch as well. See the Pen 94b47a1c756f829787ed27e177cd0b36 by dadacoded (@dadacoded) on CodePen 7 Link to comment Share on other sites More sharing options...
shozo Posted February 15, 2021 Author Share Posted February 15, 2021 Hi angelokeirsebilck, Thank you so much! Yes, this is exactly what I want to do. It is beautiful and perfect. Arigato! Shozo 1 Link to comment Share on other sites More sharing options...
shozo Posted February 15, 2021 Author Share Posted February 15, 2021 Hi, tailbreezy Wow! Thank you very much! I have to study GSAP more... Thank you gain! Arigatogozaimasu! Shozo Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 15, 2021 Share Posted February 15, 2021 @angelokeirsebilck Thanks for contributing! Quick note: ease: "powe3.out" is invalid. It should be ease: "power3.out" or just ease: "power3" since out is the default. 3 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