I finished some scroll-driven animation with the help of the fantastically awesome Superscrollorama. I’m using min-width media queries to only render the animated elements in the browser above a certain size; 47.5em (760px) in this case. Below that screen size those elements are set to display: none preventing them, and their background images, from being rendered by the browser.
For a start, I found Paul Irish’s demo of matchMedia, and used it to only fire up Superscrollorama along with the same media query width used by the CSS.
The two files, tweenmax.js and superscrollorama.js, are still being loaded up unnecessarily though. Typically I include js files in WordPress using wp_register_script(), and wp_enqueue_script() and have so far been unable to have the scripts enqueued based on a media query.
Which looks like this:
However, from what I’ve heard, it’s only us web folk who resize every new site we land on as a first action, so I decided the reduced page weight for small screen users is an acceptable trade off for this interim solution.