Animating text along line series

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var label;

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;

var data = [];
var visits = 10;
for (var i = 1; i < 20; i++) {
    visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 5);
    data.push({ date: new Date(2018, 0, i), value: visits });
}

chart.data = data;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.minWidth = 35;

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.tooltipText = "{valueY}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.background.fillOpacity = 0.5;
series.tensionX = 0.7;

chart.scrollbarY = new am4core.Scrollbar();

series.events.on("ready", function () {

    label = series.createChild(am4core.Label);
    label.strokeOpacity = 0;
    label.fontSize = 20;
    label.fill = series.stroke;
    label.fillOpacity = 1;
    label.padding(0, 0, 5, 0);

    label.path = series.segments.getIndex(0).strokeSprite.path;

    series.segments.getIndex(0).strokeSprite.events.on("propertychanged", function (event) {
        if (event.property == "path") {
            label.path = series.segments.getIndex(0).strokeSprite.path;
        }
    })
    animateForward();

}, 1000)


function animateForward() {
    label.text = "I am funky text!"
    var animation = label.animate({ property: "locationOnPath", from: 0, to: 1 }, 12000);
    animation.events.on("animationended", animateBackwards);
}

function animateBackwards() {
    label.text = "And I can go backwards!"
    var animation = label.animate({ property: "locationOnPath", from: 1, to: 0 }, 8000);
    animation.events.on("animationended", animateForward);
}


}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>

/* Imports */
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

/* Chart code */
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

let label;

let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;

let data = [];
let visits = 10;
for (var i = 1; i < 20; i++) {
    visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 5);
    data.push({ date: new Date(2018, 0, i), value: visits });
}

chart.data = data;

let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.minWidth = 35;

let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.tooltipText = "{valueY}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.background.fillOpacity = 0.5;
series.tensionX = 0.7;

chart.scrollbarY = new am4core.Scrollbar();

series.events.on("ready", function () {

    label = series.createChild(am4core.Label);
    label.strokeOpacity = 0;
    label.fontSize = 20;
    label.fill = series.stroke;
    label.fillOpacity = 1;
    label.padding(0, 0, 5, 0);

    label.path = series.segments.getIndex(0).strokeSprite.path;

    series.segments.getIndex(0).strokeSprite.events.on("propertychanged", function (event) {
        if (event.property == "path") {
            label.path = series.segments.getIndex(0).strokeSprite.path;
        }
    })
    animateForward();

}, 1000)


function animateForward() {
    label.text = "I am funky text!"
    let animation = label.animate({ property: "locationOnPath", from: 0, to: 1 }, 12000);
    animation.events.on("animationended", animateBackwards);
}

function animateBackwards() {
    label.text = "And I can go backwards!"
    let animation = label.animate({ property: "locationOnPath", from: 1, to: 0 }, 8000);
    animation.events.on("animationended", animateForward);
}