AngularJS working ScrollMagic

Question

I have a site using jQuery and ScrollMagic. When the user scroll to a specific element ScrollMagic captures that and trigger an animation using TweenMax.

In jQuery the code looks like this

var scene = new ScrollScene({
    triggerElement: '#animation_start'
}).setTween(TweenMax.from('#demo', 0.5 ,{opacity:0}));

controller.addScene([scene]);

In the new version of the site, there is a part of the page that contains much more complex animation that can be handled easily by AngularJS' two way data blinding and I want to take advantage of that. I am new to AngularJS, but I have written a couple apps in AngularJS. I am trying to wrap my head around what's the right way to approach this. Essentially, this is what I want to happen. When the user scroll to #animation_start, the AngularJS powered animation starts. In pseudo jQuery, it looks something like this:

var scene = new ScrollScene({
    triggerElement: '#animation_start'
}).setTween(**AMAZING ANIMATION TO BE HANDLED BY ANGULARJS**);

controller.addScene([scene]);

I know I am thinking the wrong way because I am still thinking jQuery. How should I approach this problem and how should I structure the code?

Any help is appreciated.

score 3 · Answer 1 · answered Dec 02 '15 at 20:31

As mentioned in Jan's answer the "proper" way to do this is with a directive that wraps ScrollMagic allowing you to define your behaviours in the markup.

I recently came across this problem myself and couldn't find an existing directive so wrote my own. It's very new and as yet undocumented but features an example, I hope to add more soon. Any feedback appreciated.

https://github.com/homerjam/angular-scroll-magic

In brief this allows you to do the following:

<body sm-scene="mainScene" duration="100%" trigger-hook="0.1">

  <div class="stylish-animation" sm-tween="mainScene" duration="1" to-vars="{opacity: 1, yoyo: true, repeat: 5}">
    <h1>Look at me go</h1>
  </div>

</body>

score 1 · Answer 2 · answered Feb 12 '15 at 12:25

Well it depends on how the AMAZING ANIMATION HANDLED BY ANGULARJS is organized...

But you could for example use ScrollMagic's events to run a callback that handles the angular animation.

For example like this:

var scene = new ScrollScene({
    triggerElement: '#animation_start'
}).on("enter", amazingCallback);

In that callback you could trigger the animations.

The PROPER AngularJS way though would be this:

You'd need to write a module that uses directives that allow you to supply all options of a scene (and controller) as attributes of an element (i.e. your trigger element) and internally creates ScrollMagic objects accordingly. That's a big challenge and if you decide to get into that, please share your results, because a plugin like this is on the long-term TODO list of ScrollMagic.

Mind that ScrollMagic 2.0 (currently in BETA) features a plugin architecture.

Alternatively you can have a look at skrollr which uses data-attributes to configure its animations and thus is already a lot closer to "the angular way".

AngularJS working ScrollMagic

2 Answers2