Share Posted February 15 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 post Share on other sites
Share Posted February 15 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 post Share on other sites
Solution Share Posted February 15 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 6 Link to post Share on other sites
Author Share Posted February 15 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 post Share on other sites
Author Share Posted February 15 Hi, tailbreezy Wow! Thank you very much! I have to study GSAP more... Thank you gain! Arigatogozaimasu! Shozo Link to post Share on other sites
Share Posted February 15 @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 post Share on other sites
