TartufoDAlba

Yep that is it! I managed to glance over the trigger info in the docs. Simple and clean, thank you!

I was wondering if it would be possible as per the example to: 1. Drag the .inner-box while using the "#outer-box" as a guide. Basically making it so the .inner-box is moved around by the same x,y that happens on the "#outer-box" 2. Keep the bounds where if the "#outer-box" when the ".inner-box" reaches the "#outer-box" bounds. (To note: my pen is obviously off, and the "#outer-box" i am not trying to make drag around. Only ".inner-box" would drag around and stop when it has reached the edge of the "#outer-box") The overall goal is to make ".inner-box" draggable even when you are not clicking directly on the div.

I had made another pen for FF, just to be sure I understood. It still seems that even when the parent has the "display: none" and the SVG does not, it still does not function properly (In FF). But I also may have mis-understood the explanation... so i provided the pen just in case.

Hi, I tested it and it works perfectly. Great to see that issue was solved. Thanks! Based on spacing issues of how it would still show the spacing with "visibility: hidden", the parent divs of these SVGs really do have to be "display: none". I will keep in mind the rest though. Thanks!

The issue is is that the physical arrow is inside a larger div that is set to display: none. (i just tried to make the minimal version for an example) I guess I could always call that effect as each arrow appears also. Just wondering if there may be a quicker/simpler solution.

Please check codepen example in FF. I was able to isolate the issue. Where if the SVG element is set to "display: none" it will throw an error. (i guess because it doesn't exist in the DOM) The issue is i have 10 of these arrows on another page. And 9 of them are set to "display: none". Then later in the scene they will begin to show. Is there any kind of work around in FireFox to fix this?

I ended up using your (Carl's) method, Thank you! Then adding the click turning off/on. Here is the final pen just for information purposes if it's searched:

Thank you, overall the 2nd pen I posted (linked again), shows the basic behavior which intertwines with the 1st post. I'm not to sure if there is a cleaner way to do it. In the pen i provided you will see if you continue to click "play-me" it disables the click until the opposite timeline completes. This is the goal: - Button "play-me" shares 2 timelines 1. Click button "play-me" to play "timeline 1" (box height) 2. Disable button "play-me" until "timeline 1" is finished 3. Re-Enable button "play-me" when timeline 1 is finished 4. Click button "play-me" to play "timeline 2" (make box red) 5. Disable button "play-me" until "timeline 2" is finished 6. Re-Enable button "play-me" when timeline 2 is finished and so on in a loop The point being, not allow the other timeline to play on click until the opposite timeline is finished.

Thank you for the input and nice clean example, I am aware that you're able to reverse it much cleaner. In my broken down codepen I indeed see how it could suggest that "reverse" would be a workable method for what I'm trying to achieve there. But in my full site I literally have 2 fully separated timelines... both of which are very different and timeline2 not being the reverse of timeline1. That is why it is important that they are able to fire separately, not in reverse nor "on top" of each other.

I was able to put something together without using .isActive(), I may not have been using it correctly. I have updated my "solution" here if anyone stumbles up it.

My goal of this pen, is to make it so that you can continue to "open and close the menu". Where each action (open/close) has to wait for the other timeline to finish before it can start again. My issue is I understand that after ".play()" the timeline is at the ending, leaving no timeline to restart. But if i use ".restart()" in these instances, it just restarts the first timeline. Any help would be most appreciated.

What would happen if you per-say wanted to remove multiple timelines from a master timeline? I can see based on the explanation, why if you "remove 1st" + "remove 2nd", it would keep push "5" and "6" to play at the same time. Would there be a way to build it where both are true: 1. Option of removing multiple parts from the master timeline and have it shift correctly (Remove 1st + Remove 2nd + Play) 2. Option removing only 1 part of the timeline (Remove 1st + Play) < which technically works on its own. Where because different users may choose a different "path" 1 or 2, both options would be available to the same timeline.

Great thought out explanation, thank you again! This forum really helps to make the learning curve smoother and your help is appreciated. Here is the updated pen for this thread that works with your applied suggestion:

I'm now getting some behavior that is making me question if I fully grasp the "shiftChildren()" method. If now I take the "fixed" pen (2nd in this thread), make it so each timeline (t1, t2, t3, t4) has the exact same total time (of 1 second each) it creates a different output. I now receive unexpected behavior where 2 timelines play at the beginning (at the same time) + seems to skip over the "t3 shift Children()":

You're right on the money! Thank you. Here is working update in cause anyone stumbles onto this: