ThreeJS - How to play animation between specific keyframes – forward and backward

Question

• Looking to get GLB(s) to advance to a specific KeyFrame via hovering over 1 of 3 buttons.
• 'Advance' means move from current KF to desired (1, 21, 41)... could be forward or backward.
• Mock-up of intended behavior: (https://imgur.com/N25k2gM).
• Best I've been able to do thus far (.gif): https://imgur.com/N64oKj6
• Been at the problem a couple hours. Put some effort in before I asked.

.

//*   Setup First Model

let modelBGReady = false;
let modelBGMixer: THREE.AnimationMixer;
const modelBGClock = new THREE.Clock();

//*   Load First Model

const modelBGLoad = new GLTFLoader();
modelBGLoad.load(modelBG, (gltf) => {

modelBGMixer = new THREE.AnimationMixer(gltf.scene);

let animation = modelBGMixer.clipAction(gltf.animations[0]);
animation.setLoop(THREE.LoopOnce, 1);
animation.clampWhenFinished = true;
animation.play();

gltf.scene.rotation.z += modelRotateX;
gltf.scene.rotation.y += modelRotateY;
gltf.scene.position.set(0, -0.5, 0.2);
scene.add(gltf.scene);});

...

//*   'Plan' Button Hover (Button 1 of 3)

const buttonPlan = document.getElementById('buttonPlan') as HTMLDivElement;
buttonPlan.addEventListener('mouseover', (event) => {
modelBGReady = true;
});

...

//*   Animation Loop

function animate() {

requestAnimationFrame(animate);

render();
if (modelBGReady) modelBGMixer.update(modelBGClock.getDelta());
if (modelUIReady) modelUIMixer.update(modelUIClock.getDelta());
if (modelWebAppsReady)
    modelWebAppsMixer.update(modelWebAppsClock.getDelta());
stats.update();
}

function render() {
renderer.render(scene, camera);
}
animate();

Help on this would be greatly appreciated.

You can tell this is for a web designer-type portfolio (which I'm excited to finish :) )

Cheers