Multiple DrawSVG Elements with same Timeline Trigger

[lemonetti]

Hello,

 

I am wondering how to use the same Timeline and Trigger for multiple same elements. If I animate only one Element it works as expected, as soon as the second element is added in it breaks.

See the Pen JjZLEZB by clmsftsw (@clmsftsw) on CodePen

[mvaneijgen]

You'll need to scope your elements to the current loop you're on. I don't use jQuery, so I'm not 100% sure if what I did was correct, but I thought it worked like this jQuery('.someElm', myScope). Where myScope is the the parent element where you want to limit the scope to. In normal Javascript document.querySelectorAll('.someElm'), gets you all the elements on the page, but myScope.querySelectorAll('.someElm') gets you only the elements within myScope. 

 

Also GSAP has a solution for this, see https://greensock.com/docs/v3/GSAP/UtilityMethods/selector() where you can scope elements that way. Hope it helps and happy tweening! 

 

See the Pen PoayNdN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[lemonetti]

@mvaneijgen Thank you so much. This works when it is the same svg again. Unfortunately this doesn't work if the svg is different. Do you know how to deal with this situation?

 

See the Pen eYKaVNL by clmsftsw (@clmsftsw) on CodePen

[mvaneijgen]

Are you talking about .highlight-slider-line-a and .highlight-slider-line-b? These are not scoped. I've wrapped them in q(".highlight-slider-line-a") to scope them to the current lineTrigger. I don't know what your .hide() function is doing, but it is being called multiple times, so I advies you do do some more research to how that works in jQuery or just use GSAP for that gsap.set(q(".circle-line-2"), {opacity: 0})

 

See the Pen vYrwdPm?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[lemonetti]

Hello @mvaneijgen!

 

Thank you for your fast answer  

It works now, but I get following error message in the console:

[mvaneijgen]

I've updated my pen to have the same lines as your old one. But I've no idea what these errors are and these are not on codepen, so I don't know how to fix them 

[lemonetti]

Hey, 

I changed the .show and .hide functions to the opacity function like you suggested and the error is gone now. 
Thank you again, you were a great help!

[lemonetti]

Hello,

 

unfortunately I stumbled upon another problem. I want to add a class on completion of the first line to animate the element. And then remove the class when I scroll up again and trigger the Line Animation in the other direction. With the first line it works as intended, but for some reason the onReverseComplete gets also triggered by the second line, which it shouldn't..

 

Here's my pen:

See the Pen NWzQezW by clmsftsw (@clmsftsw) on CodePen

[mvaneijgen]

@lemonetti seen that this is a new issue I would suggest starting a new topic. Maybe even creating a simpler demo with only the issue you are facing now.