Multiple Scenes and a Controller(?)

[ohhskar]

Hey there, I have a question regarding multiple scenes and Controllers. I didn't see examples with multiple scenes and I wanted some clarification on how ScrollScene handles these

I have this block of code:

const parallax = () => {
  /* Tween created and elements queried here */

  const scrollScene = new ScrollScene({
    triggerElement: triggerNode,
    gsap: { timeline: parallaxTimeline },
    duration: triggerNode.scrollHeight,
  });
};

const show = () => {
  /* Tween created and elements queried here */
    const scrollScene = new ScrollScene({
      triggerElement: item,
      gsap: { timeline: showTimeline, reverse: false },
    });
};

document.addEventListener('DOMContentLoaded', () => {
  parallax();
  show();
});

Since ScrollScene does not need an implicit ScrollMagic controller, does this mean that the all of the scenes are under the controller of the first ScrollScene created? or is there a global controller created even if no ScrollScene has been created?

This isn't really an issue but more of a question. Didn't find an IRC channel or somewhere else to discuss. Sorry about polluting your issues with this.

[jonkwheeler]

The README touches on this a bit.

ScrollScene 100% uses a ScrollMagic controller in the form of a global controller. ScrollScene creates this for you. ScrollScene is just a layer on top of ScrollMagic. ScrollObserver (also in this package) does not use any ScrollMagic.

If you don't want to use the global controller... you can disable this...

Search globalController and useGlobalController in the README. If you set this to false, it'll create a new controller on the ScrollScene object.

const scrollScene = new ScrollScene({
  useGlobalController: false,
})

You can then access that controller if you need to using scrollScene.Controller... example: scrollScene.Controller.destroy(true).