<section class="sec">
  <h2>Methods</h2>
  <div class="sec_content">
    <h3>to<button id="restart_to" class="restartBtn">restart</button></h3>
    <pre>gsap.to(".box", { x: 200 })</pre>
    <div id="box_to" class="box"></div>
  </div>
  <div class="sec_content">
    <h3>from<button id="restart_from" class="restartBtn">restart</button></h3>
    <pre>gsap.from(".box", { x: 200 })</pre>
    <div id="box_from" class="box"></div>
  </div>
  <div class="sec_content">
    <h3>fromTo<button id="restart_fromTo" class="restartBtn">restart</button></h3>
    <pre>gsap.fromTo('.box', {x: -200},{x: 200})</pre>
    <div id="box_fromTo" class="box"></div>
  </div>
  <div class="sec_content">
    <h3>set<button id="restart_set" class="restartBtn">restart</button></h3>
    <pre>gsap.set('.box', {x: 200})</pre>
    <div id="box_set" class="box"></div>
  </div>
</section>

<section class="sec">
  <h2>Properties</h2>
  <div class="sec_content">
    <h3>duration<button id="restart_duration" class="restartBtn">restart</button></h3>
    <pre>gsap.to(".box", {x: 200, duration: 5})</pre>
    <div id="box_duration" class="box"></div>
  </div>
  <div class="sec_content">
    <h3>delay<button id="restart_delay" class="restartBtn">restart</button></h3>
    <pre>gsap.to(".box", {x: 200, delay: 2})</pre>
    <div id="box_delay" class="box"></div>
  </div>
  <div class="sec_content">
    <h3>repeat<button id="restart_repeat" class="restartBtn">restart</button></h3>
    <pre>gsap.to(".box", {x: 200, repeat: -1})</pre>
    <div id="box_repeat" class="box"></div>
  </div>
  <div class="sec_content">
    <h3>yoyo<button id="restart_yoyo" class="restartBtn">restart</button></h3>
    <pre>gsap.to(".box", {x: 200, repeat: -1, yoyo: true})</pre>
    <div id="box_yoyo" class="box"></div>
  </div>
</section>

<section class="sec">
  <h2>Easing</h2>
  <div class="sec_content">
    <h3>none<button id="restart_none" class="restartBtn">restart</button></h3>
    <pre>gsap.to(".box", { x: 200, ease: 'none' })</pre>
    <div id="box_ease_none" class="box"></div>
  </div>
  <div class="sec_content">
    <h3>power1(default)<button id="restart_power1" class="restartBtn">restart</button></h3>
    <pre>gsap.to(".box", { x: 200, ease: 'power1.out' })</pre>
    <div id="box_ease_power1" class="box"></div>
  </div>
  <div class="sec_content">
    <h3>back<button id="restart_back" class="restartBtn">restart</button></h3>
    <pre>gsap.to(".box", { x: 200, ease: 'back.out' })</pre>
    <div id="box_ease_back" class="box"></div>
  </div>
  <div class="sec_content">
    <h3>bounce<button id="restart_bounce" class="restartBtn">restart</button></h3>
    <pre>gsap.to(".box", { x: 200, ease: 'bounce.out' })</pre>
    <div id="box_ease_bounce" class="box"></div>
  </div>
</section>

<section class="sec">
  <h2>Handling<button id="restart_handling" class="restartBtn">restart</button></h2>
  <div class="sec_content">
    <pre>gsap.to('.box', {
  x: 200, repeat: 2,
  onComplete: () => { console.log('complete') },
  onStart: () => { console.log('start') },
  onUpdate: () => { console.log('update') },
  onRepeat: () => { console.log('repeat') },
})</pre>
    <div id="box_handling" class="box"></div>
  </div>
</section>

<section class="sec">
  <h2>Tween control</h2>
  <div class="sec_content">
    <pre>let tween = gsap.to('.box', {x: 200, rotation: 360, duration: 5})
tween.play()</pre>
    <div id="box_tweenControl" class="box"></div>
    <div class="btnsRow">
      <button id="play">play</button>
      <button id="pause">pause</button>
      <button id="resume">resume</button>
      <button id="reverse">reverse</button>
      <button id="restart">restart</button>
    </div>
  </div>
</section>

<section class="sec">
  <h2>Stagger<button id="restart_stagger" class="restartBtn">restart</button></h2>
  <div class="sec_content">
    <pre>gsap.to(".box", { x: 200, stagger: 0.2 })</pre>
    <div class="box box_stagger"></div>
    <div class="box box_stagger"></div>
    <div class="box box_stagger"></div>
    <div class="box box_stagger"></div>
    <div class="box box_stagger"></div>
  </div>
</section>

<section class="sec">
  <h2>SVG attributes<button id="restart_svg" class="restartBtn">restart</button></h2>
  <div class="sec_content">
    <pre>gsap.to('.rect', {x: 150, y: 150, attr: { rx: 25 }})</pre>
    <svg id="svg" class="svg" viewBox="0 0 200 200">
      <rect id="svg_box" fill="#ffd700" x="0" y="0" width="50" height="50" rx="5" />
    </svg>
  </div>
</section>

