Slide Up Header + Navigation On Load

---

Description

Add a simple slide up animation to the header and navigation when loading a new page. This plugin uses css editor and works with Squarespace 7.1.

---

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.

// Slide Up Header + Navigation On Load //

header {
  animation: fade-intro-up 2s ease;
  -webkit-animation: fade-intro-up 2s ease;
}

@keyframes fade-intro-up {0%{opacity: 0;-webkit-transform: translate3d(0,50px,0);-moz-transform: translate3d(0,50px,0);-ms-transform: translate3d(0,50px,0);-o-transform: translate3d(0,50px,0);transform: translate3d(0,50px,0);}100%{opacity: 1;-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}}

---

Customize

Change the animation and webkit animation second values to speed up or slow down the slide up animation.

For example: 2s = 2 seconds. If you’d like to slow down the animation longer, simply change 2s to 4s. A smaller number (such as 1s) would speed up the animation.

Do not change any of the @keyframes values.

---