Adding Scroll Down arrow to Gallery or Slideshow

Site URL: http://trevorglynos.com

I need some help adding a "scroll down" arrow at the bottom of a section on my home page. I want to use this animated arrow from Codepen https://codepen.io/flik185/pen/WxwLdX but there's no way to add code to a gallery on 7.1. I can't add a code block or any other block for that matter since Squarespace doesn't allow that at this time.

URL for my site is http://www.trevorglynos.com I need the arrow on the bottom of the slideshow on the home page.

Any help is appreciated, thanks!

Hi,

Edit this script code

<script>
	$(function() {
      $("#page>article>section:first-child").append('<a href="#" class="next-section"><i class="fa fa-angle-down" aria-hidden="true"></i></a>');
      $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $(" #page>article>section:first-child").next().offset().top}, 500, 'linear');
      });
    });
</script>

to this

<script>
	$(function() {
      $("#page>article>section:first-child").append('<a href="#" class="next-section"><div class="ico animated"><div class="circle circle-top"></div><div class="circle circle-main"></div><div class="circle circle-bottom"></div><svg class="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve" > <defs><clipPath id="cut-off-arrow"><circle cx="306" cy="306" r="287"/></clipPath>   
    <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" /><feBlend in="SourceGraphic" in2="goo" /></filter> 
  </defs><path  class="st-arrow" d="M317.5,487.6c0.3-0.3,0.4-0.7,0.7-1.1l112.6-112.6c6.3-6.3,6.3-16.5,0-22.7c-6.3-6.3-16.5-6.3-22.7,0
					l-86,86V136.1c0-8.9-7.3-16.2-16.2-16.2c-8.9,0-16.2,7.3-16.2,16.2v301.1l-86-86c-6.3-6.3-16.5-6.3-22.7,0
					c-6.3,6.3-6.3,16.5,0,22.7l112.7,112.7c0.3,0.3,0.4,0.7,0.7,1c0.5,0.5,1.2,0.5,1.7,0.9c1.7,1.4,3.6,2.3,5.6,2.9
					c0.8,0.2,1.5,0.4,2.3,0.4C308.8,492.6,313.8,491.3,317.5,487.6z"/></svg></div></a>');
                                                    $('a.next-section').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({ scrollTop: $(" #page>article>section:first-child").next().offset().top}, 500, 'linear');
      });
    });
</script>

Then add this to Code Injection

<style>
  .ico {
  margin: 0 auto;
  text-align: center;
  width: 100px;
  height: 100px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  filter: url("#goo");
}
.ico .circle {
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transform-origin: 0%;
}
.ico .circle.circle-top {
  height: 33.3333333333px;
  width: 41.6666666667px;
  -webkit-animation: blob-1-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
          animation: blob-1-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  z-index: 0;
  top: 0;
}
.ico .circle.circle-bottom {
  height: 33.3333333333px;
  width: 41.6666666667px;
  -webkit-animation: blob-2-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
          animation: blob-2-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  z-index: 9;
  bottom: 0px;
}
.ico .st-arrow {
  fill: #55544F;
  -webkit-animation: scrolly 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite;
          animation: scrolly 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite;
  perspective: 9000px;
  transform: translateZ(0);
  transform-origin: bottom;
}

.svg {
  z-index: 9;
  position: relative;
}

@-webkit-keyframes blob-1-anim {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  14% {
    transform: translateX(-50%) translateY(-8px);
  }
  24% {
    transform: translateX(-50%) translateY(0);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes blob-1-anim {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  14% {
    transform: translateX(-50%) translateY(-8px);
  }
  24% {
    transform: translateX(-50%) translateY(0);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}
@-webkit-keyframes blob-2-anim {
  0% {
    transform: scale(1) translate(-50%, 10px);
  }
  30% {
    transform: scale(1) translate(-50%, 10px);
  }
  70% {
    transform: scale(1) translate(-50%, 10px);
  }
  95% {
    transform: scale(1) translate(-50%, 26px);
  }
  100% {
    transform: scale(1) translate(-50%, 10px);
  }
}
@keyframes blob-2-anim {
  0% {
    transform: scale(1) translate(-50%, 10px);
  }
  30% {
    transform: scale(1) translate(-50%, 10px);
  }
  70% {
    transform: scale(1) translate(-50%, 10px);
  }
  95% {
    transform: scale(1) translate(-50%, 26px);
  }
  100% {
    transform: scale(1) translate(-50%, 10px);
  }
}
@-webkit-keyframes scrolly {
  0% {
    transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
  }
  30% {
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
  }
  70% {
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
  }
  95% {
    transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
  }
  100% {
    transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
  }
}
@keyframes scrolly {
  0% {
    transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
  }
  30% {
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
  }
  70% {
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
  }
  95% {
    transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
  }
  100% {
    transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
  }
}
</style>