Zebra Sphere

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>


 
 

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
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

style.css

.cropper{
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.sphere {
  height: 300px;
  width: 300px;
  transform: translate(0px, -50px);
}

styles

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />

zebra-sphere.markdown

Zebra Sphere

just playing with timelines in GSAP

A Pen by John K. Speck on CodePen.

License.