Animating a sidebar
Hey , folks . Can anyone provide any advice on animating a sidebar ? I 'm trying to have a right -hand sidebar slide in from the right like a drawer but no matter what I do , I cannot seem to get it to work . The sidebar is in a div and has a show /hide formula applied based on button click event . Any pointers ? The have a class “open ” the moves it back in I set it on background as a test , which worked , but width doesn 't do anything . I 'm likely doing it wrong 💯 I dunno if this helps , I did a video on recreating Bubble 's floating groups in Toddle and I covered animating the side bar . It was a while ago and there might be easier ways now (not been Toddling much the last month or so ) but worth seeing if it covers what you 're looking for . https://youtu.be/GzAhzO522UM?si=_7JbdL6xn6E8y1Pb Nice one , @Andreas Møller . Thanks for putting that together and for setting up transform as a transition property /attribute . Managed to get it to work (kinda ) . My problem is that it 's a right -hand sidebar , so it 's add a scroll bar . I managed to sort that by adding overflow-x: hidden to the root div but still messes up container alignment . Moved it to the left -hand side , which is better but still got to figure out alignment as it 's not removed from the flow when translating it seems , so all the width , margin , etc . , remains in place , which affects the visible container . Fun times ! 😄 Everything is positioned relative as opposed to absolute . That answer appears to be "yes " ? ! So if you are building a scrolling website with a lot of content this might be an issue @gazinhio
I dunno if this helps , I did a video on recreating Bubble 's floating groups in Toddle and I covered animating the side bar . It was a while ago and there might be easier ways now (not been Toddling much the last month or so ) but worth seeing if it covers what you 're looking for . https://youtu.be/GzAhzO522UM?si=_7JbdL6xn6E8y1Pb Thanks , mate . This also helped . I did end up trying width as well , which works . In the end , I opted for animation on max-width as I couldn 't figure out how to cleanly address the space left with transform on translate . Looks smooth , aside from application of padding on display . Shame there 's no visibility animation . Been trying to reverse -engineer Todoist 's sidebar and they seem to be doing something with visibility . Nailed it I think . Using max-width as the animation on the main sidebar div , I set a child container div to have the padding and have a show /hide set . This means that padding is not applied during the transition and makes the transition look smooth and also ensures child elements are not visible when reducing the width (I hadn 't noticed this until there was stuff in the sidebar . This worked but you could see elements being "drawn " when showing the sidebar due to the max -width transition , so I set another show /hide on the div containing the elements based and set a sleep action on button click to half the transition time after the sidebar variable is set . This means the elements don 't appear to be drawn and ease in /out with the transition . Unnecessarily complicated because I could not figure out the translate gap . 😄 🔥2
.jpeg/public)