Package Exports

scrollmagic-plugins

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (scrollmagic-plugins) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ScrollMagic Plugins

An ES6 module to use native scrollmagic plugins

npm install --save scrollmagic-plugins

yarn add scrollmagic-plugins

Usage

Indicator Plugin

import * as ScrollMagic from "scrollmagic";
import { ScrollMagicPluginIndicator} from "scrollmagic-plugins";

ScrollMagicPluginIndicator(ScrollMagic);

const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({ triggerElement: "#my-trigger" })
  .addIndicators({ name: "My Indicator" })
  .setClassToggle("#my-trigger", "hidden")
  .addTo(controller);

GSAP Plugin

import * as ScrollMagic from "scrollmagic";
import { TweenMax, TimelineMax } from "gsap";
import { ScrollMagicPluginGsap } from "scrollmagic-plugins";

ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax);

const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({ triggerElement: "#my-trigger" })
  .setTween("#my-trigger", 0.5, { opacity: 0 })
  .addTo(controller);

Velocity Plugin

import * as ScrollMagic from "scrollmagic";
import Velocity from "velocity-animate";
import { ScrollMagicPluginVelocity } from "scrollmagic-plugins";

ScrollMagicPluginGsap(ScrollMagic, Velocity);

const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({ triggerElement: "#my-trigger" })
  .setVelocity("#my-trigger", { opacity: 0 }, { duration: 500 })
  .addTo(controller);

jQuery Plugin

import * as ScrollMagic from "scrollmagic";
import $ from "jquery";
import { ScrollMagicPluginJQuery} from "scrollmagic-plugins";

ScrollMagicPluginJQuery(ScrollMagic, $);

const controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({ triggerElement: $("#my-trigger") })
  .setClassToggle($("#my-trigger"), "hidden")
  .addTo(controller);