title: CSS and gsap JavaScript doesn't work in my file
body: <p>I am trying to implement a gsap example from <a href="https://codepen.io/designcourse/pen/bGGmvOe" rel="nofollow noreferrer">codepen</a>.
  Nothing shows when I launch my html file. I remove the styles CSS at the bottom and it started showing. I believe the CSS is scss, which makes it more confusing because I assumed I could use it. The html file is below. I haven't used scss before so it seems strange to me.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, shrink-to-fit=no&quot;&gt;
      &lt;title&gt;Home - Brand&lt;/title&gt;
      &lt;script src=&quot;https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js&quot;&gt;&lt;/script&gt;
     &lt;script src=&quot;https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CSSRulePlugin3.min.js&quot;/&gt;
     &lt;/head&gt;
     &lt;body&gt;
  &lt;main&gt;
      &lt;div class=&quot;content&quot;&gt;
          &lt;h1 class=&quot;anim1&quot;&gt;&lt;span&gt;Bridging the gap&lt;/span&gt; &lt;span&gt;between dream&lt;/span&gt; &lt;span&gt;and reality&lt;/span&gt;&lt;/h1&gt;
          &lt;p class=&quot;anim1&quot;&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio at ipsa alias modi natus excepturi?&lt;/p&gt;
          &lt;a href=&quot;#&quot; class=&quot;anim1&quot; id=&quot;cta&quot;&gt;Start Dreaming&lt;/a&gt;
      &lt;/div&gt;
  &lt;/main&gt;
  &lt;aside&gt;
          &lt;div class=&quot;wrapper&quot;&gt;
              &lt;img class=&quot;swirl&quot; src=&quot;https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/swirl.png&quot; alt=&quot;Swirl Graphic&quot;&gt;
          &lt;/div&gt;
  &lt;/aside&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
                  // 1
                  // gsap.from(&quot;.content&quot;, {duration:1, y:-50, opacity: 0});
  
                  // 1.1   Show Easings  &quot;steps(5)&quot;   &quot;Power2.easeInOut&quot;  &quot;elastic(1, 0.3)&quot;  https://greensock.com/docs/v2/Easing
                  // gsap.from(&quot;.content&quot;, {duration:1, y:-50, opacity: 0, ease: &quot;elastic(1, 0.3)&quot;}); 
  
                  // 2  ADD
                  // gsap.from(&quot;img&quot;, {duration: 1, y: 30, opacity: 0});
                  // gsap.from(&quot;aside&quot;, {duration: 1, opacity: 0, backgroundPosition: '200px 0px'});
  
                  // 3 Show Delay
                  // gsap.from(&quot;img&quot;, {duration: 1, delay: 1.4, y: 30, opacity: 0});
                  // gsap.from(&quot;aside&quot;, {duration: 1, delay: 1.1, opacity: 0, backgroundPosition: '200px 0px'});
  
                  // 4 Show Stagger (add class)
                  // gsap.from(&quot;.anim1&quot;, {duration:1, y:-50, opacity: 0, stagger: .6});
  
                  // 5 Show text reveal animation (add css span:after)
                  // &lt;script src=&quot;CSSRulePlugin.min.js&quot;&gt;
  
                  var rule = CSSRulePlugin.getRule(&quot;span:after&quot;);
                  
                  // 6 Show Timeline
                  var tl = gsap.timeline({defaults:{duration: 1}});
                  tl.from(&quot;.anim1&quot;, {y:-50, stagger: .6, opacity: 0})
                    .to(rule, {duration: 1.8,cssRule: {scaleY: 0}}, &quot;-=2.2&quot;)
                    .from(&quot;aside&quot;, {backgroundPosition: '200px 0px', opacity: 0}, &quot;-=1.5&quot;)
                    .from(&quot;img&quot;, {y:30, opacity: 0}, &quot;-=.5&quot;)
  
                  // 7 Show Click reverse
                  document.getElementById('cta').addEventListener('click', () =&gt; {
                      console.log('click')
                      tl.reversed() ? tl.play() : tl.reverse();
                  })
  &lt;/script&gt;
  &lt;style type=&quot;text/css&quot;&gt;
  body {
      height: 100%;
      margin: 0;
      display: grid;
      grid-template-columns: auto 30%;
      font-family: 'Montserrat';
  }
  
  *, *:before, *:after {
      box-sizing: border-box;
  }
  
  .line {
      position: absolute;
  }
  
  main {
      margin-left: 20%;
      height: 100vh;
      display: grid;
      place-content: center;
  
      .content {
          width: 70%;
  
          h1 {
              font-size: 3em;
              position: relative;
  
              span {
                  display: block;
              }
  
          }
  &lt;/style&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>