Horizontal sliding

Horizontal sliding is managed by a parent container containing a collection of nested child elements. The parent container has a few classes to make this work: sliding h clip. sliding is the animation itself, h governs the direction (horizontal), and clip ensures that one nested element is active on the page. On initialization the sliding container should point to the child element you wish to be active active1. In the example a tabbed navigation group is used to move between the different nested conrtainers. One more thing, for a desired effect each nested container is set to col12 (100%) to ensure its other siblings are not visible.

Requires Javascript

The sliding container listens for a change between an activeN class. In the code example below there's a simple implementation of managing the class replacement using jQuery.

Linus!
Charlotte!
Penny!
<div class='col12 pad2y clearfix'>
  <div class='tabs col8 margin2 space-bottom'>
       <a href='#active1' class='col4 active'>Pizza dog</a><!--
    --><a href='#active2' class='col4'>Charlotte dog</a><!--
    --><a href='#active3' class='col4'>Penny dog</a>
  </div>
  <div class='clip sliding col12 h active1 fill-green dark center' style='height:100px;'>
    <div class='col12 pad4 animate'>Linus!</div>
    <div class='col12 pad4 animate fill-darken1'>Charlotte!</div>
    <div class='col12 pad4 animate fill-darken2'>Penny!</div>
  </div>
</div>

<script>
$(function() {
    $('.tabs a').click(function() {
        var tabgroup = $(this).parent();
        var slidecontainer = tabgroup.next();
        var tab = $(this).attr('href').split('#')[1];
        $(this).addClass('active').siblings().removeClass('active');
        var current = slidecontainer.attr('class').match(/active[0-9]+/);
        if (current) slidecontainer.removeClass(current[0]);
        slidecontainer.addClass(tab);
        return false;
    });
});
</script>

Vertical sliding

Linus!
Charlotte!
Penny!
<div class='col12 pad2y clearfix'>
  <div class='tabs col8 margin2 space-bottom'>
       <a href='#active1' class='col4 active'>Pizza dog</a><!--
    --><a href='#active2' class='col4'>Charlotte dog</a><!--
    --><a href='#active3' class='col4'>Penny dog</a>
  </div>
  <div class='clip sliding col12 v active1 fill-green dark center' style='height:100px;'>
    <div class='col12 pad4 animate'>Linus!</div>
    <div class='col12 pad4 animate fill-darken1'>Charlotte!</div>
    <div class='col12 pad4 animate fill-darken2'>Penny!</div>
  </div>
</div>

<script>
$(function() {
    $('.tabs a').click(function() {
        var tabgroup = $(this).parent();
        var slidecontainer = tabgroup.next();
        var tab = $(this).attr('href').split('#')[1];
        $(this).addClass('active').siblings().removeClass('active');
        var current = slidecontainer.attr('class').match(/active[0-9]+/);
        if (current) slidecontainer.removeClass(current[0]);
        slidecontainer.addClass(tab);
        return false;
    });
});
</script>

:target

In this example a bottom container is animated into view when a hash #target-1 is present in the url. This hash corresponds with the id attribute of the container (target-1). The bottom container is initially positioned -100% with the class offcanvas-bottom and reset to 0 when its :target event is enabled creating the animated effect. The show link takes care of that for us with target-1 as its href value.

  <div class='col12 pad4 center clip contain fill-grey'>
    <a href='#target-1' class='button'>Show</a>
    <div id='target-1' class='animate offcanvas-bottom pin-bottom keyline-top fill-light pad2'>
      <a href='#target' class='icon close button'></a>
    </div>
  </div>
  

.offcanvas examples

offcanvas rules effect the initial visibility of the element on the page. This is generally paired with a positioning rule like pin-top to govern how the element appears on the page when it's targeted.

Don't want to use :target?

For pages that require scrolling :target might not be the best option. offcanvas additionaly behaves to an active class applied to it via javascript.

.offcanvas-top
.offcanvas-left
.offcanvas-right
<figure class='pad2 contain'>
  <div class='fixed-label label-right fill-darken3 dark small'>.offcanvas-top</div>
  <div class='col12 pad4 center clip contain fill-grey'>
    <a href='#target-2' class='button'>Show</a>
    <div id='target-2' class='animate offcanvas-top pin-top keyline-bottom fill-light pad2'>
      <a href='#offcanvas-examples' class='icon close button'></a>
    </div>
  </div>
</figure>
<figure class='pad2 contain'>
  <div class='fixed-label label-right fill-darken3 dark small'>.offcanvas-left</div>
  <div class='col12 pad4 center clip contain fill-grey'>
    <a href='#target-3' class='button'>Show</a>
    <div id='target-3' class='animate offcanvas-left pin-left col4 keyline-right fill-light pad2 pad4y'>
      <a href='#offcanvas-examples' class='icon close button'></a>
    </div>
  </div>
</figure>
<figure class='pad2 contain'>
  <div class='fixed-label label-right fill-darken3 dark small'>.offcanvas-right</div>
  <div class='col12 pad4 center clip contain fill-grey'>
    <a href='#target-4' class='button'>Show</a>
    <div id='target-4' class='animate offcanvas-right pin-right col4 keyline-left fill-light pad2 pad4y'>
      <a href='#offcanvas-examples' class='icon close button'></a>
    </div>
  </div>
</figure>

Preventing animation transitions on page load

Elements that have the animate class may cause undesired animation glitches on page load. One way to avoid this effect is to enable transitions after the body tag receives an animate class once the DOM has loaded.

<style>
body:not(.animate) .animate {
 -webkit-transition:none;
    -moz-transition:none;
     -ms-transition:none;
         transition:none;
}
</style>

<script>
// Disallow animations on initial page render to
// prevent awkward initial transition animations.
setTimeout(function() { document.body.className += ' animate'; }, 0);
</script>