I’m really happy with the feedback from the offcanvas component. It’s been interesting to see all the different ways it’s being used. Originally it was quite a simple component, built for building offcanvas menus.

Some of the use cases I’ve seen directly from our users has been..

  • Revealing forms for picking up leads or taking bookings.
  • Using as a sidebar for secondary content.
  • Popups appearing the bottom of the viewport.
  • Full screen overlay menus.

As the common uses have become known, I’ve been finding more things to add that can help create better user experiences based on these use cases. Some of the features you can expect in the next update are focused around accessibility and with the offcanvas, one of the main things will be being able to move the focus to any selector inside the offcanvas as it opens.

This is something that has been requested of the modal component in the past. It not only ensures the site is more accessible for keyboard users, but also provides a better experience for all users.

For eg, if you’re using the offcanvas to reveal a form that you would like the site visitor to fill in, having the focus already inside the first input as soon as the offcanvas opens makes for a much smoother experience as the user can start typing immediately.

The other feature being added to the offcanvas is the ability to add your own transition-timing-function so it can better match transitions on the rest of your site to give a more consistent feel.

Pushing the Content

One of the features that hasn’t made it into the release is being able to push the site content as the offcanvas opens.

Here is the desired effect..

The reason for not adding this into the component directly is a technical one. Pushing the content involves adding styles to unknown content that is outside of the component itself.

Although it would be possible to add this as a feature, which would include adding a bunch of JS to find out what is on the page and find out the width of the offcanvas, it’s actually pretty simple to add yourself using a few lines of CSS. So to keep things lightweight, it makes more sense just to explain how this can already be done using the existing functionality.

Using the ‘off-canvas-toggled’ Class

When the offcanvas element is opened a class is added to the body element (‘off-canvas-toggled’). This class is removed when the offcanvas is closed. This is what we’ll be using to create the push effect.

Firstly, the structure needs to be set up in a particular way. The entire page (or template) will need to be wrapped inside a container div. The offcanvas can then either come before or after this container div, but not inside of it.

The idea is that once we open the offcanvas, we will only need to move that one container div to push all of the site content at the same time.

Let’s say the container div has the class ‘site-container’. Then this would be the CSS to add to a stylesheet in Oxygen to create the push effect..

.site-container {
          transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: transform .5s cubic-bezier(0.77, 0, 0.175, 1);
}

.off-canvas-toggled .site-container {
          transform: translateX(300px);
  -webkit-transform: translateX(300px);
}

The 300px will need to be changed to match the width you have set for the offcanvas. If you are adding the offcanvas from the right then this would need to be -300px. If you are adding the offcanvas from the top or bottom then you’ll need to use translateY instead of translateX.

The transition timing will need to match the transition timing of the offcanvas to create the effect that it’s being pushed by the offcanvas. (Or of course you could be creative by adding a delay or changing the timing function which can look nice if done well, but can look very bad if not)

Note – the ‘cubic-bezier(0.77, 0, 0.175, 1)’ part of the transition is the default transition timing function that is added to the offcanvas by default. As mentioned earlier, this will be customisable from inside the settings in the upcoming version.