TypeIt Plugin: How do I make it work on a local html file?

So I've been trying to play around with this fiddle to animate text: https://codepen.io/alexmacarthur/pen/MOPQvp; suffice to say I was blown away by the flexibility. I tried to incorporate the code on a local HTML file on my machine, but it doesn't work. Although I picked up web dev a couple of years back, I don't have much experience in terms of projects and was hoping somebody here could point out what the mistake was, since I have a feeling it should be painfully obvious. My HTML+JS code (I probably shouldn't be putting everything in one file, but since I'm only experimenting..):

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/typeit.min.js"></script>
  <script>
  $(function() {
    new TypeIt('#element', {
      speed: 45
    })
    .type('The programers')
    .pause(300)
    .options({speed: 200})
    .delete(3)
    .options({speed: 45})
    .pause(300)
    .type('mer\'s wife sent him to teh sto.')
    .pause(500)
    .options({speed: 200})
    .delete(7)
    .type('he store.')
    .pause(500)
    .break()
    .options({speed: 45})
    .type('Her instructions were <em>"Buy butter. See if they have 10 eggs. If they do, buy ten.</em>"')
    .pause(1000)
    .break()
    .type('He came back with ten packs of butter. ')
    .pause(1000)
    .type('Because they have eggs.');
    });
  </script>
</head>

<body>

<h1 id="element"></h1>

</body>

</html>

When I open the file, all I see is an empty screen :/ Thanks in advance to anybody who took the time out to read!

Solution

I just changed the version of the typeit for a more recent one, working with the following HTML:

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.0.2/typeit.min.js"></script>
    <script>
        $(function () {
            new TypeIt('#element', {
                speed: 45
            })
                .type('The programers')
                .pause(300)
                .options({ speed: 200 })
                .delete(3)
                .options({ speed: 45 })
                .pause(300)
                .type('mer\'s wife sent him to teh sto.')
                .pause(500)
                .options({ speed: 200 })
                .delete(7)
                .type('he store.')
                .pause(500)
                .break()
                .options({ speed: 45 })
                .type('Her instructions were <em>"Buy butter. See if they have 10 eggs. If they do, buy ten.</em>"')
                .pause(1000)
                .break()
                .type('He came back with ten packs of butter. ')
                .pause(1000)
                .type('Because they have eggs.');
        });
    </script>
</head>

<body>

    <h1 id="element"></h1>

</body>

</html>