ScrollMagic. Hinzufügen mehrerer Klassen zu einem Element

Question

Wenn ich die scrollMagic Anweisungen folgen:

// 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)

ich diesen Fehler in der Konsole bekam:

InvalidCharacterError: String contains an invalid character 

Da Räume zwischen den Klassen.

Mein ganzer Szene-Code ist:

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

Raum Entfernen zwischen „große kleinen“, es funktioniert, in anderen Worten, es funktioniert nur mit einer Klasse, nicht mehr Klassen.

Wie kann ich mit mehreren Klassen arbeiten?

Answer 1

Während auf Web-Suche, fand ich, dass es eine offene Frage mit scrollmagic ist, die Sie ein Problem nur

setClassToggle einzelnen Klassen unterstützt # 313

verursacht

Um dies zu umgehen, können Sie mit der Greenstock .set-Tween-Methode mehrere Klassen hinzufügen.

Unten ist ein Code-Link, den ich online gefunden habe, der die obige Verwendung anspricht.

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

Answer 2

Haben Sie versucht:

... 
.setClassToggle('.banner', 'big') 
.setClassToggle('.banner', 'small') 
...