<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>
<div class="wrapper">
<div class="box green"></div>
<div class="box orange"></div>
<div class="box grey"></div>
</div>
<div class="brandBar">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GreenSock-logo-text-outlines.svg"></div>
/* Global styles come from external css https://codepen.io/GreenSock/pen/JGaKdQ*/
.wrapper {
margin-top:16px;
}
body {
height: 100vh;
padding: 0;
margin: 0;
display: flex;
align-items: center; justify-content: flex-start
}
.box {
display:block;
position:relative;
width: 60px;
height: 60px;
margin: 2rem;
}
.brandBar {
display: fixed;
top: 0;
right: 0;
}
gsap.to(".box", {
delay: 2,
duration: 2,
x: (index, target) => {
console.log(index, target);
return (index + 1) * 100 // 100, 200, 300
}
})
