Apply animations to three boxes on the page.

by HDL52

HTML

<h3>gsap.to (到...)</h3>
    <div class="box box1"></div>

    <h3>gsap.from (从...)</h3>
    <div class="box box2"></div>

    <h3>gsap.fromTo (从...到...)</h3>
    <div class="box box3"></div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>

CSS

body {
        padding: 20px;
        font-family: sans-serif;
      }
      .box {
        display: block;
        width: 80px;
        height: 80px;
        background-color: #28a745;
        margin-top: 20px;
      }

JavaScript

// Box 1: 动画“到” x:300 的位置
      gsap.to(".box1", { x: 300, duration: 1.5 });

      // Box 2: “从” x:300 的位置，动画到它当前的位置 (x:0)
      gsap.from(".box2", { x: 300, duration: 1.5 });

      // Box 3: “从” x:-100 的位置，“到” x:300 的位置
      gsap.fromTo(
        ".box3",
        { x: -100, opacity: 0 },
        { x: 300, opacity: 1, duration: 1.5 }
      );