Animation: i must be missing something obvious...

Question

... but what is it?
In the following code, why does button1 work; button2 work; but button3 doesn't work?
i really want button3 to work !!
var button1 = Button {
            text: "test1"
            action: function() {
                series.data[0].yValue = 8;
var button2 = Button {
            text: "test2"
            action: function() {
                animation1.evaluateKeyValues();
                animation1.playFromStart();
var button3 = Button {
            text: "test3"
            action: function() {
                animation2.evaluateKeyValues();
                animation2.playFromStart();
var animation1 = Timeline {
            repeatCount: 1
            keyFrames: [
                KeyFrame {
                    time: 2s
                    action: function(): Void {
                        series.data[1].yValue = 8
var animation2 = Timeline {
            repeatCount: 1
            keyFrames: [
                at (2s) {series.data[2].yValue => 8 tween Interpolator.LINEAR}
var series = LineChart.Series {
            name: "Line 1"
            data: [
                LineChart.Data { xValue: 0 yValue: 4 }
                LineChart.Data { xValue: 5 yValue: 4 }
                LineChart.Data { xValue: 10 yValue: 4 }
var theChart = LineChart {
            title: "Line Chart"
            xAxis: NumberAxis {
                lowerBound: 0
                upperBound: 10
            yAxis: NumberAxis {
                lowerBound: 0
                upperBound: 10
            data: [series]
Stage {
    scene: Scene {
        width: 500
        height: 500
        content: [
            VBox {
                content: [
                    HBox { content: [button1, button2, button3] }
                    theChart
}

Answer 1

well this is a bit complex to understand,
compiler throws a saying that
In animation target series.data[ 2].yValue, series.data[ 2] is not a constant, but will be treated as such. You may want to rewrite as:
def temp = series.data[ 2]
temp.yValue =x which means that at the time the KeyFrame object is created, it reads the current value of series.data[2] and stores somewhere in memory, which means your series data should be populated before creating the timeline.
so moving the location of the Timeline below the stage declaration will work as expected
here is the modified code that works !
var button1 = Button {
            text: "test1"
            action: function() {
                series.data[0].yValue = 8;
var button2 = Button {
            text: "test2"
            action: function() {
                animation1.evaluateKeyValues();
                animation1.playFromStart();
var button3 = Button {
            text: "test3"
            action: function() {
                animation2.evaluateKeyValues();
                animation2.playFromStart();
var animation1 = Timeline {
            repeatCount: 1
            keyFrames: [
                KeyFrame {
                    time: 2s
                    action: function(): Void {
                        series.data[1].yValue = 8
var series = LineChart.Series {
            name: "Line 1"
            data: [
                LineChart.Data { xValue: 0 yValue: 4 }
                LineChart.Data { xValue: 5 yValue: 4 }
                LineChart.Data { xValue: 10 yValue: 4 }
var theChart = LineChart {
            title: "Line Chart"
            xAxis: NumberAxis {
                lowerBound: 0
                upperBound: 10
            yAxis: NumberAxis {
                lowerBound: 0
                upperBound: 10
            data: [series]
Stage {
    scene: Scene {
        width: 500
        height: 500
        content: [
            VBox {
                content: [
                    HBox { content: [button1, button2, button3] }
                    theChart
var animation2 = Timeline {
            repeatCount: 1
            keyFrames: [
                at (2s) {series.data[2].yValue => 8 tween Interpolator.LINEAR}
        } Cheers !
Abhilshit