GSAP basic repeat and onRepeat

gsap-basic-repeat-and-onrepeat.markdown

GSAP basic repeat and onRepeat

A Pen by GreenSock on CodePen.

License.

index.html

<link href='https://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<div id="demo">
    <div class="box green" id="greenBox">0</div>
</div>

script.js

//basic illustration of TweenMax's repeat, repeatDelay, yoyo and onRepeat
var box = document.getElementById("greenBox"),
    count = 0,
    tween;

tween = gsap.to(box, {duration: 2, left:"700px", repeat:10, yoyo:true, onRepeat:onRepeat, repeatDelay:0.5, ease:"none"});

function onRepeat() {
  count++;
  box.innerHTML = count;
  gsap.set(box, {backgroundColor:"hsl(" + Math.random() * 255 + ", 90%, 60%)"});
}							

scripts

<script src="https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"></script>

style.css

body {
  background-color:#1d1d1d;
  font-family: "Asap", sans-serif;
  color:#989898;
  margin:10px;
  font-size:16px;
}

#demo {
  height:100%;
  position:relative;
  overflow:hidden;
}
.box {
  width:100px;
  height:100px;
  position:relative;
  border-radius:6px;
  margin-top:4px;
  text-align:center;
  line-height:100px;
  color:black;
  font-size:80px;
}

.green{
  background-color:#6fb936;
}