<div class="wrap">
    <!-- アニメーション確認用プログレスバー -->
    <div class="progress">
        <div class="ball red"></div>
    </div>
    
    <!-- コントローラー -->
    <ul class="remocon">
        <!-- 再生 -->
        <li id="play">play</li>
	<!-- 一時停止 -->
        <li id="pause">pause</li>
	<!-- 初期位置から再生 -->
        <li id="restart">restart</li>
	<!-- 逆再生 -->
        <li id="reverse">reverse</li>
	<!-- 続きから再生 -->
        <li id="resume">resume</li>
	<!-- 3秒経過位置に移動 -->
	<li id="time">time (3 seconds)</li>
	<!-- 5秒経過地点に移動 -->
        <li id="seek">seek (5 seconds)</li>
	<!-- 再生速度を2倍速に変更 -->
      	<li id="timeScaleFast">timeScale (2)</li>
	<!-- 再生速度を0.2倍速に変更 -->
        <li id="timeScaleSlow">timeScale (0.2)</li>
	<!-- アニメーションの全体の再生秒数を1秒に変更 -->
        <li id="duration">duration (1 seconds)</li>
	<!-- アニメーションの全体の再生秒数を10秒変更(リセット) -->
        <li id="durationReset">duration (reset)</li>
    </ul>
</div>

.progress {
    position: relative;
    width: 100%;
    height: 8px;
    background-color: #ddd;
    border-radius: 5px;
}

.ball {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
}

.ball.red{
    background-color: red;
}


.wrap{
    width: 250px;
    height: 100vh;
    margin: 0 auto;
    display: grid;
    place-items: center;
    padding: 0 5%
}

.remocon {
    display: flex;
    align-items: center;
    flex-wrap:wrap;
}

.remocon li {
    cursor: pointer;
    padding: 0.2em 1em;
    border: 1px solid #000;
    font-size:13px;
    border-radius: 50px;
    background-color: #f2f2f2;
    list-style:none;
    margin-bottom:0.5em;
}

.remocon li:not(:last-child){
    margin-right: 1em;
}

//10秒かけてballが右に移動する
const anime = gsap.to('.ball', 10, {
  left: '100%',
  paused:true,
  ease:'none'
})

//ボタンをクリックした際に使用する関数を定義
function clickFunction(id,func) {
 document.getElementById(id).addEventListener('click',()=>{
    func()
  })  
}
//再生
clickFunction('play',()=> anime.play())
//一時停止
clickFunction('pause',()=> anime.pause())
//初期位置から再生
clickFunction('restart',()=> anime.restart())
//逆再生
clickFunction('reverse',()=> anime.reverse())
//停止前の挙動の続きから再生
clickFunction('resume',()=> anime.resume())
//3秒経過位置に移動
clickFunction('time',()=> anime.time(3))
//5秒経過地点に移動
clickFunction('seek',()=> anime.seek(5))
//再生速度を2倍速に変更
clickFunction('timeScaleFast',()=> anime.timeScale(2))
//再生速度を0.2倍速に変更
clickFunction('timeScaleSlow',()=> anime.timeScale(.2))
//アニメーション再生の総合秒数を1秒に変更
clickFunction('duration',()=> anime.duration(1))
//アニメーション再生の総合秒数を10秒に変更（リセット）
clickFunction('durationReset',()=> anime.duration(10))