Play button and animation scrubber from editor.

[Biglow230]

Question for y'all, I'm trying to understand how the play animation check box and animation scrubber are implemented in the editor. The elements I'm referring to appear when you load a model with animations. The play button is automatically checked if the animation auto plays. And the scrubber allows you to go frame by frame through the animation.

I'd like to implement these in my own project.

Can someone possibly give me an example of how I'd implement both the html and what ever components are needed.

As a reference I'm using the "show model dimensions" example as a foundation. Pretty new to this level of web implementation/development.

[elalish]

Just call play() and pause() and set the currentTime: https://modelviewer.dev/docs/#entrydocs-animation-properties-currentTime

[Biglow230]

Hey @elalish ,

I looked though the documentation but I couldn't find an example of how to invoke/call the function. I'm a little new to this side of web programming. This is what I've been able to put together from reading up but it doesn't seem to be working.

Here is where I'm at.
`<model-viewer id="Game-Models" bounds="tight" ar ar-modes="webxr"
ar-scale="auto" shadow-intensity="0" camera-controls
src="" alt=" " animation-name="" auto-rotate auto-rotate-delay="10000"
min-field-of-view="0" max-field-of-view="300" camera-target="0m 1m 0m"interaction-prompt="none" animation-crossfade-duration = 2 >

Play Stop

modelViewer.addEventListener('load',()=>{

  $("#range-control").rangeslider({
polyfill: false,
onSlideEnd: function(position, value){
    modelViewer.currentTime = modelViewer.duration * value / 100;
}

});

$(modelViewer).bind('timeupdate', function(){
var percent = modelViewer.currentTime/ modelViewer.duration * 100;
$("#range-control").val(percent).change();
$("#status").text(Math.round(percent*100)/100+"%");
});

$("#btn-play").click(function(){
modelViewer.play();
});

$("#btn-stop").click(function(){
modelViewer.pause();
});

});

});

`

[elalish]

Looks like you're on the right track; check the console and debug the JS. Maybe start with something simpler to get it working one piece at a time.

[Biglow230]

Was able to successfully replicate the animation seek function and play/pause ☺️

[elc274]

How did you manage to perform play and pause in model-viewer?
do you have any example?