Animated Blog Pagination

Look Demo

Add a clean pagination to your blog – for desktop devices (641px wide or higher). This plugin uses css editor and works with the Brine template family.

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

/* = = ANIMATED BLOG PAGINATION START = = */

// — — VARIABLES — — //

// STYLES //
@ABP_arrow-background-color: #0d0d0c;
@ABP_arrow-color: #fafafa;
@ABP_arrow-size: 20px;
@ABP_arrow-thickness: 4px;

@ABP_content-background-color: #0d0d0c;
@ABP_content-border-radius: 5px;
@ABP_label-color: #888888;
@ABP_title-color: #fafafa;
@ABP_meta-color: #888888;

/* — — CODE — — */
body.collection-type-blog.view-item {
  .BlogItem-pagination {
    &:after {
      display: none;
    }

    .BlogItem-pagination-link {
      .BlogItem-pagination-link-icon {
        width: calc(@ABP_arrow-size / 2);
        height: @ABP_arrow-size;
        stroke-width: @ABP_arrow-thickness;
      }

      .BlogItem-pagination-link-meta {
        line-height: 1em;
      }
    }

    // mobile styles
    @media only screen and (min-width: 0px) and (max-width: 641px) {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;

      .BlogItem-pagination-link {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        min-width: 250px;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
      }
    }

    // desktop styles
    @media only screen and (min-width: 641px) {
      position: fixed;
      top: 50%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 100%;
      height: 0;
      right: 0;
      left: 0;
      opacity: 0;
      -webkit-animation: fade-in .4s .1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      animation: fade-in .4s .1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      z-index: 999;

      @-webkit-keyframes fade-in {
        0% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }

      @keyframes fade-in {
        0% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }

      .BlogItem-pagination-link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: auto;

        // arrow
        .BlogItem-pagination-link-icon {
          background: @ABP_arrow-background-color;
          stroke: @ABP_arrow-color;
          margin: 0;
          padding: 13px;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          -webkit-transition: opacity .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: opacity .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s .4s cubic-bezier(0.165, 0.84, 0.44, 1);
          will-change: transform;
          z-index: 10;
          opacity: 1;
        }

        // content
        .BlogItem-pagination-link-content {
          position: absolute;
          width: auto;
          max-width: 300px;
          background: @ABP_content-background-color;
          padding: 15px 20px;
          -webkit-transition: opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
          will-change: transform;
          opacity: 0;
          pointer-events: none;
          z-index: 20;
          font-size: 40px;

          .BlogItem-pagination-link-label {
            color: @ABP_label-color;
          }

          .BlogItem-pagination-link-title {
            color: @ABP_title-color;
          }

          .BlogItem-pagination-link-meta {
            color: @ABP_meta-color;
          }
        }

        // prev pagination
        &.BlogItem-pagination-link--prev {
          margin-right: auto;

          .BlogItem-pagination-link-icon {
            border-radius: 0 @ABP_content-border-radius @ABP_content-border-radius 0;
          }

          .BlogItem-pagination-link-content {
            left: 0;
            -webkit-transform: translate3d(-30px, 0, 0);
            transform: translate3d(-30px, 0, 0);
            border-radius: 0 @ABP_content-border-radius @ABP_content-border-radius 0;
          }

          &:hover {
            .BlogItem-pagination-link-icon {
              -webkit-transform: translate3d(-30px, 0, 0);
              transform: translate3d(-30px, 0, 0);
            }
          }
        }

        // next pagination
        &.BlogItem-pagination-link--next {
          margin-left: auto;

          .BlogItem-pagination-link-icon {
            border-radius: @ABP_content-border-radius 0 0 @ABP_content-border-radius;
          }

          .BlogItem-pagination-link-content {
            right: 0;
            -webkit-transform: translate3d(30px, 0, 0);
            transform: translate3d(30px, 0, 0);
            border-radius: @ABP_content-border-radius 0 0 @ABP_content-border-radius;
          }

          &:hover {
            .BlogItem-pagination-link-icon {
              -webkit-transform: translate3d(30px, 0, 0);
              transform: translate3d(30px, 0, 0);
            }
          }
        }

        // all hover
        &:hover {
          .BlogItem-pagination-link-icon {
            opacity: 0;
            -webkit-transition: opacity .0s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .2s cubic-bezier(0.165, 0.84, 0.44, 1);
            transition: opacity .0s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .2s cubic-bezier(0.165, 0.84, 0.44, 1);
            transition: transform .2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .0s cubic-bezier(0.165, 0.84, 0.44, 1);
            transition: transform .2s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .0s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .2s cubic-bezier(0.165, 0.84, 0.44, 1);
          }

          .BlogItem-pagination-link-content {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            opacity: 1;
            pointer-events: auto;
          }
        }
      }
    }
  }
}

/*
  Developed by ANIagency LLC
  This work is licensed under a Creative Commons Attribution 4.0 International License.
  v1.04
*/

/* = = ANIMATED BLOG PAGINATION END = = */

Customize

Change the arrow and background values to your liking. These can be found under Styles near the top of the plugin code.

Click here to see this plugin in action. Please note that this plugin was designed for desktop devices only (641px wide or higher).

Notes

No notes.

BlogsMoov Labs