How to use the scrollmagic.Controller function in scrollmagic

To help you get started, we’ve selected a few scrollmagic examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Blockrazor / blockrazor / imports / ui / pages / returnedCurrencies / returnedCurrencies.js View on Github external
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');
});
github Blockrazor / blockrazor / imports / ui / pages / returnedCurrencies / returnedCurrencies.js View on Github external
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()
github polygraph-cool / song-repetition / src / js / scroll.js View on Github external
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;
github wmde / Lizenzhinweisgenerator / redesign / js / scrolling_effects.js View on Github external
'use strict';

var $ = require( 'jquery' ),
	ScrollMagic = require( 'scrollmagic' );
require( 'gsap' );
require( 'scrollmagic-gsap' );

var controller = new ScrollMagic.Controller();

var fadeHeadingUp = TweenMax.fromTo(
	'.top-wrapper',
	1,
	{ opacity: 0, top: '15%' },
	{ opacity: 1, top: 0 }
);
var moveTextboxUp = TweenMax.fromTo(
	'#file-form',
	1,
	{ top: 0 },
	{ top: '60%', ease: Linear.easeNone }
);

var upTweens = new TimelineMax();
upTweens.add( [ fadeHeadingUp, moveTextboxUp ] );
github willviles / ember-scrollmagic / addon / services / scroll-magic.js View on Github external
addController(id = `application`, opts = {}) {
    if (get(this, 'isFastBoot')) { return; }
    let controller = new ScrollMagic.Controller(opts);
    set(this, `registry.${id}`, controller);
    return controller;
  },

scrollmagic

The javascript library for magical scroll interactions.

(MIT OR GPL-3.0+)
Latest version published 3 years ago

Package Health Score

61 / 100
Full package analysis