gsap.registerPlugin();

/// random number between -100 and 100
let randomNum = gsap.utils.random(-100, 100);
console.log("random number between -100 and 100", randomNum)

// snapped to closest increment of 5
let randomSnap = gsap.utils.random(-100, 100, 5);
console.log("snapped to closest increment of 5", randomSnap)

// get a random value from an array of colors 
let randomValue = gsap.utils.random(["red", "blue", "green"]); 
console.log("a random value from an array of colors", randomValue)

let colors = ["#0ae448", "#fec5fb", "#ff8709","#9d95ff", "#abff84", "#00bae2"]

// use the shortcut string syntax or call the util methods in a tween
gsap.to('.box', {
  x: "random(-400, 400, 5)",
  backgroundColor: () => gsap.utils.random(colors),
  repeat: -1,
  repeatRefresh: true,
  duration: 1,
  repeatDelay: 0.2
})
document.getElementById('random-number').textContent=randomNum.toFixed(2);document.getElementById('random-snap').textContent=randomSnap;document.getElementById('random-color').textContent=randomValue;
const stage=document.getElementById('random-stage');const world=document.querySelector('.random-world');
new ResizeObserver(()=>world.style.transform='translate(-50%,-50%) scale('+Math.min(1,stage.clientWidth/940)+')').observe(stage);
let paused=false;document.getElementById('toggle').addEventListener('click',e=>{paused=!paused;gsap.getTweensOf('.box').forEach(t=>t.paused(paused));e.currentTarget.textContent=paused?'재생':'정지'});