How to use scrollmagic - 10 common examples

Template.returnedCurrencies.onRendered( function () {	
	// init controller
	this.controller = new scrollmagic.Controller();
  var templ = Template.instance()
	// build scene
	 var scene = new scrollmagic.Scene({triggerElement: "#loader", triggerHook: "onEnter"})
					.addTo(templ.controller)
					.on("enter", function (e) {
             templ.limit.set(templ.limit.get()+templ.increment)
             scene.update()
          })
          
//  console.log(Currencies.findOne())
//Meteor.call('updateMarketCap');
});

componentDidMount() {
    // How to retrieve variables from scss in Javascript
    console.log(styles['break-medium'])
    console.log(styles['break-large'])
    console.log(styles['break-xlarge'])
    console.log(styles['nav-menu-break'])

    this.animation = new TimelineMax({ paused: true })
      .fromTo(this.node, 5, { opacity: 0 }, { opacity: 1 })
    this.animation.play()

    this.scrollAnim = new TimelineMax({ paused: true })
      .fromTo(this.title, 5, { opacity: 0, y: 50 }, { opacity: 1, y: 0 })

    this.scene = new Scene({ triggerElement: this.title, triggerHook: 0.4 })
    this.scene.indicatorName = 'Test'
    this.scene.on('enter', () => this.scrollAnim.play())

    if (process.env.NODE_ENV === 'development') {
      this.scene.addIndicators({ name: this.scene.indicatorName })
    }

    this.scene.addTo(this.context.scrollmagic)
  }

