Velocity.js not working in IE8

Question

I'm trying to include a JavaScript fallback for Microsoft Internet Explorer 8 for a CSS3 based animation using Velocity.js and Modernizr. This is the site I'm working on (it's a case study on crossbrowser compatibility).

http://bit.ly/1G03UMo

This is how I've done it.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript">
    Modernizr.load([{
        test: Modernizr.csstransforms && Modernizr.csstransforms3d && Modernizr.cssanimations,
        nope: ['http://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js', 'js/animatie.js']
    }]);
</script>

The Modernizr tests (csstransforms, csstransforms3d and cssanimations) all return a logical answer - 'no-xxx' in IE. The files mentioned in the nope array all load in that case.

The contents of the animatie.js file are as follows.

$(document).ready(function(){
    $('div#tandwiel').velocity({
        rotateZ: '360deg'
    },
    {
        duration: 10000,
        easing: 'linear',
        loop: true
    });
});

I am pretty sure the jQuery code is right, since outputting to the console yields predictable results. I am also pretty sure Velocity.js is loaded, since animating a dull property like opacity actually does work in every browser.

In the Velocity.js documentation I found that it doesn't actually need jQuery to perform its magic, but it should be included for it to work in IE8.

Things I sort of ruled out.

It hardly can't be a syntax error. Checked thrice.
It doesn't have anything to do with load order. jQuery seems to be loaded when the animatie.js file is loaded. The yepnope library also honors the order of the files mentioned.
It can't be Velocity.js, since the author is way smarter than I am and there aren't many complaints it doesn't work in IE8.

(I know, a spinning gear isn't going to make or break the user experience, but I would like to know what is going on here).

Any help is greatly appreciated.

undefined undefined · Accepted Answer · 2015-03-11T21:23:56

SCRIPT5022: Velocity: IE8 and below require jQuery to be loaded before Velocity. File: velocity.min.js, Line: 3, Column: 9801

This is shown in the console of ie8 when opening the link in the question.
Have you tried loading jquery via modernizr?

    Modernizr.load([{
        test: Modernizr.csstransforms && Modernizr.csstransforms3d && Modernizr.cssanimations,
        nope: ['http://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js', 'js/animatie.js'],
        both: ['http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js']
    }]);

Velocity.js not working in IE8

1 Answers