Rotating Button

Customization	Reference
HTML selector	🔧 [data-arts-component-name="RotatingButton"]
Component source	📄 HTML/js/components/RotatingButton.js
Component source (gulp)	📄 SOURCE/components/rotatingButton/RotatingButton.js

Default Options

defaults: {
  rotateAnimation: {
    onScrollSpeed: 2
  },
  delimiter: '  →  ',
  loopRounds: 2
}

HTML Markup

<div
  class="rotating-button js-rotating-button"
  data-arts-component-name="RotatingButton"
  data-arts-component-options="{}"
>
  <a
    class="rotating-button__link subheading js-rotating-button__link"
    href="#my-section"
    rel="nofollow"
  >
    <div class="rotating-button__label js-rotating-button__label">Scroll Down</div>
    <div class="rotating-button__icon js-rotating-button__icon">
      <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <polygon transform="translate(10.000000, 9.160254) rotate(-330.000000) translate(-10.000000, -9.160254)" points="9 -0.839745962 11 -0.839745962 11 19.160254 9 19.160254"></polygon>
        <polygon transform="translate(10.000000, 9.160254) rotate(-30.000000) translate(-10.000000, -9.160254)" points="9 -0.839745962 11 -0.839745962 11 19.160254 9 19.160254"></polygon>
        <polygon transform="translate(10.000000, 9.160254) rotate(-90.000000) translate(-10.000000, -9.160254)" points="9 -0.839745962 11 -0.839745962 11 19.160254 9 19.160254"></polygon>
      </svg>
    </div>
  </a>
</div>