After watching a tutorial on YouTube by Gary Simon, I attempted to animate text using GSAP. Despite following the instructions meticulously and copying the CDN for GSAP and CSSRulePlugin just like him, nothing seems to be happening. Even setting my border to scale from 0 to 1 doesn't produce any results. I even went as far as slowing down the video speed to ensure I didn't miss anything, but I can't seem to pinpoint the issue or if there's an additional step required.
I even tried installing GSAP via npm and importing it, yet still no luck.
Here is the HTML code snippet that I have:
<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>
And here are snippets of my CSS styles...
*
{
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);
}
Despite following along with the tutorial perfectly, I am unable to get GSAP to function correctly. Could there be an issue with the CDN?
Any help would be greatly appreciated. Thank you!