Scrollmagic ajax page load issue

Question

Hi guys I am currently setting up a Wordpress page where I am loading in pages with Ajax and using Scrollmagic to set to trigger points for different containers in order to do some parallax effects.

On the first page view everything works fine and the parallax scrolling effects happen as expected, and the trigger points are set.

However when I then use the menu to navigate to a new page, I get a "Uncaught TypeError: Cannot read property 'hasAttribute' of null". I am gussing that this could be due to that i am not removing the already existing trigger points or removing them before adding new ones, but I am not sure if this is the issue.

I am using the following function for the Scrollmagic triggers, which is ran on document ready:

initSections: ->
    controller = new ScrollMagic.Controller()
    for $section in $('.page-row, .scroll-trigger')
        do ->
            scene = new (ScrollMagic.Scene)(
                triggerElement: $section
                triggerHook: 0.75
                )
            .setClassToggle($section, 'in-view')
            .addIndicators()
            .addTo(controller)

I am guessing that I somehow need to reinitialize the triggers whenever a new page is loaded in with Ajax. Which I am doing through the following code:

bindNavLinks: ->
    # Bind initial url
    url = window.location.href
    window.history.pushState({path: url}, url, url)

    $.ajaxSetup({cache:false})
    $('nav.main li a, .page_item a').click (e) =>
        e.preventDefault()
        pageUrl = $(e.target).attr('href')
        if pageUrl != window.location.href
            window.history.pushState({path: pageUrl}, pageUrl, pageUrl)
            @loadUrl(pageUrl)

loadUrl: (url) ->
    setTimeout (->
        $('#main').load url + ' #main > *', (response, status, xhr) ->
    ),2000

See code pen here: http://codepen.io/fennefoss/pen/RKbdOe

Answer 1

After some struggling I rewrote my scroll-magic scenes to be initialized together with the Ajax function. I used:

scene = scene.destroy(true);

To destroy the scenes and reset the trigger pins every time i did the Ajax call.

Answer 2

I know it has some time but this may help someone. Had the same issue and creating the controller with each ajax call and destroying it before making another ajax call was what worked for me. Example:

// without resetting the scenes
controller = controller.destroy();

// with scene reset
controller = controller.destroy(true);

Reference: Scrollmagic Controller documentation http://scrollmagic.io/docs/ScrollMagic.Controller.html#destroy