<main>
  <form>
    <label>
      <input type="radio" id="to" name="method" value="to" checked>
      to</label>
    <label>
      <input type="radio" id="from" name="method" value="from">
      from</label>
    <label>
      <input type="radio" id="set" name="method" value="set">
      set</label>
  </form>

<!--   <svg viewBox="0 0 100 20">
    <circle class="outline from-outline" stroke="grey" fill="none" stroke-dasharray='1.2' stroke-width="0.3" cx="10" cy="10" r="9.7" />
    <circle class="outline center-outline" stroke="grey" fill="none" stroke-dasharray='1.2' stroke-width="0.3" cx="50" cy="10" r="9.7" />
    <circle class="outline to-outline" stroke="grey" fill="none" stroke-dasharray='1.2' stroke-width="0.3" cx="90" cy="10" r="9.7" />
    <circle class="circle" stroke-width="0.3" fill="#0ae448" cx="50" cy="10" r="10" />
  </svg> -->
        <img class="keploy-icon" src="https://atai-main.b-cdn.net/tools/keploy-icon.jpg" alt="keployIcon" width="64" height="64">
   
<div class="code-container">
  
      <code class="code-to language-js">
      gsap.to(".keploy-icon", {
        x: 40,
        duration: 1.1
      });
    </code>

    <code class="code-from language-js">
      gsap.from(".keploy-icon", {
        x: -40,
        duration: 1.1
      });
    </code>
  
    <code class="code-set language-js">
      gsap.set(".keploy-icon", {
        x: 40
      });
    </code>
  </div>
</main>

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color:#000000 ;
}

main > * + * {
  margin-top: 1rem;
}

.box {
  display: block;
}

form {
  display: flex;
  font-size: 1.3rem;
}

form > * + * {
  margin-left: 0.5rem;
}

code {
  padding: 1rem !important;
}

.outline {
  visibility: hidden;
}

.code-container {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

code {
  position: absolute;
}

let tl = gsap.timeline();
gsap.set(".outline, code", { autoAlpha: 0 });

gsap.set(".code-to", { autoAlpha: 1 })

var form = document.querySelector("form");
form.addEventListener("change", function () {
  let type = document.querySelector('input[name="method"]:checked').value;

  gsap.set(".keploy-icon", { clearProps: "all" });
  gsap.set(".outline, code", { autoAlpha: 0 });

  tl.clear();
  switch (type) {
    case "to":
      tl.set(".code-to", { autoAlpha: 1 })
         .to(".to-outline", { autoAlpha: 1 })
         .to(".keploy-icon", {
           duration: 1.1,
           ease: "none",
           x: 40 
         });
      break;
    case "set":
      tl.set(".code-set", { autoAlpha: 1 })
         .set(".keploy-icon", {
           x: 40 
         }, "+=0.5");
      break;
    case "from":
      tl.set(".code-from", { autoAlpha: 1 })
         .to(".from-outline", { autoAlpha: 1 })
         .from(".keploy-icon", {
           duration: 1.1,
           ease: "none",
           x: -40 
         });
      break;
  }
});