Advice needed on timeline and knob

Question

hi all ,
i modify the pointgraph example and included a knob from memefx to control the tranlation of the rectangle.
so now i can control the animation back and fro using the knob. However, the interaction between the timeline.play() and the knob aren't sync.Below is my code for main.fx. no changes to pointgraph.fx.
can someone advise me?
To duplicate the problem, let the animation play and click the pause button. turn the knob forward and click the play button. you will see that the animation start off at a different time.

Answer 1

var variable = bind myKnob.value;
var myKnob = Knob {
    ui: BasicKnob {}
    min: 0, max: 530, minAngle:0, maxAngle:1440
    dialLinesLongEvery:5, dialLinesNumber:50, dialLinesWidth:1,
    translateX: 55, translateY:280
    scaleX: 0.25, scaleY: 0.25,
// timeline for animation
public var t = Timeline {
    repeatCount: 1
    keyFrames: [
        KeyFrame {
            time: 5s
            canSkip: true
            values: [
                myKnob.value => 530.0 tween Interpolator.LINEAR
/* adding everything in group to make changes easy */
var gp = Group {
    content: [pg, pg1, pg2]
/* stage can be written inside run() method */
public function run(){
    t.play();
    var s = Stage {
        x: bind stageX
        y: bind stageY
        title: "24-Hour Temperatures in Major World Cities"
        width: 550
        height: 400
        style: StageStyle.DECORATED
        scene: Scene {
            fill: Color.BLACK
            content: [
                gp,
                /* rectangle moving and showing animation */
                Rectangle {
                    translateX: bind myKnob.value
                    x: 10,
                    y: 10
                    width: 500,
                    height: 500
                    fill: Color.BLACK
                    opacity: 1.0
                reloadButton, textButton, myKnob, playButton,textButton2,stopButton, textButton1,
                // axis plotter
                Path {
                    translateX: 50
                    translateY: 0
                    stroke: Color.WHITE
                    strokeWidth: 2
                    opacity: 0.4
                    elements: [
                        MoveTo {
                            x: 10.0,
                            y: 300.0
                        HLineTo {
                            x: 450.0
                        MoveTo {
                            x: 10.0,
                            y: 300.0
                        VLineTo {
                            y: 10.0
                /* data on Axis */
                Group {
                    translateX: 50
                    translateY: 0
                    content: for(num in [0..7]) {[
                            Text {
                                fill: Color.WHITE
                                font: Font {
                                    size: 10
                                x: num * 60 + 5
                                y: 320
                                content: "{3*num}"
                            Text {
                                fill: Color.WHITE
                                font: Font {
                                    size: 10
                                x: -5
                                y: 320 - num * 50
                                content: "{5*num}-"
                Text {
                    fill: Color.WHITE
                    font: Font {
                        name: "Arial Bold"
                        size: 12
                    x: 500
                    y: 330
                    content: "Time"
                Text {
                    rotate: -90
                    fill: Color.WHITE
                    font: Font {
                        name: "Arial Bold"
                        size: 12
                    x: -10,
                    y: 80
                    content: "Temperature"
}