Scrollmagic: cant add more than one class to setClassToggle

[saltnpixels]

I tried adding multiple classes and it doesnt work this an error.

The token provided ('flipInX flipOutX') contains HTML space characters, which are not valid in tokens.
on:
.setClassToggle('.phone', 'flipInX flipOutX')

[guymeyer]

+1

[Ihatetomatoes]

If you are using GSAP you can use the .set() method and add multiple classes that way.

Here is a demo on CodePen.

[jarrodmedrano]

+1
The comments in Scrollmagic.js are wrong.

• @param {string} classes - One or more Classnames (separated by space) that should be added to the element during the scene.

This doesn't work.

[Ihatetomatoes]

Have you tried the .set method using GSAP? You only need the TweenLite to use the .set method.

[estevancarlos]

Same here.

[estevancarlos]

So this bug is a dealbreaker for me. Does anyone recommend an alternative library?

[tony]

This behavior surprised me.

While it's not a deal breaker.

I would expect multiple uses of setClassToggle() to append behaviors to a controller.

[tony]

@estevancarlos FYI, if you're using jQuery with ScrollMagic, you have a bit more flexibility since you can do multiple selectors:

https://api.jquery.com/multiple-selector/

In order words:

   new $.ScrollMagic.Scene(options)
      .duration(100)
      .setClassToggle(
        "a[href='moo'] ~ ul,a[href='moo']",
        "is-active"
      );

[chiholiu10]

Example of how to trigger multiple id's at the same time

new ScrollMagic.Scene({ triggerElement: '#intro', triggerHook: 'onLeave' })
.on('enter leave', function () {
$('#nav-bar').toggleClass('background-black');
$('#threeAnim').toggleClass('display-none');
})
.addTo(controller);