DrawSVG with ScrollTrigger Multiple Element

[Sıradışı Digital 2 Likes (Newbie)]

Hi, How can I get the animation to be triggered separately for each svg?

See the Pen KKGJdYe by mrtsiradisi (@mrtsiradisi) on CodePen

[mvaneijgen 2,480 Likes (Superhero)]

I would create a loop for each element you wan two have a trigger for and then add the logic for each item in the loop. Your example also forgot to load ScrollTrigger and personally I like to split my ScrollTrigger logic from the animation, so that is why I've created a timeline for each element. Hope it helps and happy tweening! 

 

See the Pen LYgqGOR?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Sıradışı Digital 2 Likes (Newbie)]

Thanks, what I was trying to do was as follows.

 

scrollTrigger: { trigger: container+" svg", start: "top+=20% center", end: "bottom-=20% center", toggleActions: "play none reverse none", markers: true }

I was getting an error when I did it this way. That's all it takes to do. thank you for your time.

 

const item = container.querySelectorAll("path");