Trying the native Element.animate method, but cannot add keyframe percentages

Question

Someone asked a related question and I am trying to make it work with the experimental technology Element.animate. The MDN documentation is rather...slim and the state of the technology is lets say infantile.

https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

What I have is this markup:

<div class="container">
<div id="movetxt">left to right, right to left</div>
</div>

Just want the movetxt div to move from left to right ad infinity within the container div.

Css is hard coded, as I do not know how to get the width of the div text node.

.container {
margin: 0 auto;
width: 300px;
border: 1px solid red;
}

#movetxt {
width: 180px;
}

Now, the JS

var container = document.querySelector(".container");
var movingText = document.getElementById("movetxt");
 var containerWidth = container.offsetWidth;
var textWidth = movingText.offsetWidth;
var totalDistance = containerWidth - textWidth;
var oneWayDistance = totalDistance / 2; //just establishing the travel distance

And now the experiment part:

 movingText.animate([
// keyframes
{ transform: 'translateX(' + oneWayDistance + 'px)' }, 
{ transform: 'translateX(-' + totalDistance + 'px)' }
], { 
// timing options
duration: 1000,
iterations: Infinity
});

This kind of works, the console throws some errors, but the thing runs.

But, I want to have this kind of keyframas format, just an example:

  0%   { transform: 'translateX(' + oneWayDistance + 'px)' },
        10%  { transform: 'translateX(-' + totalDistance + 'px)' }

If I try that, I get Failed to execute 'animate' on 'Element': Keyframes must be objects, or null or undefined.

Link to fiddle:

http://jsfiddle.net/vdb3ofmL/1135/

There must be some way to place the keyframe % values there, can anyone figure this out?

Cheers

Answer 1

You need to consider the fact that the text is initially on the left edge of the container, so you need to translate form 0 to width of container - width of text :

And what you are looking for is the offset value ^ref

 var container = document.querySelector(".container"); var movingText = document.getElementById("movetxt"); var containerWidth = container.offsetWidth; var textWidth = movingText.offsetWidth; var totalDistance = containerWidth - textWidth; var oneWayDistance = totalDistance / 2; console.log(containerWidth); console.log(textWidth); movingText.animate([ // keyframes { transform: 'translateX(0)',offset:0 }, /*0%*/ { transform: 'translateX(' + totalDistance + 'px)',offset:0.3 }, /*30%*/ { transform: 'translateX(0)',offset:1 } /*100%*/ ], { // timing options duration: 1000, iterations: Infinity }); 

 .container { margin: 0 auto; width: 300px; border: 1px solid red; } #movetxt { width: 180px; border:1px solid; } 

 <div class="container"> <div id="movetxt">left to right, right to left</div> </div> 

Answer 2

You should use offset like this

element.animate({
    opacity: [ 0, 0.9, 1 ],
    offset: [ 0, 0.8 ], // Shorthand for [ 0, 0.8, 1 ]
    easing: [ 'ease-in', 'ease-out' ],
}, 2000);

and in your case you can use like this and change your own

 var container = document.querySelector(".container"); var movingText = document.getElementById("movetxt"); var containerWidth = container.offsetWidth; var textWidth = movingText.offsetWidth; var totalDistance = containerWidth - textWidth; var oneWayDistance = totalDistance / 2; movingText.animate( {transform:['translateX(' + oneWayDistance + 'px)','translateX(-' + totalDistance + 'px)','translateX(' + oneWayDistance + 'px)'], offset: [0,0.1] }, { duration: 1000, iterations: Infinity }); 

 .container { margin: 0 auto; width: 300px; border: 1px solid red; } #movetxt { width: 180px; } 

 <div class="container"> <div id="movetxt">left to right, right to left</div> </div>