CSSアニメーションの設定が上手くできません。

前提・実現したいこと

下記のURLのように、CSSで、文字に波を打つようなアニメーションをつけたいです。
Variable font animation

しかし、コピペしても上手くアニメーションが設定されません。
何がいけないのでしょうか？

ご教授の程よろしくお願いします。

発生している問題・エラーメッセージ

検証ツールで、以下のエラーが出ております。

Uncaught ReferenceError: Splitting is not defined

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <title>Page Title</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <link rel="stylesheet" type="text/css" media="screen" href="sample.css" />
8    <script src="sample.js"></script>
9</head>
10<body>
11    <h1 data-splitting>Breathing</h1>
12</body>
13</html>

css
1/*
2	Weight axis: 100 – 700
3	Width axis: 85 – 100
4*/
5@font-face {
6	font-family: "arial";
7	src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/IBMPlexSansVar-Roman.ttf");
8}
9
10* {
11	box-sizing: border-box;
12}
13
14body {
15	font-family: "arial", Times;
16	display: flex;
17	align-items: center;
18	justify-content: center;
19	text-align: center;
20	min-height: 100vh;
21	background-color: #DCEDC8;
22}
23
24h1 {
25	font-weight: 100;
26	font-size: 10vw;
27	line-height: 10vw;
28	font-variation-settings: 'font-weight' 100, 'font-stretch' 85;
29}
30
31h1 .char {
32	--delay: calc((var(--char-index) + 1) * 400ms);
33	animation: breathe 4000ms infinite both;
34	animation-delay: var(--delay);
35}
36
37h1:hover span {
38	animation-play-state: paused;
39}
40
41@keyframes breathe {
42	0% {
43		font-variation-settings: 'font-weight' 100, 'font-stretch' 85;
44		font-size: 10vw;
45	}
46	60% {
47		font-variation-settings: 'font-weight' 700, 'font-stretch' 100;
48		font-size: 11vw;
49	}
50
51	100% {
52		font-variation-settings: 'font-weight' 100, 'font-stretch' 85;
53		font-size: 10vw;
54	}
55}

js
1Splitting()

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。

head要素に以下を追加してください。（Splittingの実行前に）

html
1<link rel="stylesheet" href="https://unpkg.com/splitting/dist/splitting.css" />
2<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>