<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.