lemonetti Posted December 1, 2022 Share Posted December 1, 2022 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 1, 2022 Share Posted December 1, 2022 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 1 Link to comment Share on other sites More sharing options...
lemonetti Posted December 12, 2022 Author Share Posted December 12, 2022 @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 Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted December 12, 2022 Solution Share Posted December 12, 2022 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 2 Link to comment Share on other sites More sharing options...
lemonetti Posted December 12, 2022 Author Share Posted December 12, 2022 Hello @mvaneijgen! Thank you for your fast answer It works now, but I get following error message in the console: Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 12, 2022 Share Posted December 12, 2022 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 2 Link to comment Share on other sites More sharing options...
lemonetti Posted December 12, 2022 Author Share Posted December 12, 2022 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! 1 Link to comment Share on other sites More sharing options...
lemonetti Posted December 15, 2022 Author Share Posted December 15, 2022 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 16, 2022 Share Posted December 16, 2022 @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. 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now