neumonic

Thank you again for the awesome help @GreenSock I truly appreciate it! I have updated my code to reflect your feedback. https://codepen.io/jshuadvd/pen/JjOOPNe Almost everything is good to go with one exception. The actual drawing in of the path. The dash array does animate just fine... I think this is because (please correct me if I am wrong) you can only target the mask via an id? So, mask="url(.stroke-mask)" would not work? If that is the case, I am not 100% certain how do that dynamically. Any insight is greatly appreciated Thanks again!

Hi @GreenSock Thank you for the kind welcome as well as the quick response. 1. I have removed the second SVG. I realize that the artwork is flawed there. I am now using another SVG that isn't. 2. I have updated the order as well. 3. I have updated the `containerAnimation` value and it seems that the triggers are now working horizontally. 4. Yes, I was following what Cassie did here: where they used both DrawSVG for the mask as well as the css variable for the actual stroke. Thank you for your advice. I was able to update the first two sections and they are now working properly. https://codepen.io/jshuadvd/pen/JjOOPNe?editors=1000 My next question is, what would be the best way to do this dynamically from a GSAP perspective? I have 7 or 8 of these sections with different SVG's in each. It would be ideal to attempt to maintain DRY philosophy, if at all possible... My initial thought is to store the sections and SVGS in an array loop through and create a .from for each mask and stroke and then update the trigger class from there as well. Thanks again

Hi there! I am attempting to animate multiple line dash svgs in multiple sections of a horizontal scroll container, but I am only successful with doing this on the first one. Similarly, what is the most performant way to do this in the view dynamically? My initial thought is to store the SVGS in an array and loop through the array to render them in the template, but perhaps there is an easier way to do this with GSAP. I would also assume that I could keep the same type of drawing in animation but would need to tweak the starting and ending position in each section. Maybe the better way to do this is trigger via an element verses the container? Any help would be greatly appreciate. Thank you!