How to use the konva.Tween function in konva

setTimeout(() => {
            animate(arrow, card, rot, giver, turn);
        }, 20);
        return;
    }
    arrow.show();

    // Start the arrow at the center position of the clue giver's hand
    const centerPos = globals.elements.playerHands[giver].getAbsoluteCenterPos();
    arrow.setAbsolutePosition(centerPos);

    // Calculate the position of the final arrow destination
    // (this must be done after the card is finished tweening)
    const pos = getPos(card, rot);

    new Konva.Tween({
        node: arrow,
        duration: 0.5,
        x: pos.x,
        y: pos.y,
        easing: Konva.Easings.EaseOut,
    }).play();
};

// These images are shown to the player to
    // indicate which direction we are moving in a shared replay
    const x = (playAreaValues.x + (playAreaValues.w! / 2) - 0.05);
    const y = (playAreaValues.y + (playAreaValues.h! / 2) - 0.05);
    const size = 0.1;

    globals.elements.sharedReplayForward = new Konva.Image({
        x: x * winW,
        y: y * winH,
        width: size * winW,
        height: size * winH,
        image: globals.ImageLoader!.get('replay-forward')!,
        opacity: 0,
    });
    globals.layers.get('UI2')!.add(globals.elements.sharedReplayForward);
    globals.elements.sharedReplayForwardTween = new Konva.Tween({
        node: globals.elements.sharedReplayForward,
        duration: 0.5,
        opacity: 1,
        onFinish: () => {
            if (globals.elements.sharedReplayForwardTween) {
                globals.elements.sharedReplayForwardTween.reverse();
            }
        },
    });

    globals.elements.sharedReplayBackward = new Konva.Image({
        x: x * winW,
        y: y * winH,
        width: size * winW,
        height: size * winH,
        image: globals.ImageLoader!.get('replay-back')!,

node.scaleX(scale);
                node.scaleY(scale);
                node.rotation(0);
                node.checkSetDraggable();
            } else {
                // Animate the card going from the deck to the hand
                // (or from the hand to the discard pile)
                // and animate the rest of the cards sliding over
                const card = node.children[0] as unknown as HanabiCard;
                card.tweening = true;
                if (card.doMisplayAnimation) {
                    // If this card just misplayed, do a special animation
                    card.doMisplayAnimation = false;
                    node.rotation(360);
                }
                node.tween = new Konva.Tween({
                    node,
                    duration: 0.5,
                    x: newX,
                    y: 0,
                    scaleX: scale,
                    scaleY: scale,
                    rotation: 0,
                    easing: Konva.Easings.EaseOut,
                    onFinish: () => {
                        if (!card || !node) {
                            return;
                        }
                        card.tweening = false;
                        node.checkSetDraggable();
                        if (!storedPostAnimationLayout) {
                            return;

if (globals.animateFast) {
        currentPlayerArea.arrow!.rotation(rotation);
    } else {
        if (currentPlayerArea.tween !== null) {
            currentPlayerArea.tween.destroy();
            currentPlayerArea.tween = null;
        }

        // We want the arrow to always be moving clockwise
        const oldRotation = currentPlayerArea.arrow.rotation();
        const unmodifiedRotation = rotation;
        if (oldRotation > rotation) {
            rotation += 360;
        }

        currentPlayerArea.tween = new Konva.Tween({
            node: currentPlayerArea.arrow,
            duration: 0.75,
            rotation,
            easing: Konva.Easings.EaseInOut,
            onFinish: () => {
                currentPlayerArea.arrow.rotation(unmodifiedRotation);
            },
        }).play();
    }
};

if (globals.animateFast) {
            globals.elements.currentPlayerArrow.rotation(rotation);
        } else {
            if (globals.elements.currentPlayerArrowTween) {
                globals.elements.currentPlayerArrowTween.destroy();
            }

            // We want the arrow to always be moving clockwise
            const oldRotation = globals.elements.currentPlayerArrow.rotation();
            const unmodifiedRotation = rotation;
            if (oldRotation > rotation) {
                rotation += 360;
            }

            globals.elements.currentPlayerArrowTween = new Konva.Tween({
                node: globals.elements.currentPlayerArrow,
                duration: 0.75,
                rotation,
                easing: Konva.Easings.EaseInOut,
                onFinish: () => {
                    if (globals.elements.currentPlayerArrow) {
                        globals.elements.currentPlayerArrow.rotation(unmodifiedRotation);
                    }
                },
            }).play();
        }
    };
};

x: (labelX + labelSpacing) * winW,
        y: 0.08 * winH,
        listening: true,
    });
    globals.elements.scoreArea.add(cluesNumberLabel);
    globals.elements.cluesNumberLabel = cluesNumberLabel;

    cluesTextLabel.on('click', (event: Konva.KonvaPointerEvent) => {
        arrows.click(event, REPLAY_ARROW_ORDER.CLUES, cluesNumberLabel);
    });
    cluesNumberLabel.on('click', (event: Konva.KonvaPointerEvent) => {
        arrows.click(event, REPLAY_ARROW_ORDER.CLUES, cluesNumberLabel);
    });

    // Add an animation to signify that discarding at 8 clues is illegal
    globals.elements.cluesNumberLabelPulse = new Konva.Tween({
        node: cluesNumberLabel,
        fontSize: 0.04 * winH,
        fill: '#df1c2d',
        offsetX: 0.001 * winH,
        offsetY: 0.01 * winH,
        duration: 0.5,
        easing: Konva.Easings.EaseInOut,
        onFinish: () => {
            if (globals.elements.cluesNumberLabelPulse) {
                globals.elements.cluesNumberLabelPulse.reverse();
            }
        },
    });
    globals.elements.cluesNumberLabelPulse.anim.addLayer(globals.layers.get('UI'));

    // Draw the 3 strike (bomb) black squares / X's

if (globals.animateFast) {
                node.x(0);
                node.y(0);
                node.scaleX(scale);
                node.scaleY(scale);
                node.rotation(0);
                node.opacity(opacity);
                this.hideUnder();
            } else {
                // Animate the card leaving the hand to the play stacks
                // (tweening from the hand to the discard pile is handled in
                // the "CardLayout" object)
                const card = node.children[0];
                card.tweening = true;
                node.tween = new Konva.Tween({
                    node,
                    duration: 0.8,
                    x: 0,
                    y: 0,
                    scaleX: scale,
                    scaleY: scale,
                    rotation: 0,
                    opacity,
                    easing: Konva.Easings.EaseOut,
                    onFinish: () => {
                        if (!node || !card || !card.parent) {
                            return;
                        }
                        if (card.isMisplayed && card.parent.parent) {
                            // If the card is misplayed, then tween it to the discard pile
                            // We check for "card.parent.parent" to fix the bug where

globals.postAnimationLayout = () => {
                (this.parent as unknown as Deck).doLayout();
                globals.postAnimationLayout = null;
            };

            this.draggable(false);
            globals.elements.deckPlayAvailableLabel!.hide();

            globals.lobby.conn.send('action', {
                type: ACTION.DECKPLAY,
            });

            action.stop();
        } else {
            // The deck was dragged to an invalid location, so animate the card back to where it was
            new Konva.Tween({
                node: this,
                duration: 0.5,
                x: 0,
                y: 0,
                easing: Konva.Easings.EaseOut,
                onFinish: () => {
                    const layer = globals.layers.get('UI');
                    if (typeof layer !== 'undefined') {
                        layer.batchDraw();
                    }
                },
            }).play();
        }
    }

const x = globals.elements.replayBar!.x() + (sliderW / max * turn) + (shuttle.width() / 2);
    let y = globals.elements.replayBar!.y() + (shuttle.height() * 0.55);
    if (smaller) {
        y -= 0.003 * winH;
    }
    const scale = smaller ? 0.7 : 1;
    if (fast) {
        shuttle.x(x);
        shuttle.y(y);
        shuttle.scaleX(scale);
        shuttle.scaleY(scale);
    } else {
        if (shuttle.tween) {
            shuttle.tween.destroy();
        }
        shuttle.tween = new Konva.Tween({
            x,
            y,
            scaleX: scale,
            scaleY: scale,
            node: shuttle,
            duration: 0.25,
            easing: Konva.Easings.EaseOut,
        }).play();
    }
};

if (globals.elements.sharedReplayForwardTween) {
                globals.elements.sharedReplayForwardTween.reverse();
            }
        },
    });

    globals.elements.sharedReplayBackward = new Konva.Image({
        x: x * winW,
        y: y * winH,
        width: size * winW,
        height: size * winH,
        image: globals.ImageLoader!.get('replay-back')!,
        opacity: 0,
    });
    globals.layers.get('UI2')!.add(globals.elements.sharedReplayBackward);
    globals.elements.sharedReplayBackwardTween = new Konva.Tween({
        node: globals.elements.sharedReplayBackward,
        duration: 0.5,
        opacity: 1,
        onFinish: () => {
            if (globals.elements.sharedReplayBackwardTween) {
                globals.elements.sharedReplayBackwardTween.reverse();
            }
        },
    });
};