Menu
I'm trying to display some sort of timeline and my goal is to get it smoothly refreshed.
I managed to get something better than absolute positionning using css transform property but I'm not very happy because there is some flickering (especially when the background is dark).
var background = document.querySelector('#background');
var position = document.querySelector('#position');
var transform = document.querySelector('#transform');
var backgroundColor, borderColor
background.addEventListener('change', e => {
backgroundColor = e.target.checked ? '#333333' : 'white'
position.style.backgroundColor = backgroundColor
transform.style.backgroundColor = backgroundColor
});
let current = 0
let step = 30
for (let i = 0; i < 300; i++) {
for (let j = 0; j < 2; j++) {
var element = document.createElement('div')
element.style.position = 'absolute'
element.style.height = '50px'
element.style.width = step + 'px'
if(j) {
element.style.left = current + 'px'
} else {
element.style.left = 0 + 'px'
element.style.transform = 'translateX(' + current + 'px)'
}
element.style['border-left'] = '1px gray solid'
if (j)
position.appendChild(element)
else
transform.appendChild(element)
}
current += step
}
setInterval(refresh, 50);
let init = 0
function refresh() {
init -= 0.2
let current = init
for (var i = 0; i < position.children.length; i++) {
var c = position.children[i];
c.style.left = current + 'px'
current += step
}
current = init
for (var i = 0; i < transform.children.length; i++) {
var c = transform.children[i];
c.style.transform = 'translateX(' + current + 'px)'
current += step
}
}<html>
<body>
<div>
<input type="checkbox" id="background" label="Dark">
<label>Dark</label>
</div>
<span>Using css position<span>
<div id="position" style="width:100%;height:50px;margin-bottom:1em;"></div>
<span>Using css transform<span>
<div id="transform" style="width:100%;height:50px;"></div>
</body>
</html>Is there a better way to do this?
528
You could try using translate3d which in theory will work better with fractions of pixels (handled by the gpu). Though, it may blur a bit when at fraction of pixels.
I think you may also get better results if you use requestAnimationFrame instead of setInterval. Using requestAnimationFrame will probably require setting up some sort of timer to calculate the animation amount (as you don't know how much time has elapsed between each call)
Below is an example of translate3d, though I think different browsers implement this differently, so it may or may not produce better results.
EDIT
I have added a requestAnimationFrame example, Maybe I didn't emphasize it enough originally that it should be used instead of setInterval. There are many resources on the interwebs as to why this is.
I also added an example of just animating a wrapper div rather than the 300 lines as 1 animation rather than 300 is obviously going to yield more performance. Why the OP is not doing it this way I am not sure, maybe there is a good reason.
While you may not see much of a difference on your machine, on a slower machine the difference will be more pronounced.
If you want to dive deeper into animation performance, here is a great video by Paul Lewis on the subject:
https://www.youtube.com/watch?v=ohc8ejzSn48
var background = document.querySelector('#background');
var position = document.querySelector('#position');
var transform = document.querySelector('#transform');
var translate = document.querySelector('#translate');
var animFrame = document.querySelector('#animFrame');
var animWrapOuter = document.querySelector('#animWrapOuter');
var animWrapper = document.querySelector('#animWrapper');
var backgroundColor, borderColor
background.addEventListener('change', e => {
backgroundColor = e.target.checked ? '#333333' : 'white'
position.style.backgroundColor = backgroundColor
transform.style.backgroundColor = backgroundColor
translate.style.backgroundColor = backgroundColor
animFrame.style.backgroundColor = backgroundColor
animWrapOuter.style.backgroundColor = backgroundColor
});
let current = 0
let step = 30
for (let i = 0; i < 300; i++) {
for (let j = 0; j < 5; j++) {
var element = document.createElement('div')
element.style.position = 'absolute'
element.style.height = '50px'
element.style.width = step + 'px'
if(j == 0) {
element.style.left = current + 'px'
} else if(j == 1) {
element.style.left = 0 + 'px'
element.style.transform = 'translateX(' + current + 'px)'
} else if(j == 2) {
element.style.left = 0 + 'px'
element.style.transform = 'translate3d(' + current + 'px, 0px, 0px)'
} else if(j == 3) {
element.style.left = 0 + 'px'
element.style.transform = 'translate3d(' + current + 'px, 0px, 0px)'
} else if(j == 4) {
element.style.left = 0 + 'px'
element.style.transform = 'translate3d(' + current + 'px, 0px, 0px)'
}
element.style['border-left'] = '1px gray solid'
if (j == 0) {
position.appendChild(element)
} else if(j == 1) {
transform.appendChild(element)
} else if(j == 2) {
translate.appendChild(element)
} else if(j == 3) {
animFrame.appendChild(element)
} else if(j == 4) {
animWrapper.appendChild(element)
}
}
current += step
}
setInterval(refresh, 50);
let init = 0
function refresh() {
init -= 0.2
let current = init
for (var i = 0; i < position.children.length; i++) {
var c = position.children[i];
c.style.left = current + 'px'
current += step
}
current = init
for (var i = 0; i < transform.children.length; i++) {
var c = transform.children[i];
c.style.transform = 'translateX(' + current + 'px)'
current += step
}
current = init
for (var i = 0; i < translate.children.length; i++) {
var c = translate.children[i];
c.style.transform = 'translate3d(' + current + 'px, 0px, 0px)'
current += step
}
}
// Set a speed value.
let speed = -0.004;
function animLoop() {
let then = Date.now();
let current = 0;
function loop() {
requestAnimationFrame(loop);
let now = Date.now();
// Get the difference between now and the last time the loop ran.
let delta = now - then;
// Set the time when this loop ran.
then = Date.now();
current = current + (delta * speed);
// Animate the wrapper (5th example)
animWrapper.style.transform = 'translate3d(' + current + 'px, 0px, 0px)';
// loop over and animate translate3d requestAnimationFrame children (4th example).
for (var i = 0; i < animFrame.children.length; i++) {
var c = animFrame.children[i];
c.style.transform = 'translate3d(' + (current + (step * i)) + 'px, 0px, 0px)';
}
}
loop();
}
animLoop();<div>
<input type="checkbox" id="background" label="Dark">
<label>Dark</label>
</div>
<span>Using css position</span>
<div id="position" style="width:100%;height:50px;margin-bottom:1em;"></div>
<span>Using css transform</span>
<div id="transform" style="width:100%;height:50px;"></div>
<span>Using css translate3d</span>
<div id="translate" style="width:100%;height:50px;"></div>
<span>Using css translate3d and requestAnimationFrame()</span>
<div id="animFrame" style="width:100%;height:50px;"></div>
<span>Using css translate3d and requestAnimationFrame() animate on wrapper div</span>
<div id="animWrapOuter" style="width:100%;height:50px;">
<div id="animWrapper" style="width:100%; height:100%"></div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
