Trying the native Element.animate method, but cannot add keyframe percentages
1
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
javascript css
asked Nov 21 '18 at 23:57
pttsptts
514311
|
show 3 more comments
1
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
javascript css
asked Nov 21 '18 at 23:57
pttsptts
514311
probably talking about this question (stackoverflow.com/questions/53421475/…) where there is an easy CSS solution
– Temani Afif
Nov 21 '18 at 23:59
Well, the easy CSS solution is not responsive and the element still overflows.
– ptts
Nov 22 '18 at 0:00
And that is besides the point, I am talking about trying this new, potentialy very valuable technology.
– ptts
Nov 22 '18 at 0:02
it's responsive, check the duplicate
– Temani Afif
Nov 22 '18 at 0:02
It cannot be really responsive when the parent element has a hard coded px width. It is an unsatisfying reply, nobody would deploy that to a live website/app. If the OP is happy with that answer, fine, but this is a new question with new scope. How to add keyframe % values to the array.
– ptts
Nov 22 '18 at 0:05
|
show 3 more comments
1
1
1
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
javascript css
asked Nov 21 '18 at 23:57
pttsptts
514311
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
javascript css
javascript css
asked Nov 21 '18 at 23:57
pttsptts
514311
asked Nov 21 '18 at 23:57
pttsptts
514311
asked Nov 21 '18 at 23:57
pttsptts
514311
asked Nov 21 '18 at 23:57
pttsptts
514311
asked Nov 21 '18 at 23:57
pttsptts
514311
514311
probably talking about this question (stackoverflow.com/questions/53421475/…) where there is an easy CSS solution
– Temani Afif
Nov 21 '18 at 23:59
Well, the easy CSS solution is not responsive and the element still overflows.
– ptts
Nov 22 '18 at 0:00
And that is besides the point, I am talking about trying this new, potentialy very valuable technology.
– ptts
Nov 22 '18 at 0:02
it's responsive, check the duplicate
– Temani Afif
Nov 22 '18 at 0:02
It cannot be really responsive when the parent element has a hard coded px width. It is an unsatisfying reply, nobody would deploy that to a live website/app. If the OP is happy with that answer, fine, but this is a new question with new scope. How to add keyframe % values to the array.
– ptts
Nov 22 '18 at 0:05
|
show 3 more comments
probably talking about this question (stackoverflow.com/questions/53421475/…) where there is an easy CSS solution
– Temani Afif
Nov 21 '18 at 23:59
Well, the easy CSS solution is not responsive and the element still overflows.
– ptts
Nov 22 '18 at 0:00
And that is besides the point, I am talking about trying this new, potentialy very valuable technology.
– ptts
Nov 22 '18 at 0:02
it's responsive, check the duplicate
– Temani Afif
Nov 22 '18 at 0:02
It cannot be really responsive when the parent element has a hard coded px width. It is an unsatisfying reply, nobody would deploy that to a live website/app. If the OP is happy with that answer, fine, but this is a new question with new scope. How to add keyframe % values to the array.
– ptts
Nov 22 '18 at 0:05
probably talking about this question (stackoverflow.com/questions/53421475/…) where there is an easy CSS solution
– Temani Afif
Nov 21 '18 at 23:59
probably talking about this question (stackoverflow.com/questions/53421475/…) where there is an easy CSS solution
– Temani Afif
Nov 21 '18 at 23:59
Well, the easy CSS solution is not responsive and the element still overflows.
– ptts
Nov 22 '18 at 0:00
Well, the easy CSS solution is not responsive and the element still overflows.
– ptts
Nov 22 '18 at 0:00
And that is besides the point, I am talking about trying this new, potentialy very valuable technology.
– ptts
Nov 22 '18 at 0:02
And that is besides the point, I am talking about trying this new, potentialy very valuable technology.
– ptts
Nov 22 '18 at 0:02
it's responsive, check the duplicate
– Temani Afif
Nov 22 '18 at 0:02
it's responsive, check the duplicate
– Temani Afif
Nov 22 '18 at 0:02
It cannot be really responsive when the parent element has a hard coded px width. It is an unsatisfying reply, nobody would deploy that to a live website/app. If the OP is happy with that answer, fine, but this is a new question with new scope. How to add keyframe % values to the array.
– ptts
Nov 22 '18 at 0:05
It cannot be really responsive when the parent element has a hard coded px width. It is an unsatisfying reply, nobody would deploy that to a live website/app. If the OP is happy with that answer, fine, but this is a new question with new scope. How to add keyframe % values to the array.
– ptts
Nov 22 '18 at 0:05
|
show 3 more comments
2 Answers
2
active
oldest
votes
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 valueref
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>answered Nov 22 '18 at 0:06
Temani AfifTemani Afif
67.5k93776
Fantastic, yes, offset value was what I was looking for. Does this stuff work on anything else than Chrome?
– ptts
Nov 22 '18 at 0:23
@ptts according to MDN developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/… it may also work on Firefox but it remain experimental, so don't rely on it
– Temani Afif
Nov 22 '18 at 0:26
add a comment |
1
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>answered Nov 22 '18 at 0:17
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422105%2ftrying-the-native-element-animate-method-but-cannot-add-keyframe-percentages%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 valueref
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>answered Nov 22 '18 at 0:06
Temani AfifTemani Afif
67.5k93776
Fantastic, yes, offset value was what I was looking for. Does this stuff work on anything else than Chrome?
– ptts
Nov 22 '18 at 0:23
@ptts according to MDN developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/… it may also work on Firefox but it remain experimental, so don't rely on it
– Temani Afif
Nov 22 '18 at 0:26
add a comment |
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 valueref
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>answered Nov 22 '18 at 0:06
Temani AfifTemani Afif
67.5k93776
Fantastic, yes, offset value was what I was looking for. Does this stuff work on anything else than Chrome?
– ptts
Nov 22 '18 at 0:23
@ptts according to MDN developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/… it may also work on Firefox but it remain experimental, so don't rely on it
– Temani Afif
Nov 22 '18 at 0:26
add a comment |
1
1
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 valueref
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>answered Nov 22 '18 at 0:06
Temani AfifTemani Afif
67.5k93776
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 valueref
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>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>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>answered Nov 22 '18 at 0:06
Temani AfifTemani Afif
67.5k93776
edited Nov 22 '18 at 0:11
answered Nov 22 '18 at 0:06
Temani AfifTemani Afif
67.5k93776
answered Nov 22 '18 at 0:06
Temani AfifTemani Afif
67.5k93776
answered Nov 22 '18 at 0:06
Temani AfifTemani Afif
67.5k93776
67.5k93776
Fantastic, yes, offset value was what I was looking for. Does this stuff work on anything else than Chrome?
– ptts
Nov 22 '18 at 0:23
@ptts according to MDN developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/… it may also work on Firefox but it remain experimental, so don't rely on it
– Temani Afif
Nov 22 '18 at 0:26
add a comment |
Fantastic, yes, offset value was what I was looking for. Does this stuff work on anything else than Chrome?
– ptts
Nov 22 '18 at 0:23
@ptts according to MDN developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/… it may also work on Firefox but it remain experimental, so don't rely on it
– Temani Afif
Nov 22 '18 at 0:26
Fantastic, yes, offset value was what I was looking for. Does this stuff work on anything else than Chrome?
– ptts
Nov 22 '18 at 0:23
Fantastic, yes, offset value was what I was looking for. Does this stuff work on anything else than Chrome?
– ptts
Nov 22 '18 at 0:23
@ptts according to MDN developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/… it may also work on Firefox but it remain experimental, so don't rely on it
– Temani Afif
Nov 22 '18 at 0:26
@ptts according to MDN developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/… it may also work on Firefox but it remain experimental, so don't rely on it
– Temani Afif
Nov 22 '18 at 0:26
add a comment |
1
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>answered Nov 22 '18 at 0:17
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
add a comment |
1
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>answered Nov 22 '18 at 0:17
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
add a comment |
1
1
1
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>answered Nov 22 '18 at 0:17
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
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>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>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>answered Nov 22 '18 at 0:17
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
answered Nov 22 '18 at 0:17
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
answered Nov 22 '18 at 0:17
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
answered Nov 22 '18 at 0:17
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
31715
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422105%2ftrying-the-native-element-animate-method-but-cannot-add-keyframe-percentages%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
probably talking about this question (stackoverflow.com/questions/53421475/…) where there is an easy CSS solution
– Temani Afif
Nov 21 '18 at 23:59
Well, the easy CSS solution is not responsive and the element still overflows.
– ptts
Nov 22 '18 at 0:00
And that is besides the point, I am talking about trying this new, potentialy very valuable technology.
– ptts
Nov 22 '18 at 0:02
it's responsive, check the duplicate
– Temani Afif
Nov 22 '18 at 0:02
It cannot be really responsive when the parent element has a hard coded px width. It is an unsatisfying reply, nobody would deploy that to a live website/app. If the OP is happy with that answer, fine, but this is a new question with new scope. How to add keyframe % values to the array.
– ptts
Nov 22 '18 at 0:05