Sidebar Animation Not Working
I'm trying to apply animation to an element in a sidebar template. On the front end it doesn't appear. I can see the element in inspector but the animation doesn't fire. Any thoughts?
I'm trying to apply animation to an element in a sidebar template. On the front end it doesn't appear. I can see the element in inspector but the animation doesn't fire. Any thoughts?
Comments
Hi,
Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.
It is always a good idea to also attach a screenshot showing your issue.
Thanks
Here's a link to the working site. Again it's in the side menu:
Attached are screen shots as well
The Sidebar menu template is loaded immediately with the page load, but it is just placed off-screen. It means that animations trigger right away when the page loads, and they are not visible when the sidebar is opened.
Unfortunately, animations will not work there, and there is no workaround for that.
Best regards
This explanation doesn't make sense. If the menu is off-screen and the animation triggers right away, then I would see the text in the menu. I'll keep looking for another route.
To help clarify why the animations aren't appearing as expected: the sidebar is actually loaded immediately when the page starts.
It is present in the site's code (DOM) from the very beginning; it is simply positioned outside the visible window (off-screen) and "slides" into view only after you click the hamburger menu.
Because the sidebar elements are already loaded when the page opens, any "entrance" or "loading" animations trigger at the moment of page load. By the time you click the menu to reveal the sidebar, the animations have already finished playing while the sidebar was still hidden off-screen.
Best regards