GSAP CDN 在 javascript 或 html 文件中不工作

Question

我正在尝试通过关注一个名叫 Gary Simon 的人使用 GSAP 制作的 youtube 视频来制作一些文本动画。

我严格按照他的指示进行操作，但没有任何动静。他所做的只是复制并粘贴 GSAP 和 CSSRulePlugin 的 CDN，我也做了同样的事情，但在告诉我的边框从 0 缩放到 1 之后，什么也没有发生。我将视频放慢到 0.5 以确保我准确复制了所有内容，但我找不到我做错了什么或者是否有额外的步骤。

我尝试输入 npm install gsap 并导入它，但仍然没有。

这是我在 html

中的内容

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GSAP stuff</title>
  </head>
  <body>
    <div class="container">
      <div class="content">
        <h1>Look at me, I'm a bunch of letters...</h1>
      </div>
    </div>
    <canvas id="bg"></canvas>
    <script src='https://code.createjs.com/1.0.0/tweenjs.min.js'></script>
    <script type="module" src="/main.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/CSSRulePlugin.min.js"></script>
    <script>
      import { gsap } from "gsap/dist/gsap";
      import { CSSRulePlugin } from "gsap/dist/CSSRulePlugin";

      gsap.registerPlugin(CSSRulePlugin);

      const content = CSSRulePlugin.getRule('.content:before')
      const h1 = document.querySelector('h1') 
      const p = document.querySelector('p') 
      const tl = gsap.timeline() 

      tl.from(content, {cssRule: {scaleX:0}})
      
    </script>
  </body>
</html>

这是我的 CSS 东西...

*
{
  margin:0;
  padding:0;
}
html,
body
{
  height: 100vh;
  overflow: hidden;
  margin: 0px;
  font-size: larger;
  color: white;
}

canvas {
    position: fixed;
    top: 0;
    left: 0;
}
.container {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100vh;
    display: grid;
    place-content: center;
}

h1 {
  font-size: 2rem;
  width: 50vw;
  line-height: 5%;
  text-align: right;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  flex-basis: 0;
  flex-grow: 1;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.content {
  display: flex;
  gap:5em;
  padding-top: 3em;
  position: relative;
}

.content:before {
  content: '';
  position: absolute;
  top:0;
  left:0;
  width:100%;
  border-bottom: 1px solid white;
  transform: scaleX(1);
}

一切都与视频教程一样有效，但 GSAP 对我不起作用。 CDN 会不会有什么问题？

谢谢。

Answer 1

这三行是针对nodejs的，不能直接放在浏览器中

import { gsap } from "gsap/dist/gsap";
import { CSSRulePlugin } from "gsap/dist/CSSRulePlugin";
gsap.registerPlugin(CSSRulePlugin);

删除这些行后，确保包括它（就像你已经做的那样）

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>

够了（通常我们把它包含在head标签中）

此外，如果您只想缩放一个元素，则不需要 CssRulePlugin 和时间轴。

只需添加

gsap.from('.content', {scaleX: 0})

应该可以

GSAP CDN 在 javascript 或 html 文件中不工作

GSAP CDN not working in javascript or html file

html

javascript

css

gsap