Trunk.js – Smooth, Responsive & Lightweight Nav Drawer
Trunk.js is created by Robert Luke who is a Front End Developer and Designer. It is a great way to display your menus responsively. On his website Robert mentions that most of the nav drawers are built with jQuery animations and there are “jittery or snapping results”. What’s different in Trunk.js is that the event is triggered with jQuery but all the animations are done with CSS which makes the animation very smooth. Trunks is also built specifically to display well on mini tablets and mobile phones.
Could the animation be faster? Or instant (no animation)?
HI,
changing the timining can fix that e.g.:
header.open,
.content.open
{
-webkit-transform: translate3d(240px,0,0);
-webkit-animation: open .0s ease-in-out;
-moz-transform: translate3d(240px,0,0);
-moz-animation: open .0s ease-in-out;
transform: translate3d(240px,0,0);
animation: open .0s ease-in-out;
}
&
header.close,
.content.close
{
-webkit-transform: translate3d(0,0,0);
-webkit-animation: close .0s ease-in-out;
-moz-transform: translate3d(0,0,0);
-moz-animation: close .0s ease-in-out;
transform: translate3d(0,0,0);
animation: close .0s ease-in-out;
}
chaning these “.0s ease-in-out;” to zero removes the sliding and opens the menu instantly.
I hope it helps.
ChrisCarpenter1 Can you do a fiddle or just put the code somewhere so I can see?
Thanks.
designifyme ChrisCarpenter1 problem solved, thanks 😀
ChrisCarpenter1 Glad you managed to fix it! Thanks for visiting designify:)))