problems with an init-project and safari (require.js: fullpage.js, scrollmagic)

[grommas]

Hi

I’m trying to get a website working with requirejs. It works fine in most systems and in most of the browsers. But it fails (combined with ‘scrollmagic’, ‘fullpage.js’ and other script) in safari on random system versions (iMac, mbp) and random safari versions (occurred in safari 6, 7 and 8). In this case the Browser just showed a couple of elements, struggled while scrolling and crashed after time.

While I don’t know the reason for this behavior, I try to catch every mistake. I don’t know if the wrong behavior results from my lack of knowledge, if I do something completely wrong or if there is a bug inside one of the used tools. So I want to ask you, as well as the guys of the other tools – do you have any hints for me?

I’m not sure about the right implementation of plugins in requirejs. I think i got the right use for ‘scrollmagic’, but I’m not sure about ‘fullpage.js’. Is it possible to write a module-like use of ‘fullpage.js’ or is the use right as per particulars given below? Already studied the documentations, since I use all the stuff the first time, I would appreciate any help!

Best regards Jakob — http://jakob.grommas.com/bt/ In case of doing something wrong, here a detailed strip down for my main.js and my modules—

main.js (preconfigured by config) :

require(['lazySizes']);
require(['viewportUnits']);
require(['modules/fullpage']);
require(['domReady', 'modules/scrollmagic.controller', 'modules/scrollmagic.scene'], function(domReady, Controller, Scenes) {
    'use strict';
    domReady(function () {
        Controller.getController().addScene([
            Scenes.getScene00(),
            Scenes.getScene01()
            //...
        ]);
    });
});

modules/fullpage.js :

define([
    //  Dependencies of the module
    'domReady',
    'jquery',
    'fullPage'
], function (domReady, $) {
    //  Strict mode to prevent sloppy JS
    'use strict';
    domReady(function () {
    //  This function is called once the DOM is ready.
    //  It will be safe to query the DOM and manipulate
    //  DOM nodes in this function.
        var indexAll = {},
            getSectionIndex = $('section').length,
            currentSlide;

        $("#viewport").fullpage({
            sectionSelector: 'section',
            slideSelector: 'article',
            menu: '#menu',
            anchors: ['example1', 'example2', 'example3'],
            autoScrolling: false,
            keyboardScrolling: true,
            continuousVertical: true,
            loopHorizontal: true,
            scrollingSpeed: 800,
            verticalCentered: false,
            easing: 'easeInQuart',
            css3: false,
            fixedElements: '.pinContainer',
            slidesNavigation: false,
            afterRender: function(){
                    // do nothing
            },
            afterLoad: function(anchorLink, index){
                currentSlide = indexAll[index];
                if (index === 1) {
                    // do this
                } else {
                    // do that
                }
                if (index > 2 && index < getSectionIndex - 1) {
                    // do this
                    if (index === 3 || index === getSectionIndex - 2) {
                        // do this
                    } else {
                        // do that
                    }
                } else {
                    // do that
                }
                var ignoreThisShit = anchorLink;    // DIRTY HACK
                ignoreThisShit = 'ignoreThisShit';  // DIRTY HACK
            },
            afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
                var currentSlideIndex = slideIndex + 1;
                indexAll[index] = currentSlideIndex;
                if (index > 3 < getSectionIndex - 3) {
                    // do this
                } else {
                    // do that
                }
                var ignoreThisShit = anchorLink;    // DIRTY HACK
                ignoreThisShit = slideAnchor;       // DIRTY HACK
                ignoreThisShit = 'ignoreThisShit';  // DIRTY HACK
            }
        });
    });
});

modules/scrollmagic.controller.js :

define([
    // Dependencies of the module
    'jquery',
    'scrollMagic'
], function ($, ScrollMagic) {
    // Strict mode to prevent sloppy JS
    'use strict';
    // Private variables
    var _controller = new ScrollMagic.Controller();
    // Public API
    return {
        // Getter for private variable
        getController: function () {
            return _controller;
        },
        // File an event on initialisation
        init: function () {
            $(document).trigger(_controller);
        }
    };
});

modules/scrollmagic.controller.js :

define([
    // Dependencies of the module
    'jquery',
    'TweenMax',
    'scrollMagic'
], function ($, TweenMax, ScrollMagic) {
    // Strict mode to prevent sloppy JS
    'use strict';
    // private functions
    var windowHeight  = $(window).innerHeight();
    function getWindowHeight() {
        return windowHeight;
    }
    // Private variables
    var _scene01 = new ScrollMagic.Scene({
        triggerElement: '#section1',
        triggerHook: 0,
        duration: getWindowHeight
    }).setPin($('#pinContent2'));
    var _scene02 = new ScrollMagic.Scene({
        triggerElement: '#section2',
        triggerHook: 1,
        duration: getWindowHeight
    }).setTween(TweenMax.to('#section1', 1, {backgroundColor: '#000'}));
    // Public API
    return {
        // Getter for private variable
        getScene01: function () {
            return _scene01;
        },
        getScene02: function () {
            return _scene02;
        },
        // File an event on initialisation
        init: function () {
            $(document).trigger(_scene01).trigger(_scene02); // is this right?
        }   
    };
});

[drublic]

Thanks for referring to the project. This bug does not seem to be related to INIT. So sadly we cannot help you with debugging the project. Please refer to the requirejs docs to find out more about it and open a StackOverflow issue which might be the best solution here :)

Thanks for using INIT.

[grommas]

Yeah, a StackOverflow is probably the best solution. Never had problems like this while developing, strange stuff, I'll check it out. Thank you for your good work, I am looking forward to the new version!

[drublic]

Thank you! Hopefully we won't disappoint you :)