speckworks · April 11, 2020 16:36
diff --git a/index.html b/index.html
 <div class=cropper>
 <img class="sphere" src="https://cdn1.vectorstock.com/i/thumb-large/47/65/zebra-pattern-eps-10-vector-10114765.jpg" alt="Zebra Pattern EPS 10"> 
 </div>


 
 
diff --git a/script.js b/script.js
 var tl = new TimelineLite;

 tl.to(".cropper", 2, { 
  // transformOrigin: "130px 50px", 
  rotation: 160,
  x: 500,
  ease: Sine.easeIn,
  // force3d: true
 })
 .to(".cropper", 2, {
  rotation: 320,
  x: 1000
 })

diff --git a/scripts b/scripts
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
diff --git a/style.css b/style.css
 .cropper{
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
 }

 .sphere {
  height: 300px;
  width: 300px;
  transform: translate(0px, -50px);
 }
diff --git a/styles b/styles
 <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
diff --git a/zebra-sphere.markdown b/zebra-sphere.markdown
	<div class=cropper>
	<img class="sphere" src="https://cdn1.vectorstock.com/i/thumb-large/47/65/zebra-pattern-eps-10-vector-10114765.jpg" alt="Zebra Pattern EPS 10">
	</div>