Elements with Fixed Positions - Slidebars Advanced Usage

Slidebars uses CSS transitions and transformations for its animation. There is a known issue when transforming elements which contain children with position: fixed; making them behave more like position: absolute;.

Elements with a fixed position can be transformed correctly on their own, so the solution is to place your fixed elements outside of your canvas container, as a direct child of the <body>. Then, simply give the element the canvas attribute.

<!doctype html>

    <div id="fixed-position" canvas="">

    <div canvas="container">

    <div off-canvas="id-1 left reveal">

    <div off-canvas="id-2 right push">

Hi, I'm Adam.

I'm a freelance website designer and front-end developer in BCN.

Left and Right

Top and Bottom

Multiple Same Side

Animation Styles

Mobile Only

Custom Widths and Heights

Custom Transition Durations