float side cart

index.md

  <template>
    <transition name="fade">
      <div @click="submitCart" class="btn-float-cart" v-show="isVisible">
        <img src="{{ 'cart-icon.svg' | asset_url }}" />
      </div>
    </transition>
  </template> 

  new Vue({
    el: '#side-cart-js',
    name: 'SideCart',
    data() {
      return {
        isVisible: false
      }
    },
    mounted() {
      window.addEventListener('scroll', this.checkDisplay, { passive: true })
    },
    methods: {
      checkDisplay() {
        let observer = new IntersectionObserver((entries) => {
          this.isVisible = entries[0].isIntersecting ? false : true
        })
        observer.observe(document.querySelector('.product__cart__btn'))
      },
      submitCart() {
        document.querySelector('.shopify-product-form').submit()
      }
    }
  })

.btn-float-cart {
  cursor: pointer;
  position: fixed;
  right: 0px;
  bottom: 50%;
  z-index: 200;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff;
  border-radius: 20%;
  width: 60px;
  height: 60px;
  border: 1px solid black;
  transform: scaleX(-1);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.6s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  right: -70px;
}

test.css

.puppy {
	animation: fade-in 2.5s ease-out;
}

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