ScrollMagic. Adding multiple classes to an element

Question

If I follow the scrollMagic instructions:

// add multiple classes to multiple elements defined by the selector '.classChange'
scene.setClassToggle(".classChange", "class1 class2 class3");

(http://scrollmagic.io/docs/ScrollMagic.Scene.html#setClassToggle)

I got this error in the console:

InvalidCharacterError: String contains an invalid character

Because spaces between classes.

My entire scene code is:

              var ourScene = new ScrollMagic.Scene({
                triggerElement: '.banner',
                triggerHook: 0,
                offset: 20
              })
              .setClassToggle('.banner', 'big small')
              .addTo(controller);

Removing space between "big small", it works, in other words, It works just with one class, not multiple classes.

How can I work with multiple classes?

Answer 1

While searching on web, I found that there is an open issue with scrollmagic which causes you a problem

setClassToggle only supports single classes #313

To get around this you can use Greenstock .set tween method to add multiple classes.

Below is a codepen link that i found online addressing the above usage.

var setMultipleClasses = TweenMax.set($('p'), {
    className: "red bold"
});

// Create a ScrollMagic Scene
new ScrollMagic.Scene({
  triggerElement: "p"
})
.setTween(setMultipleClasses)
.addIndicators()
.addTo(ctrl);

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