As always you guys are awesome!
We’ve actually discussed the push / drawer effect at length, and during development I tried a few different ways to integrate it with our Navbar widget. Unfortunately, in order to achieve that sort of layering animation, you must structure the divs in a very specific way.
If you look at their source, you can see that they are separating the main content into a wrapper div, with a navigation div at the same level. This is completely different from how we structure our Navbar widget, as our goal was to make the div structure as simple as possible.
Perhaps in the future we’ll release a “Drawer” component that provides this type of layout. It does seem a bit different than the typical responsive nav, and could be very powerful for app-like sites.
As always, if you’re curious about how our widgets work, you are free to look through
webflow.js in our published and exported code
thanks for the response! I will look into the webflow.js and see what I can sort out. In the meantime I’m using pre “baked” divs that are simply hidden on the outer margin as a prototype for an E-commerce for deep level phone navigation with jQuery animate. I can’t show that link publicly (yet) but if I get it working decently I’ll copy a version. Thanks again!
Nice! Also keep in mind that the open source animation library we include in webflow.js:
tram is much more performant on mobile devices than jQuery.animate. Especially when using x,y,scale,rotate.
You can find more information about tram here, along with a few examples:
You did mention tram to me before and I read a bit about it. However now knowing that performance has a leg up I will further investigate. Thanks again Dan!