<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>

<div class="wrapper">

  <div class="arrow"></div>


</div>
<div class="brandBar">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GreenSock-logo-text-outlines.svg"></div>
/* Global styles come from external css https://codepen.io/GreenSock/pen/JGaKdQ*/

.wrapper {
  margin-top:16px;
}



.arrow {
  left:160px;
  display:block;
  position:relative;
  width:33px;
  height:137px;
  background:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/arrow-green-up.png)
}
var degrees = 45;
var tween = gsap.to(".arrow", {
  duration: 4,
  rotation: 360,
  modifiers: {
    rotation: gsap.utils.unitize(function(rotation) {
      //snap to 45 degree increments
      return Math.round(rotation / degrees) * degrees;   
    })
  },
 // in GSAP 3 you can do this instead:
 // snap: {rotation: degrees},
 ease: "none",
 repeat: 6,
})

External CSS

  1. https://codepen.io/GreenSock/pen/JGaKdQ.css

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js
  2. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ModifiersPlugin-latest-beta.js