Animated Blog Pagination

ezgif-3-30d4430d7994.gif

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

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 = = */

Step Three

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).

Save and refresh the page. 👍

Moov Labs