slides.each( (dat,i,n) => {
      let wrappernode = n[i];
      let stagenode = d3.select(wrappernode).select('.slide');
      let stageheight = stagenode.node().offsetHeight;
      // we carefully set the duration so that the scenes tile exactly, with 
      // no gaps or overlaps.
      let duration = wrappernode.offsetHeight - stageheight;
      if (i === n.length-1) {
        duration += 500; // XXX hack
      } else {
        let nextstage = d3.select(n[i+1]).select('.slide').node();
        duration += nextstage.offsetHeight;
      }
      let slide_scene = new ScrollMagic.Scene({
        triggerElement: wrappernode,
        triggerHook: isMobile() ? 'onEnter' : 'onLeave',
        offset: isMobile() ? stageheight : 0,
        duration: duration,
      })
        //.addIndicators({name: 'inner'+i})
        .on('enter', (e) => {
          let slug = dat.slug;
          console.assert(slug, "No slug set for this stage");
          let cb = dat.onEnter ?
            () => dat.onEnter(this.comp, e.scrollDirection === 'FORWARD')
          : () => null;
          if (this.comp.slug != slug) {
            vblog(`Quickchanging. Slide slug = ${slug}, current graphic slug = ${this.comp.slug}`);
            this.comp.quickChange(slug).then(cb);
          } else {

Template.returnedCurrencies.onRendered( function () {	
	// init controller
	this.controller = new scrollmagic.Controller();
  var templ = Template.instance()
	// build scene
	 var scene = new scrollmagic.Scene({triggerElement: "#loader", triggerHook: "onEnter"})
					.addTo(templ.controller)
					.on("enter", function (e) {
             templ.limit.set(templ.limit.get()+templ.increment)
             scene.update()
          })
          
//  console.log(Currencies.findOne())
//Meteor.call('updateMarketCap');
});

Template.returnedCurrencies.onRendered(function () {

  //show the menu if its hidden, sometimes it doesn't show when logging in so let's force it
  $('body').addClass('sidebar-md-show')

  // init controller
  this.controller = new scrollmagic.Controller();
  var templ = Template.instance()
  // build scene
  var scene = new scrollmagic.Scene({
      triggerElement: "#loader",
      triggerHook: "onEnter"
    })
    .addTo(templ.controller)
  //tries to stop subscription from incrementing on initial load when list is empty bypassing fast-render in process since subscription has changed and one from fast-render is no good
  this.autorun((comp) => {
    if (this.currenciesSub.ready() && this.currenciesShown.get()) {
      // console.log("running", this.currenciesShown.get())
      scene.on("enter", function (e) {
        // console.log("incrementing")
        if (!templ.everythingLoaded.get()) {
          templ.limit.set(templ.limit.get() + templ.increment)
          scene.update()

toggleElement = get(this, 'toggleElement'),
        $toggleElement = $(toggleElement),
        toggleClasses = get(this, 'toggleClasses'),
        toggleClassesOff = get(this, 'toggleClassesOff');

    // NOTE: ScrollMagic.Scene().setClassToggle is currently BROKEN!
    //
    // This will not work when multiple classes are added:
    // return new ScrollMagic.Scene(opts).setClassToggle(toggleElementId, toggleClasses);
    //
    // The following issue is related:
    // https://github.com/janpaepke/ScrollMagic/issues/313
    //
    // The workaround uses scene enter and leave events to achieve the same goal.

    let scene = new ScrollMagic.Scene(opts);

    scene.on(`enter.${this.elementId}-toggle`, () => {
      $toggleElement.addClass(toggleClasses);
      if (toggleClassesOff) {
        $toggleElement.removeClass(toggleClassesOff);
      }
    });

    scene.on(`leave.${this.elementId}-toggle`, function(){
      $toggleElement.removeClass(toggleClasses);
      if (toggleClassesOff) {
        $toggleElement.addClass(toggleClassesOff);
      }
    });

    return scene;

setScene() {
    let viewportHeight = window.innerHeight;
    // TODO: use setpin instead?
    let outerscene = new ScrollMagic.Scene({
      triggerElement: this.rootsel,
      triggerHook: 'onLeave',
      duration: Math.max(1, this.root.node().offsetHeight - viewportHeight),
    })
      .on('enter', () => this.toggleFixed(true, false))
      .on('leave', e => this.toggleFixed(false, e.scrollDirection === 'FORWARD'))
      //.addIndicators()
      .addTo(this.controller);

    let slides = this.prose.selectAll('.slide-wrapper');
    slides.each( (dat,i,n) => {
      let wrappernode = n[i];
      let stagenode = d3.select(wrappernode).select('.slide');
      let stageheight = stagenode.node().offsetHeight;
      // we carefully set the duration so that the scenes tile exactly, with 
      // no gaps or overlaps.

import ScrollMagic from 'scrollmagic';
// Need to import this here to use indicates in scenes created elsewhere
import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'

// Single global SM controller shared across graphics
const controller = new ScrollMagic.Controller();

export default controller;

setScene() {
    let scene = new ScrollMagic.Scene({
        triggerElement: this.rootsel,
        triggerHook: 'onLeave',
        offset: -200,
    })
      .on('enter', () => {
        this.updateToDrop(0);
        //console.log('enter the accordion');
      })
      .on('leave', () => {
        this.updateToDrop(ndrops);
        //console.log('leave the accordion');
      })
      .addTo(this.controller);
  }

setupIntermediateScenes() {
    for (let n=0; n <= STAGES.length-1; n++) {
      let sel = '.stage' + n;
      let kwargs;
      if (isMobile()) {
        let h = d3.select(sel).node().offsetHeight;
        kwargs = {triggerHook: 'onEnter',
          duration: window.innerHeight/2,
        };
      } else {
        kwargs = {triggerHook: 'onCenter'};
      }
      kwargs.triggerElement = sel;
      let scene = new ScrollMagic.Scene(kwargs);

      scene.on('enter', () => {
        this.chart.step(n);
        d3.select(sel).classed('active', true);
      })
      .on('leave', () => {
        if (!kwargs.duration) {
          this.chart.step(Math.max(0, n-1));
        }
        d3.select(sel).classed('active', false);
      });

      scene.addTo(this.controller);
    }

  }