JaPPa

That is really great! The code is a bit overwhelming to be honest but I think I get the concept. If I'm getting it right the responsive part is done with: let startAt = matches ? -100 : 0, endAt = matches ? 0 : 100; Which is using the media-query function and uses the startAt and endAt values based on true/false result. And these values are then returned to the closing and opening parts in the xPercent animation. I'm wondering how I could change things now thought, if I wanted to add a stagger for the list items in the UL, or add an other element to the timeline on only the mobile or desktop version. And how can speedup the closing animation or jump to a timestamp in the timeline (to skip the stagger part when closing) or change the easing of the animation. Could startAt and endAt be an array and adding more values in there which can called in the opening an closing parts of the code? Because adding things directly in the open/close part of the code will kill the responsive part if I understand it correctly. Or add a timeline on the return, would that do the trick?

Thank you! That looks very nice and thanks for the tip for using Translate X instead of margin-left, although iOS showed it a bit buggy where it left a small bar on the right after the animation was done. Have to dig deeper in that. I've used your method with the responsive problem at the beginning of this topic, it works, but only after refreshing. When I resize the screen the animations fails and nothing works anymore. @OSUblake used a method to 'reset' the animation as I understand it when going from one screen size to an other with: tl.reversed(false).progress(0).clear().pause(); I'm not sure if that method can be used with the stored timeline open/closed. I've setup a new code pen with a little media query css and the responsive JS code: https://codepen.io/werkinprogres/pen/PoKOwKw Theoretically I could only use a CSS media-query in this case, although the values for the animation should stay the same, limiting the options a lot. But even with just the CSS media-query the animations fails as the values don't get updated in the when checking the inspector. @media only screen and (max-width: 799px) { .menu { width: 100%; .subMenu { z-index: 10; transform: translateX(-100%); } } }

I'm trying to figure this out but I am stuck. I made a new Codepen and cleaned it up so only the three sub menu's are in the Codepen. I made it work that all three timelines run and close but I can't figure it how to implement your function. https://codepen.io/werkinprogres/pen/MWvvoNE

Just one more question, how would I approach the situation of Item 2, 3 and 4 all have a sub-menu and one is open, how can I setup that one sub-menu closes and the other one opens if a sub-menu is already opened. In other words, is there a way to see of a sub-menu (timeline) is activated and can that one close (reverse) before opening the new one. This case would only be on de desktop version.

I got it cleaned up and working now, but the animation fires instantly now every time the page loads or is resized. When I use the paused(true); before the timeline, the old issue comes up again. The value of the other timeline is still used for the new situation. New codepen here: https://codepen.io/werkinprogres/pen/jOLwxbG

I'm working on a menu that needs to react differently for mobile vs desktop. I got it working but when I change the viewport width, the animation and reverse animation are bugged one time, after that they adept to the 'new' situation. On browser refresh it also works correctly. Can anyone point out why the animations don't work correctly when changing the viewport width the first time? If I look in the inspector I see the values being being used are still from the other timeline, even though the new screensize is active.. Item 2 slides out a sub-menu, other items should do the same but I left that out for now.