angular-scroll-magic
An angular directive for ScrollWizardry, define pins and tweens in markup
Demo
http://homerjam.github.io/angular-scroll-magic/
Changelog
-
0.2.0
: Now usingscrollwizardy
instead ofScrollMagic
-
0.1.0
: BREAKING Directives now usingbindToController
and isolated scope this provides better support for defining params in controllers. You may need to put quotes around strings in your templates.
Installation
-
Install via npm
npm i -S angular-scroll-magic
-
Include the necessary files and dependencies (
ScrollWizardry
,GSAP
) on your page or in your build process -
Add
hj.scrollMagic
to app's module dependencies
Usage
Turn on indicators to help during development
// In your app config scrollMagicProvider.addIndicators = true;
smScene
Create a scene, by applying the sm-scene
directive this determines the timing for the desired behaviour
<div sm-scene="sceneId" duration="500" offset="100" trigger-hook="0.75"></div>
sm-scene
(string) : scene identifiertrigger-element
[(element|selector)] : defaults to the directive elementduration
[(integer|string)] : if using a string with a%
symbol this will be calculated against viewport heightoffset
[(integer|string)] : if using a string with a%
symbol this will be calculated against the height of the trigger element (if specified) or documenttrigger-hook
[(float)] : this determines the position of the trigger point relative to the viewport
smTween
<div sm-tween="sceneId" duration="1" from-vars="{left: '100%'}" to-vars="{left: '0%'}"></div>
sm-tween
(string) : the identifier of the scene (trigger) to useduration
(number) : duration of tween relative to length of scenefrom-vars
[(object)]to-vars|vars
(object) : options used by GSAP such as CSS propertiespersist
(boolean) : persist directive between life times
smClassToggle
<div sm-class-toggle="sceneId" classes=""></div>
sm-class-toggle
(string) : the identifier of the scene (trigger) to useclasses
(string) : the classes to add/removepersist
(boolean) : persist directive between life times
smPin
<div sm-pin="sceneId"></div>
sm-pin
(string) : the identifier of the scene (trigger) to usepersist
(boolean) : persist directive between life times
ScrollMagicService
Allows access to scenes from your controllers.
<!-- Define scene in your template --> <div sm-scene="'myScene'"></div>
// Add an observer which will trigger on initialisation of the scene ScrollMagicService.onSceneAdded('myScene', function(scene) { // do stuff with `scene` }); // Or after initialisation var scene = ScrollMagicService.getScene('myScene');