How to fix animation performance?

Question

JavaScript

So it goes.
There is an animation code:

if ( $('.landing__superdesign').length ) {
        let f = $('.landing__superdesign-f');
        let s = $('.landing__superdesign-s');
        let t = $('.landing__superdesign-t');

        let parallax = () => {
            let scrollTop = $('.wrap').scrollTop();
            f.css('transform', 'translateY(' + scrollTop/10 + 'px)');
            s.css('transform', 'translateY(' + -scrollTop/10 + 'px)');
            t.css('transform', 'rotate(' + (45 + scrollTop/10) + 'deg)');
            window.requestAnimationFrame(parallax);
        };
        window.requestAnimationFrame(parallax);
    }

three elements, two move vertically, one rotates around its axis (the elements are simple shapes: two rectangles and a line)
But as soon as I start scrolling the page, the macbook turns on the coolers, heats up and the page lags a bit.
In addition to this animation, there is almost the same one for the background image - it moves horizontally using backgriund-position. Without animated figures, the page does not freeze, with figures the pain already begins.
What is wrong and how to facilitate animation?

Answer 1

Why spin this function 60 times per second? It is impossible to hang up on some kind of scrolling event or the like? The parameters don't seem to change.
like this