Greensock - DrawSVG

I am trying to make the search bar animate. I was able to make it draw in when you click and when you click again it goes back to the original position (using greensock - drawSVG).

I want to be able to click again without refreshing the page, and have everything work correctly. So far, only the drawSVG is the only thing not reanimating.

I am also not sure why the drawSVG property is not working here, it does work on my own computer. (I am attaching a gif of the animation from my computer)

var $SearchBar = $('#SearchBar');
var $searchIcon = $('#searchIcon');
var $drawSearch = $ ('#drawSearch');
var $leftX = $('#leftX');
var $rightX = $('#rightX');
var $changeColor = $('#changeColor');
//this is my variable for when to draw the search bar
var searchVisible = false;
var $black = ('#000');
TweenMax.set($SearchBar, {stroke:'#000'});
TweenMax.set([$searchIcon, $leftX, $rightX, $changeColor],{transformOrigin: '50% 50%'});
TweenMax.set([$drawSearch, $leftX, $rightX, $changeColor], {alpha:0});
TweenMax.set([$leftX], {rotation:-45, scale:0.75});
TweenMax.set([$rightX], {rotation:45, scale:0.75});
searchVisible = false;

//funciton to click the searchIcon
function clickSearch(){
  console.log("click");
      if (searchVisible === true) {
        searchVisible = false;
        console.log("Yes i see the search draw");
        TweenMax.to($changeColor, 2, {alpha:0,scale:0});
        TweenMax.to([$leftX],0.25, {rotation:-45});
        TweenMax.to([$rightX],0.25, {rotation:45});
        TweenMax.to([$rightX,$leftX],0.25, {alpha:0,delay:0.25});
        TweenMax.to($drawSearch,1,{drawSVG: 0, delay:0.5});
        TweenMax.to($searchIcon, 0.5, {rotation: 0, delay:1.5});


      }
      else {
        console.log("No i dont see the searchdraw");
        searchVisible = true;
        TweenMax.to($changeColor, 2, {alpha:1,scale:100});
        TweenMax.to($searchIcon, 0.25, {rotation: -20});
        TweenMax.to($searchIcon, 0.25, {rotation: 88, delay:0.25});
        TweenMax.set([$drawSearch],{alpha:1});
        TweenMax.from($drawSearch,0.75,{drawSVG:0, delay:0.50});
        TweenMax.to([$leftX, $rightX], 0.25,{alpha:1,delay:1});
        TweenMax.to([$leftX],0.25, {rotation:0, delay:1});
        TweenMax.to([$rightX],0.25, {rotation:0,delay:1});
      }


}
//listener for clickSearch function
$SearchBar.on("click", clickSearch);

section {
  background-color: #900C3F;
  display: flex;
  align-content: center;
  justify-content: center;
  cursor: pointer; }
  section svg {
    height: 100vh;
    width: 100vw; }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
  <title>SCSS template</title>
</head>

<body>

  <section>
    <svg id="SearchBar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
      <style>
        .st0 {
          fill: #41718e;
          stroke: #900C3F;
        }

        .st1 {
          stroke-linecap: round
        }

        .st1,
        .st2 {
          fill: none;
          stroke: #fff;
          stroke-width: 8;
          stroke-miterlimit: 10
        }
      </style>
      <circle id="changeColor" class="st0" cx="390.24" cy="178.54" r="24.04" />
      <g id="searchIcon">
        <path class="st1" d="M409.27 199.36l21.05 21.21" />
        <circle class="st2" cx="390.38" cy="178.62" r="24.72" />
      </g>
      <path class="st1" d="M365.47 220.65l-325.13 1.56.32-66.54 289.96-1.16" id="drawSearch" />
      <path id="leftX" class="st1" d="M58.31 175.9l24.62 24.61" />
      <path id="rightX" class="st1" d="M82.49 175.77l-24.61 24.62" />
    </svg>
  </section>


  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Greensock -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
  <!-- Greensock Draw SVG -->
  <script src="http://dugraphicdesign.com/winterWeb3/DrawSVGPlugin.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/ScrollToPlugin.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/TextPlugin.min.js"></script>
  <script src="js/scripts.js"></script>
</body>

</html>

Solution

The DrawSVGPlugin.js plugin isn't loading. Without this plugin, the DrawSVG functionality won't work.

A page loaded using https will not load javascript using http. This is known as "mixed content" and is prevented by the browser for security reasons.

As for the animation, I think it's because you're trying to use .from() without having properly initialized the element's state.

Instead of using integers for the drawSVG property, use percentages, as in "100%". When you use integers, these are interpreted as a raw length which can take some effort to figure out. When using percentages, DrawSVG will figure it out for you.

Rather than messing around with prior states, animate to "0%" or "100%" as needed.

So initialize with

TweenMax.set([$drawSearch], {drawSVG:"0%"});

Then switch between states with

TweenMax.to($drawSearch, 1, {drawSVG:"0%", delay:0.5});

and

TweenMax.to($drawSearch, 0.75, {drawSVG:"100%", delay:0.50});

as shown in https://repl.it/@ouroborus/GrubbyFuzzyDatalog