Animated icons + .js in squarepace

Question

I'm trying to add a few animated icons into my squarespace template like the following:

https://rawgit.com/icons8/titanic/master/demo/index.html

The instructions to install them through CDN are the following:

Insert this string to your HTML head:
```html
<script src="https://cdn.rawgit.com/icons8/titanic/master/dist/js/titanic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
```
And initialize it before the body closes:

```html
<script>
    var titanic = new Titanic();
</script>
```
This way, you can add icons anywhere in your HTML using this tag:
```html
<div class='titanic titanic_chat'></div>
```
Where chat can be any of these:
* caps
* chat
* checkbox
* expand
* cheap
* expensive
* idea
* mailbox
* mic
* no-mic
* online
* pause
* power
* shopping
* smile
* stop
* unlock
* zoom

### Hosting your images

If you'd like to host your images on your server instead of rawgit, pass the base URL with the init() function:
```javascript
titanic.begin('/my/base/directory/');
```
Then, if you have a div with id="chat", Titanic will search for icons in /my/base/directory/chat.json.

However, after following these steps, and installing the library and initializing the code, I insert an html block using the suggested code:

<div class='titanic titanic_chat'></div>

But nothing happens.

Any ideas on what the issue may be?

I'm using the Sophia template from squarespace.