search

vmitsaras / js-offcanvas

A lightweight, flexible jQuery off-canvas navigation plugin which lets you create fully accessible sidebar or top/bottom sliding (or push) panels with keyboard interactions and ARIA attributes.
http://codepen.io/vmitsaras/pen/gwGwJE
MIT License
270 stars 30 forks source link

speed of animation #34

Closed cekvenich closed 6 years ago

cekvenich commented 6 years ago

Is there a way to make the open faster?

I looked at docs and can't see it.

ps: we use this at metabake.org

vmitsaras commented 6 years ago

You have to change the CSS.

Default

.c-offcanvas {
    transition: transform 300ms cubic-bezier(0.4, 0, 0.6, 1);
}

Change the duration

.c-offcanvas {
     transition-duration: 150ms;
}
cekvenich commented 6 years ago

Worked, thx. I used 200ms.

(you can see the projects at Metabake.org)

vmitsaras commented 6 years ago

OK. I can't find the offcanvas on metabake

cekvenich commented 6 years ago

One example web app: https://github.com/metabake/front-end-frameworks/tree/master/fullPage

but if you want more examples, there are 5, including SPA phonegap: npm -g i mbake mbake

vmitsaras commented 6 years ago

I am glad I was able to help you.

manchumahara commented 4 years ago

@vmitsaras any idea how to control the speed when closes the off canvas ?

vmitsaras commented 4 years ago

Hi @manchumahara, you can use the .c-offcanvas--closing class to control the speed/duration

.c-offcanvas--closing {
    transition-duration: .7s;
    transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1)
}

Some Info: https://material.io/design/motion/speed.html#easing