【发布时间】：2021-07-17 05:55:04
【问题描述】：
我正在尝试通过观看一个名叫 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会不会有什么东西？
谢谢。
【问题讨论】：
-
有关正确加载 GSAP 的详细信息，请查看the GSAP install page。
-
那是我用来尝试使用 GSAP 的页面。它不起作用，因为我关注的视频教程告诉我使用 CSSRulePlugin。一旦我把它从我的代码中取出，它就起作用了。不过谢谢你，我会继续使用那个页面。
标签： javascript html css gsap