How to stop animation from repeating

Ask the community
,
1

I have animation in a timeline that plays on viewportEnter. My elements also go from hidden to show. I need some advice how to:
(a) stop the timeline from ever playing again after the first time;
(b) how to get the boxes from hidden to show state. I have tried a few things to do this but with no success. My latest attempt was with timeline.onStart but also with no success.

My code:

export function animationStart_viewportEnter(event) {
    setTimeout(function () {
        accounting();
        taxation();
        specialist();
    }, 800);
}
function accounting (){
    let rollOptions = {
        'duration': 1500,
        'delay': 2800
    };
    timeline.onStart( () => {
        $w("#acctg").show("fade", { duration: 1500 })
    });
    timeline
    .add($w("#acctg"), { duration: 2500, y: "+=394", easing: "easeInQuad" })
    .play();
    if($w("#acctgLine").hidden) {
        $w("#acctgLine").show("roll", rollOptions);
    }
}

function taxation () {
    let rollOptions = {
        'duration': 1500,
        'delay': 2800
    };
    timeline.onStart( () => {
        $w("#taxation").show("fade", { duration: 1500 })
    });
    timeline
    .add($w("#taxation"), { duration: 2500, y: "+=394", easing: "easeInQuad" }, 0)
    .play();
    if($w("#taxLine").hidden) {
        $w("#taxLine").show("roll", rollOptions);
    }
}

function specialist () {
    let rollOptions = {
        'duration': 1500,
        'delay': 2800
    };
    timeline.onStart( () => {
        $w("#specialist").show("fade", { duration: 1500 })
    });
    timeline
    .add($w("#specialist"), { duration: 2500, y: "+=394", easing: "easeInQuad" }, 0)
    .play();
    if($w("#specialistLine").hidden) {
        $w("#specialistLine").show("roll", rollOptions);
    }
}