Scrollmagic: setClassToggle only supports single classes

[sambaker]

The documentation states that passing "class1 class2" to setClassToggle will work but it throws an error:

Uncaught InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('blur-out blur1') contains HTML space characters, which are not valid in tokens.

I'm using v2.0.5.

[janpaepke]

Sounds like a bug, that might stem from a time, when ScrollMagic was jQuery dependent.
I'll look into it.

[Alexand3r3]

I have the same problem..How I can fix it and add multiple css classes?

[janpaepke]

until it's fixed either use multiple scenes or try using the jquery extension (think it should work).

[Master244]

what jquery extension? I really need this feature :)

[jonw100]

ditto Master244.

I'm having the same problem - Can you advise what is this jquery extension you mentioned?

And is this scheduled to be fixed at some point?

thanks

[Ihatetomatoes]

You are right, this is still an issue, but you can achieve a similar effect by using the GreenSock .set tween to add multiple classes this way.

Here is an example on CodePen.

http://codepen.io/ihatetomatoes/pen/9e18df235da9abb2766a61990094a368

Hope that helps.

[dnfesp]

As a workaround you can overwrite ScrollMagic._util.addClass/removeClass with the following patched versions at the begining of your scrollmagic code:

ScrollMagic._util.addClass = function _patchedAddClass(elem, classname) {
if (classname) {
if (elem.classList) {
classname.split(' ').forEach(function _addCls(c) {
elem.classList.add(c);
});
} else elem.className += ' ' + classname;
}
};
ScrollMagic._util.removeClass = function _patchedRemoveClass(elem, classname) {
if (classname) {
if (elem.classList) {
classname.split(' ').forEach(function _removeCls(c) {
elem.classList.remove(c);
});
} else elem.className = elem.className.replace(new RegExp('(^|\b)' + classname.split(' ').join('|') + '(\b|$)', 'gi'), ' ');
}
};

After this you'll be able to use the _setClassToggle_ method as you would expect with multiple classes.

Cheers

[Ihatetomatoes]

Great, thanks for the fix @dnfesp, here is an updated CodePen as a proof that it works.

http://codepen.io/ihatetomatoes/pen/c220082b709a2cbf4283e15df1839173

[webdevnerdstuff]

@dnfesp patch works.

@janpaepke Any idea when v2.0.6 is going to be released that has this fix?

[joshuapease]

I've worked around this issue by using Scene events.

It also provides much more flexibility than the setClassToggle method.

http://scrollmagic.io/docs/ScrollMagic.Scene.html#event:enter

Using jQuery in this example, but Vanilla JS would obviously work too.

  var $element = $('#my-element');

  var controller = new ScrollMagic.Controller();

  var scene = new ScrollMagic.Scene({
        triggerElement: $element[0],
        triggerHook: 0.5,
        duration: '100%'
      })
      .addTo(controller);

    scene.on('enter', function(){
      $element.addClass('active-class');
    });

    scene.on('leave', function(){
      $element.removeClass('active-class');
    });

[slikNET]

Can anybody help me?
I call setClassToggle twice in one scene and works only in the last element

$links.each(function () {
            var section = '#section-' + $(this).data('menuanchor');
            var height = $(section).outerHeight();

            new ScrollMagic.Scene({
                triggerElement: section,
                duration: height
            })
            .setClassToggle('body', 'pp-viewing-'+$(this).data('menuanchor')) // this not working
            .setClassToggle(this, 'active') // this working
            .addTo(controller);
        });