<body>

<div id="container">
    <div class="box1">Hey</div>
    <div class="box2">Yo</div>
    <div class="box3">Yeah</div>
</div>

<script src="./script.js"></script>
</body>
</html>
#container {
    max-width: 980px;
}

#container > div {
    height: 240px;
    width: 240px;
    text-align: center;
    vertical-align: center;
    margin: 20px;
    float: left;
    line-height: 240px;
}

.box1 {
    background-color: pink;
}

.box2 {
    background-color: aqua;
}

.box3 {
    background-color: darkseagreen;
}
(function(){
'use strict';
console.log('test');

TweenMax.from('.box1', 1 /*2秒間動く*/, {
    scale: 0.5, // 0.5倍のサイズ
    delay: 1 // 1秒後から動き始める
});
TweenMax.to('.box2', 2, {
    y: 300, // y方向(下)へ300px
    ease: Power2.easeOut, //
    repeat: 2
});
TweenMax.to('.box3', 1, {
    x: 200
});

})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js