Using Skrollr and SkrollrMenu with RequireJS

Question

I am getting an error when using skrollr and skrollrMenu using RequireJS. This is my main.js file:

require.config({
    paths: {
        jquery: '../bower_components/jquery/jquery',
        skrollr: '../bower_components/skrollr/src/skrollr',
        skrollrMenu: '../bower_components/skrollr-menu/src/skrollr.menu'
    },
    shim: {
        skrollrMenu: {
            deps: ['skrollr']
        }
    }
});

require(['app', 'jquery', 'skrollr', 'skrollrMenu'], function (app, $) {
    'use strict';

    window.onload = function() {
        var s = skrollr.init();

        console.log(s);
        // //The options (second parameter) are all optional. The values shown are the default values.
        skrollr.menu.init(s, {
            //skrollr will smoothly animate to the new position using `animateTo`.
            animate: true,

            //The easing function to use.
            easing: 'sqrt',

            //How long the animation should take in ms.
            duration: function(currentTop, targetTop) {
                //By default, the duration is hardcoded at 500ms.
                return 500;

                //But you could calculate a value based on the current scroll position (`currentTop`) and the target scroll position (`targetTop`).
                //return Math.abs(currentTop - targetTop) * 10;
            },
        });
    }
});

When I load the page I get the error Uncaught TypeError: Cannot call method 'relativeToAbsolute' of undefined at this point in the skrollr.menu file:

targetTop = _skrollrInstance.relativeToAbsolute(scrollTarget, 'top', 'top');

Then it is followed by the output of console.log(s). Does this mean that skrollr.menu.init is running before console.log(s)?

have you tried [shim config](http://requirejs.org/docs/api.html#config-shim)? See also: http://stackoverflow.com/questions/15471088/requirejs-why-and-when-to-use-shim-config — explunit, Oct 15 '13 at 20:01
@explunit I did try the shim config. I've edited my question with it included. However, I am still getting the same problem. — xylar, Oct 16 '13 at 06:07

score 1 · Accepted Answer · answered Oct 16 '13 at 08:59

1

Update to skrollr-menu 0.1.6 (I guess you're running 0.1.5).

answered Oct 16 '13 at 08:59

Prinzhorn

22,120
7
61
65

oh man without this answer I would be days debugging ;) What is the best strategy to keep external js libraries up-to-date in a project? – Advanced Oct 18 '13 at 09:47

Using Skrollr and SkrollrMenu with RequireJS

1 Answers1