Trying to animate SVG paths with stagger or other effect

[JohnnyD]

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

[mvaneijgen]

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

 

[JohnnyD]

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.