Section Transitions

Section transitions are simple and chainable full page transitions. These effects are simple enough to use throughout your page to create a unique separation of your website sections.

This basic transition gives the illusion of cards being shuffled. You can specify if the section shuffles over or under by adding the class shuffle-over-transition or shuffle-under-transition.

View Demo


<!-- Shuffle Over -->
<div class="section black header shuffle-over-transition">
<div class="header-wrapper row valign-wrapper">
  <div class="col s8 offset-s2">
    <h1>Startup!</h1>
    <span class="tagline">Show off your business in a whole new way.</span>
    <button class="read-more"><i class="icon-caret-down"></i></button>
  </div>
</div>
</div>

<!-- Shuffle Under -->
<div class="section black header shuffle-under-transition">
<div class="header-wrapper row valign-wrapper">
  <div class="col s8 offset-s2">
    <h1>Startup!</h1>
    <span class="tagline">Show off your business in a whole new way.</span>
    <button class="read-more"><i class="icon-caret-down"></i></button>
  </div>
</div>
</div>

If you want to have uniformly sized cards, you can use our premade size classes. Just add the size class in addition to the card class.

View Demo


  <div class="flip-out-intro header full-height">
    <div class="fixed-wrapper">
      <div class="background">
        <img src="images/poly5.jpg" alt="">
      </div>
      <div class="header-wrapper row valign-wrapper">
        <div class="col s8 offset-s2 valign">
          <h1>Startup!</h1>
          <span class="tagline">Show off your business in a whole new way.</span>
          <button class="read-more"><i class="icon-caret-down"></i></button>
        </div>
      </div>
    </div>
  </div>

Shuffle
Postcards

Shuffle

Postcards