-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
54 lines (46 loc) · 1.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html class="prompt">
<head>
<meta charset="UTF-8">
<title>SVG path animation with VueJS and TweenLite</title>
<link rel="stylesheet" href="/assets/css/index.css">
</head>
<body>
<main id="app" class="chart">
<figure class="chart__content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 -25 440 125">
<path class="chart__path" :d="`M${path}`"
fill="none" stroke="rgba(255, 255, 255, 0.3)"
stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<text v-for="([ x, y ]) in path" :x="x - 10" :y="y - 7.5"
font-size="11" font-weight="200" fill="currentColor">
{{ 100 - (y | 0) + '%' }}
</text>
</svg>
<figcaption class="chart__caption">
<h1 class="chart__title">SVG path animation</h1>
<h2 class="chart__subtitle">with VueJS & TweenLite</h2>
</figcaption>
</figure>
<button class="modal__open" @click="modal = true">About this pen</button>
<transition name="modal">
<section v-if="modal" class="modal" @click="modal = false">
<article class="modal__content" @click.stop>
<h4 class="modal__title">For the full tutorial</h4>
<h4 class="modal__title">that goes with this pen</h4>
<h5 class="modal__link" @click="modal = false">
<a href="https://snipcart.com/blog/vuejs-transitions-animations" target="_blank">
Creating Vue.js Transitions & Animations
</a>
</h5>
<button class="modal__close" @click="modal = false">×</button>
</article>
</section>
</transition>
</main>
<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script> -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
<script src="/assets/js/index.js"></script>
</body>
</html>