SVG Transitions using Vue.js + GSAP

This example uses the list entering/leaving and state transition systems of Vue.js, along with Greensock's GSAP to transition properties of SVG circles.

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

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Scales with Vue + GASP</title>
    <style type="text/css" media="screen">
        body {
            font-family: "Courier New", Georgia;
            background: #f4f4f4;
        }
        h1 {
            font-size: 3em;
            padding: 0px;
            font-weight: normal;
            text-align: center;
            text-transform: uppercase;
        }

.lede {
            font-style: italic;
            font-weight: 400;
            font-size: .9em;
            font-size: 14px;
            line-height: 1.4em;
            text-align: center;
        }
        label {
            display: inline-block;
            margin-left: 10px;
            width: 450px;
        }

input {
            width: 84px;
        }

.control {
            height: 30px;
        }

</style>
</head>

<body>

<script type="text/x-template" id="svg-xaxis">
    </script>

<div id="chart">
        <h1 class="g-header centered">Scales with Vue + GASP</h1>
        <p class="lede centered" style="margin-bottom:0rem">Tweening D3 Scales with Vue.js & GASP</p>
        <svg :width="chart.width" :height="chart.height">
            <g 
                :transform="'translate(0,' + (chart.height - margins.bottom) + ')'" 
                class="x axis"
                fill="none" 
                font-size="10" 
                font-family="sans-serif" 
                text-anchor="middle"
                ref='xAxis'>
                
                <path 
                    class="domain" 
                    stroke="#000" 
                    :d="'M' + range0 + ',' + k * tickSizeOuter + 'V0.5H' + range1 + 'V' + k * tickSizeOuter"
                ></path>
                <g 
                    v-for="(tick, index) in ticks"
                    v-bind:key="'g_' + index"
                    class="tick"
                    :transform="transformX(tick.x)"
                >
                    <line 
                        stroke="#000"
                        :y2="k * tickSizeInner"
                    ></line>
                    <text
                        fill="#000"
                        :y="k * spacing"
                        dy="0.71em"
                    >{{ Math.round(tick.x) }}</text>
                </g>
            </g>
        </svg>
        <br/>
        <label>Transition Interval (in milliseconds)</label>
        <br/>
        <input type="range" min="1000" max="5000" v-model.number="updateInterval">
        <input type="text" v-model.number="updateInterval">
    </div>

<script src="main.js"></script>

</body>

</html>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js to https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/tweenmax.min.js

https://unpkg.com/vue

https://d3js.org/d3-array.v2.min.js

https://d3js.org/d3-interpolate.v1.min.js

https://d3js.org/d3-scale.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js