the new code

I’m Dudley Storey, author of Using SVG with CSS3 and HTML5, Smashing Magazine contributing editor, teacher and speaker. I write about all aspects of web development, including:

HTML
CSS
JavaScript
SVG
Responsive Design
Galleries
PHP
MySQL
SEO
Accessibility
Servers & Hosting
Business
Exercises & Quizzes
To receive more information, including news, updates, and tips, follow me on Twitter or add me on Google+.

Become a Patron

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.

projects
 The New DefaultsA Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidyAn auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

Massive Head CanonMassive Head Canon. Intelligent discussion of movies, books, games, and technology.

books
 Pro CSS Animation (Apress, 2013)

Animation Fundamentals: Understanding Particles Mesh Animation with HTML5 Canvas Scrolling SVG Sunset


Part of the Scrolling Effects Reading List

Rotate Elements on Scroll with JavaScript

Updated 5 years ago
Share onTwitterFacebookGoogle+

When I recoded and rebranded this site four months ago, I decided to make it completely free of frameworks: while the text and visible code samples for JQuery articles often remained unchanged, under the hood everything had to run vanilla JavaScript.

One of those articles explored how to rotate elements on the page with scroll. This article presents an updated version using the code that actually runs underneath that demo, written in vanilla JavaScript… in many respects, an approach that is simpler and more efficient.

Setting The Gears

As with the previous example, the gears are placed on the page using separate id values. Since they are vector shapes, it makes sense to build and reference the gears as SVG images:


There are many possibilities for positioning the gears: very often they will have a fixed position on the page; it’s also possible to use the new CSS “scroll-to-top-then-fixed” positioning (aka position: sticky). In this example, I’ve used flexbox to separate the elements, and vw units to size them; otherwise, the gears use standard static positioning, and therefore completely scroll with the page.

#gearbox {
    display: flex;
    justify-content: space-between;
}
#leftgear, #rightgear {
    width: 20vw;
    max-width: 20%;
    height: auto;
}
Rotating the Gears

Rotating the elements themselves is quite straightforward: at the bottom of the page, add the following script.

var leftgear = document.getElementById("leftgear"),
rightgear = document.getElementById("rightgear");

window.addEventListener("scroll", function() {
    leftgear.style.transform = "rotate("+window.pageYOffset+"deg)";
    rightgear.style.transform = "rotate(-"+window.pageYOffset+"deg)";
});
Each gear rotates by the amount the window is scrolled in pixels, converted into degrees, the left gear rotating clockwise, and the right counter-clockwise. To speed up or slow down the rotation relative to the amount of scrolling, you could make window.pageYOffset part of a simple mathematical expression: multiplying or dividing it by 2, for example.

Avoid Grinding Your Gears

A common issue with any technique that manipulates scroll behaviour is “janking”: elements stuttering as they try to match user input with the browser’s repaint cycle. The easiest way to deal with this is to only move the elements when the browser is prepared to do so, via requestAnimationFrame. To do so, the addEventListener changes to listen for a custom event:

window.addEventListener("optimizedScroll", function() {
    …
})
Above the event handler, add an anonymous function:

;(function() {
    var throttle = function(type, name, obj) {
        var obj = obj || window;
        var running = false;
        var func = function() {
            if (running) { return; }
            running = true;
            requestAnimationFrame(function() {
                obj.dispatchEvent(new CustomEvent(name));
                running = false;
            });
        };
        obj.addEventListener(type, func);
    };
    throttle ("scroll", "optimizedScroll");
})();
I’ll have much more to say about requestAnimationFrame in coming articles.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/pgzeor


Scroll-to-Focus Effect For Hero Images
Background Reveal Scroll In Pure CSS