Jump to content
Search Community

DrawSVG with ScrollTrigger Multiple Element

Sıradışı Digital test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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");
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...