<!--[1] Article page: intro text-->
  <article layout="centered" class="-text-center" skin="dark">
    <h1 class="-text-heading">Transitions</h1>
    <p class="-text-larger -text-italic -ph-4">
      Predefined page & section transitions. <br/> Ready to use out of the box.
    <a href="#" onclick="FOLIO.next();" class="-button -text-bold">View transitions</a>
    <a href="#" onclick="FOLIO.goto(16);" class="-button -button-text -color-grey -mt-3">See how it's done</a>

  <!-- [2 to 15] Photo pages with applied transition  -->
  <img src="photo-01.jpg" transition="left"       alt="next: right" />
  <img src="photo-02.jpg" transition="right"      alt="next: up" />
  <img src="photo-01.jpg" transition="up"         alt="next: down" />
  <img src="photo-02.jpg" transition="down"       alt="next: scale-left" />
  <img src="photo-01.jpg" transition="scale-left" alt="next: scale-up" />
  <img src="photo-02.jpg" transition="scale-up"   alt="next: scale-down" />
  <img src="photo-01.jpg" transition="scale-down" alt="next: fold-left" />
  <img src="photo-02.jpg" transition="fold-left"  alt="next: fold-right" />
  <img src="photo-01.jpg" transition="fold-right" alt="next: fold-up" />
  <img src="photo-02.jpg" transition="fold-up"    alt="next: fold-down" />
  <img src="photo-01.jpg" transition="fold-down"  alt="next: fade" />
  <img src="photo-02.jpg" transition="fade"       alt="next: scale" />
  <img src="photo-01.jpg" transition="scale"      alt="next: none" />
  <img src="photo-02.jpg" transition="none"       alt="next: Transitions guidlines page" />
  <!-- [16] Article page: How it's done-->
  <article transition="fold-left" hash="how-its-done">
    <h2 class="-mb-3">How it's done?</h2>
    <p class="-text-medium">Transition guidelines:</p>
    <ul class="-text-medium">
      <li>Use transition attribute on page element to define incoming transition type.</li>
      <li>Types of transitions: <br/>
        <span class="-text-smaller -color-red">
          'left' (default), 'right', 'up', 'down', <br/>
          'scale-left', 'scale-right', 'scale-up', 'scale-down',<br/>
          'fold-left', 'fold-right', 'fold-up', 'fold-down',<br/>
          'fade', 'scale', 'none'
        <pre><code class="-text-smaller">&lt;img src="photo.jpg&quot; <strong>transition=&quot;fold-down&quot;</strong>/&gt;</code></pre>
    <p class="-text-medium">Also, use <a href="http://docs.foliodot.com/options">configuration object</a> to:</p>
      <li>Define default project page transition type</li>
      <li>Define default thumbnails page transition type </li>
      <li>Define transition type between project and thumbnails section</li>
    <article layout="centered" transition="fold-left">
    <a href="#" onclick="FOLIO.toggle('sidebar');" class="-text-bold">
      About this project
    <p class="-color-grey -mt-4">More pens:</p>
    <a href="https://codepen.io/foliodot/full/dGBjBR/" target="_blank">Narrative demo</a>
    <a href="https://codepen.io/foliodot/full/MKMZaY/" target="_blank">Photo gallery</a>

  Created with Foliodot starter template: https://foliodot.com 
  Documentaion: http://docs.foliodot.com/
  Images: https://unsplash.com/ 

    <a href="https://foliodot.com" target="_blank">Foliodot</a> is simplest starter template for photogrpahy portfolio websites and narrative photo projects:
  <ul class="-ml-3">
    <li>Minimalistic markup</li>
    <li>Aesthetic simplicity</li>
    <li>Photobook layouts</li>
    <li>Versatile options</li>
  <p>You may actually enjoy making your website.</p>
  <p>See <a href="https://foliodot.com" target="_blank">foliodot.com</a></p>
    <a href="https://codepen.io/foliodot/" target="_blank">
      More pens
Used event css helper class ".on-photo-fit-cover" 
to style elements when image fit is in cover mode. 
Rule excluded for last two pages: 16 & 17
Documentation: http://docs.foliodot.com/selectors#event
.on-photo-fit-cover:not(.on-page-16):not(.on-page-17) .project {
    color: #fff;

View Compiled
 - Documentaion: http://docs.foliodot.com/options
 - This demo uses foliodot javascript which is subject 
   to the terms at https://foliodot.com/legal/eula

  project: {
    views : 'normal cover',
    transition: 'fade' //transition attribute on page element have priority
  thumbnails: {
    transition: 'up'
  content: {
    transition: 'fold-up'

External CSS

  1. https://foliodot.com/assets/css/folio.min.css

External JavaScript

  1. https://foliodot.com/assets/js/folio.min.js