# How to play animation between specific keyframes -- forward and backward

**URL:** <https://discourse.threejs.org/t/how-to-play-animation-between-specific-keyframes-forward-and-backward/37231>\
**Category:** Questions\
**Tags:** glb, animation\
**Created:** [April 19, 2022, 10:21pm UTC](https://discourse.threejs.org/t/how-to-play-animation-between-specific-keyframes-forward-and-backward/37231 "2022-04-19T22:21:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ColoradoVibes](https://avatars.discourse-cdn.com/v4/letter/c/f14d63/32.png) [@ColoradoVibes](https://discourse.threejs.org/u/ColoradoVibes)\
**Post date:** [April 19, 2022, 10:21pm UTC](https://discourse.threejs.org/t/how-to-play-animation-between-specific-keyframes-forward-and-backward/37231/1 "2022-04-19T22:21:30Z")

</div>

Hello,

I’m looking to get a GLB(s) to advance to a specific KeyFrame via hovering over buttons.  
Website Concept: 3 hover-able buttons (Plan / Iterate / Deliver) that should play animations forward/reverse to arrive at specific KeyFrame.

Best efforts so far: [Imgur: The magic of the Internet](https://imgur.com/N64oKj6)

**Good** news is that I’ve been able to setup the hover mouse events to elicit some mixer action.  
**Bad** news is that I’m using a hacky way to do this which doesn’t allow “playing in reverse”.

**Help on this would be greatly appreciated**

```javascript
//* GLB (I've separated the mesh into 3 pieces, listing the first GLB to animate ('BG'), here)
let modelBGReady = false;
let modelBGMixer: THREE.AnimationMixer;
const modelBGClock = new THREE.Clock();

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);
});

//* Hover Event on Button (3 buttons total; here's the first of them --- 'Plan')
const buttonPlan = document.getElementById('buttonPlan') as HTMLDivElement;
buttonPlan.addEventListener('mouseover', (event) => {
    modelBGReady = true;
});

//* Animation Loop
function animate() {
    requestAnimationFrame(animate);
    // camera.position.y = Math.sin(Math.random()) * -0.05; <--- ignore this... separate problem
    render();
    if (modelBGReady) modelBGMixer.update(modelBGClock.getDelta());
    // if (modelUIReady) modelUIMixer.update(modelUIClock.getDelta()); <-- one of the other GLBs
    // if (modelWebAppsReady)modelWebAppsMixer.update(modelWebAppsClock.getDelta()); <-- same
    stats.update();
}
function render() {
    renderer.render(scene, camera);
}
animate();

```

---

<div class="post-metadata">

**Author:** ![ColoradoVibes](https://avatars.discourse-cdn.com/v4/letter/c/f14d63/32.png) [@ColoradoVibes](https://discourse.threejs.org/u/ColoradoVibes)\
**Post date:** [April 21, 2022, 2:12am UTC](https://discourse.threejs.org/t/how-to-play-animation-between-specific-keyframes-forward-and-backward/37231/2 "2022-04-21T02:12:45Z")

</div>

Sorry I keep changing the title.  
Unversed with how to describe the problem…

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [April 21, 2022, 2:31pm UTC](https://discourse.threejs.org/t/how-to-play-animation-between-specific-keyframes-forward-and-backward/37231/3 "2022-04-21T14:31:05Z")

</div>

I’m not sure on this but i think you probably want to keep the mixer moving forward normally, but change the _AnimationAction_ (i.e. the `let animation` variable) instead. See this answer for how to skip to a time:

> <https://stackoverflow.com/questions/55996807/play-mixer-animation-at-a-specific-time-playat-or-skipto/55996913#55996913>

A negative [timeScale](https://threejs.org/docs/?q=animationact#api/en/animation/AnimationAction.timeScale) will cause the action to play in reverse.