Laggy CSS animation with transform property

Question

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>

`window.scrollY` doesn't update so fast and the update speed differs in different browser. You could add an eventListener for scroll on window and then update the scrollOffset. — Casper Kuethe, Jun 26 '22 at 18:56
If possible, consider using `position: fixed;` or `position: sticky;` to create a floating "fixed" effect. It solves a lot of the performance. — Emiel Zuurbier, Jun 26 '22 at 19:02
@CasperKuethe, could you please specify how can I obtain an offset inside the event listner? As I understand, I have to use window.scrollY either way — DENIS KOVALENKO, Jun 26 '22 at 19:33
Take a look at [this](https://stackoverflow.com/questions/12522807/scroll-event-listener-javascript) stackoverflow question. The eventListener can update more often than `requestNextAnimationFrame` — Casper Kuethe, Jun 26 '22 at 19:35

score 1 · Answer 1 · answered Jun 26 '22 at 19:42

1

Event listeners perform better than requestNextAnimationFrame, so it's better to add an event listner for a scroll event. Thanks to @CasperKuethe

answered Jun 26 '22 at 19:42

DENIS KOVALENKO

31
1
7

Laggy CSS animation with transform property

1 Answers1