I have a pretty simple animation with only one element, but when I scroll, it turns out to be pretty laggy, though I use requestAnimationFrame() and transform property instead of top/left. What's the problem with my code?
var floating = document.getElementsByClassName('floating');
function moveFloating(offset) {
for (let i = 0; i < floating.length; i++) {
floating[i].style.transform = 'translate(0px, ' + offset +'px)';
}
}
function loop() {
let scrollOffset = window.scrollY;
moveFloating(scrollOffset);
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);html,
body {
height: 100%;
width: 100%;
margin: 0 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
}
.frame {
height: auto;
width: 100%;
position: relative;
box-sizing: border-box;
padding: 50px;
}
.static {
width: 30%;
}
.floating {
position: absolute;
margin-left: auto;
margin-right: auto;
top: 50px;
left: 0;
right: 0;
text-align: center;
}<body>
<div class="container">
<div class="frame">
<p class="static">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et volutpat tortor. Phasellus
dignissim euismod ante, vel vulputate sapien vehicula dapibus. Phasellus sollicitudin est ac neque
interdum, non vulputate augue efficitur. In feugiat convallis nunc. Etiam at luctus erat. Pellentesque
in scelerisque tortor, vitae sodales lorem. Morbi vitae maximus massa. Donec aliquet dolor neque, porta
tristique massa efficitur id. Ut ac odio justo. Maecenas accumsan justo id turpis lobortis vulputate.
Aliquam ut sapien purus. Vestibulum vel sagittis purus. Quisque et gravida odio. Curabitur pretium
lacinia nunc, nec dignissim lacus tristique sed. Vivamus ligula mi, interdum id hendrerit eget, posuere
quis neque. Nulla eu eleifend arcu.
</p>
<h2 class="floating">Floating text</h2>
</div>
</div>
<script src="script.js"></script>
</body>Event listeners perform better than requestNextAnimationFrame, so it's better to add an event listner for a scroll event. Thanks to @CasperKuethe