ScrollMagic Plugins

An ES6 module to use native scrollmagic plugins

npm install --save scrollmagic-plugins

or

yarn add scrollmagic-plugins

Usage

Indicator Plugin

1import * as ScrollMagic from "scrollmagic";
2import { ScrollMagicPluginIndicator} from "scrollmagic-plugins";
3
4ScrollMagicPluginIndicator(ScrollMagic);
5
6const controller = new ScrollMagic.Controller();
7
8new ScrollMagic.Scene({ triggerElement: "#my-trigger" })
9  .addIndicators({ name: "My Indicator" })
10  .setClassToggle("#my-trigger", "hidden")
11  .addTo(controller);

GSAP Plugin

1import * as ScrollMagic from "scrollmagic";
2import { TweenMax, TimelineMax } from "gsap";
3import { ScrollMagicPluginGsap } from "scrollmagic-plugins";
4
5ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax);
6
7const controller = new ScrollMagic.Controller();
8
9new ScrollMagic.Scene({ triggerElement: "#my-trigger" })
10  .setTween("#my-trigger", 0.5, { opacity: 0 })
11  .addTo(controller);

Velocity Plugin

1import * as ScrollMagic from "scrollmagic";
2import Velocity from "velocity-animate";
3import { ScrollMagicPluginVelocity } from "scrollmagic-plugins";
4
5ScrollMagicPluginGsap(ScrollMagic, Velocity);
6
7const controller = new ScrollMagic.Controller();
8
9new ScrollMagic.Scene({ triggerElement: "#my-trigger" })
10  .setVelocity("#my-trigger", { opacity: 0 }, { duration: 500 })
11  .addTo(controller);

jQuery Plugin

1import * as ScrollMagic from "scrollmagic";
2import $ from "jquery";
3import { ScrollMagicPluginJQuery} from "scrollmagic-plugins";
4
5ScrollMagicPluginJQuery(ScrollMagic, $);
6
7const controller = new ScrollMagic.Controller();
8
9new ScrollMagic.Scene({ triggerElement: $("#my-trigger") })
10  .setClassToggle($("#my-trigger"), "hidden")
11  .addTo(controller);