JohnnyD Posted August 21, 2023 Share Posted August 21, 2023 Hello! I have the same two SVGs on a webpage. I am currently using scrolltrigger to activate them (opacity 0 -> 1) and this part is working, but I would also like to do more with the animation and was trying to use stagger with from: "random" but that doesn't seem to have any effect -- I'm sure I'm doing something wrong. Also, I don't have to use stagger here. I'm quite new to GSAP and am open to any other ideas to animate the SVG paths (eg. triangles) to create a nice effect. Thanks in advance! See the Pen eYbmKmr by jduttera (@jduttera) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted August 22, 2023 Solution Share Posted August 22, 2023 Hi @JohnnyD It is always a good idea to enable markers: true, when working with ScrollTrigger. This way you can visually see what ScrollTrigger is doing. As you can see in the below pen it is creating a new ScrollTrigger for each triangle and this makes them activate almost at the same time. Next to that stagger wants an array and will do 'nothing' when it only receives one item. See the Pen BavyvBE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen I've made some tweaks to the pen, instead of a forEach loop on each path, it is on the whole SVG it self and we then scope all the path elements to that SVG. This solves two problems at once. Your stagger works and you never want to animate your trigger element when working with GSAP, this can result in unexpected behaviour, so it is better to use that as a rule. See the Pen jOXEXEE?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen I've modified the code a bit, check the comments for descriptions. Great demo by the way! Also check out these great starting guides there is so much great info you can get from there. Hope it helps and happy tweening! https://greensock.com/get-started/ https://greensock.com/get-started-2 3 Link to comment Share on other sites More sharing options...
JohnnyD Posted August 22, 2023 Author Share Posted August 22, 2023 Thanks so much @mvaneijgen! You're right, I totally forgot the markers. And thanks for the explanations - makes perfect sense and was exactly what I was trying to accomplish. 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