<h1>GSAP 3 wrap() / wrapYoyo() utilities</h1>
<div id="ball1" class="ball"></div>
<div id="ball2" class="ball"></div>


<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>
body {
  overflow-x: hidden;
  background-color: black;
  color: white;
  font-family: "Signika Negative", Arial, sans-serif;
  font-weight: 300;
}

.ball {
  width: 100px;
  height: 100px;
  background: dodgerblue;
  border-radius: 50%;
  margin: 10px 0;
  will-change: transform;
}

h1 {
  margin: 20px;
}
gsap.defaults({duration:20, ease:"none"});

var windowWrap = gsap.utils.wrap(0, window.innerWidth),
    windowYoyo = gsap.utils.wrapYoyo(0, window.innerWidth); //to make the ball look like it's bouncing off the edge of the screen, just subtract 100 (the width of the ball) from the window.innerWidth

gsap.to("#ball1", {
  x: 10000,
  modifiers: {
    x: x => windowWrap(parseFloat(x)) + "px"
  }
});

gsap.to("#ball2", {
  x: 10000,
  modifiers: {
    x: x => windowYoyo(parseFloat(x)) + "px"
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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