<section class="sec">
  <h2>Timeline<button id="restart_timeline" class="restartBtn">restart</button></h2>
  <div class="sec_content">
    <pre>gsap.timeline({defaults: {opacity: 0}})
  .to('.box1', {x: 200})
  .to('.box2', {x: -200})
  .to('.box3', {x: 200})</pre>
    <div id="box_timeline1" class="box"></div>
    <div id="box_timeline2" class="box"></div>
    <div id="box_timeline3" class="box"></div>
  </div>
</section>

@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

$urbanist: 'Urbanist', sans-serif;
$black: #272727;
$gray: #aaaaaa;
$white: #ffffff;
$yellow: #ffd700;

* {
  box-sizing: border-box;  
}

body {
  font-family: $urbanist;
  padding: 40px 16px;
  overflow-x: hidden;
  background: $black;
  color: $white;
}

button {
  display: block;
  font-size: 16px;
  padding: 8px 16px;
  color: $white;
  background: $black;
  border: 1px solid $white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    opacity: 0.7;
  }
}

.sec {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding: 40px;
  border: 2px dotted $white;
  border-radius: 20px;
  
  &:not(:last-of-type) {
    margin-bottom: 40px;
  }
  
  &_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    &:not(:last-of-type) {
      margin-bottom: 40px;
    }
  }
}

.sec h2,
.sec h3 {
  display: flex;
  align-items: center;
  
  button {
    margin-left: 12px;
  }
}

.sec h2 {
  font-size: 40px;
  font-weight: 700;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid $gray;
}

.sec h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  width: 100%;
}

.sec pre {
  width: 100%;
  font-size: 16px;
  line-height: 150%;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: #2e2a17;
  border-radius: 4px;
  border: 1px solid rgba($white, 0.2);
  white-space: break-spaces;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  color: $black; 
  background: $yellow;
  
  &:not(:last-of-type) {
    margin-bottom: 8px;
  }
}

.btnsRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 20px;
  
  button {
    width: min(100%, 120px);
  }
}

.svg {
  border: 1px solid $white;
  width: min(100%, 300px);
}

const defaultDistance = 200
const defaultDuration = 1

// animation定義(最初に1度実行される)
const anims = {
  // Methods
  to: gsap.to('#box_to', { x: defaultDistance, duration: defaultDuration }),
  from: gsap.from('#box_from', { x: defaultDistance, duration: defaultDuration }),
  fromTo: gsap.fromTo(
    '#box_fromTo', 
    {x: defaultDistance * -1, duration: defaultDuration},
    {x: defaultDistance, duration: defaultDuration}
  ),
  set: gsap.set('#box_set', {x: defaultDistance}),  
  
  // Properties
  duration: gsap.to("#box_duration", { x: defaultDistance, duration: 5 }),
  delay: gsap.to("#box_delay", { x: defaultDistance, duration: defaultDuration, delay: 2 }),
  repeat: gsap.to("#box_repeat", { x: defaultDistance, duration: defaultDuration, repeat: -1 }),
  yoyo: gsap.to("#box_yoyo", { x: defaultDistance, duration: defaultDuration, repeat: -1, yoyo: true }),
  
  // Easing
  none: gsap.to("#box_ease_none", { x: defaultDistance, duration: defaultDuration, ease: 'none' }),
  power1: gsap.to("#box_ease_power1", { x: defaultDistance, duration: defaultDuration, ease: 'power1.out' }),
  back: gsap.to("#box_ease_back", { x: defaultDistance, duration: defaultDuration, ease: 'back.out' }),
  bounce: gsap.to("#box_ease_bounce", { x: defaultDistance, duration: defaultDuration, ease: 'bounce.out' }),
  
  // Handling
  handling: gsap.to('#box_handling', {
    x: defaultDistance, duration: 3, repeat: 2,
    onComplete: () => { console.log('complete') },
    onStart: () => { console.log('start') },
    onUpdate: () => { console.log('update') },
    onRepeat: () => { console.log('repeat') },
  }),
  
  // Stagger
  stagger: gsap.to(".box_stagger", { x: defaultDistance, duration: 2, stagger: 0.2 }),
  
  // Svg
  svg: gsap.to('#svg_box', {
    x: defaultDistance - 50,
    y: defaultDistance - 50,
    duration: defaultDuration,
    attr: {
      rx: 25,
    },
  }),
  
  // Timeline
  timeline: gsap.timeline({defaults: {opacity: 0, duration: defaultDuration}})
    .to('#box_timeline1', {x: defaultDistance})
    .to('#box_timeline2', {x: defaultDistance * -1})
    .to('#box_timeline3', {x: defaultDistance}),
}

// restartボタン押下時のイベントをset
document.querySelectorAll(".restartBtn").forEach((el) => {
  const id = el.id
  const targetAnimName = id.split('_')[1]

  document.querySelector(`#${id}`).onclick = () => anims[targetAnimName].restart();
})

// Tween control
let tween = gsap.to('#box_tweenControl', { x: defaultDistance, rotation: 360, duration: 5 })

document.querySelector("#play").onclick = () => tween.play();
document.querySelector("#pause").onclick = () => tween.pause();
document.querySelector("#resume").onclick = () => tween.resume();
document.querySelector("#reverse").onclick = () => tween.reverse();
document.querySelector("#restart").onclick = () => tween.restart();