homerjam/angular-scroll-magic

An angular directive for ScrollMagic, define pins and tweens in markup

angular-scroll-magic's Issues

Please update your version of the library on bower!

i'm need use the directive on my project!!!
on the bower still is 0.1.7can not trigger multiple tween!
thank you..

Use background picture on scene mixed

Hello, I would like to know if it is possible to use background-image on div with css in order to create parallax effect instead of having only a yellow div moving on the back.

Please let me know.

Rgds

Presence of detached DOM nodes due to scrollmagic after the scope is destroyed

Hello,

I have prepared a simple example in angular wherein it contains two views one with a simple button (state A) and the other (state B) contains the code of the demo page that you have for this plugin (http://homerjam.github.io/angular-scroll-magic/)

When you go from state A to B and then back to A the dom nodes of B should be destroyed and retained by garbage collector. But on taking heap snapshots it shows detached dom nodes of state B which are retained somehow by scrollmagic's javascript. Maybe there's something we are missing to destroy when the scope of B is destroyed.

I have also used the original Scrollmagic lib and in that too i am facing this issue of detached dom nodes which i have reported there as well (janpaepke/ScrollMagic#510) but unfortunately there hasn't been any progress on that thread.

The source code link is attached and i have just modified your repo's code to have two views and switching with UI router. You can switch views and then check the heap snapshots to find detached nodes SourceCode

Let me know if there's any confusion regarding this issue.

Bower.json wrong

hi there,

the property "main" in bower.json should be set angular-scroll-magic.js instead of index.js, so i updated on my local which the whole line is
"main": "./angular-scroll-magic.js",

please update to git.
thanks.
alie

Consuming Service

Hi, I have my code like this in the view and controller, but I receive undefined for scene

<div sm-scene="scene-01"></div>
var scene = ScrollMagicService.getScene('scene-01');
console.log(scene)

Am I doing something wrong?

Allow tweens to trigger TimelineMax objects

The power of scrollmagic is the ability to allow complex tweens through the use of timelines. It would be nice if it was possible to call a timeline from sm-tween. Without the ability to run a timeline, its not possible to animate multiple objects (think UL > LI > a) where you want to change the LI and the A based on the same scroll position or complex parallax animations.

sm-class-toggle

Hi, I have a problem using "sm-class-toggle" - it is not taking the sceneId so it`s not putting the class when I need it. I did I little test, opened angular-scroll-magic.js and found the directive "smClassToggle" and when I did console.log if "sceneIds" variable it returned only the first scene (that is not for classToggle), but not the scene that I need for classToggle. I did a little fix for myself in order to work but I will appreciate if you check it :)

triggerElement not recognizing id element of an expression

Hi, I was wondering if you could help me out on tween2. I'm doing a ng-repeat and trying to define the triggerElement with an id but it's not recognizing the element.

(ScrollMagic.Scene) -> ERROR: Element defined in option "triggerElement" was not found: #time-free

Here's the sample code of my ng-repeat:

<li class="timeline__left" ng-repeat="line in lines"> <div class="timeline__badge badge--{{line.id}}" sm-scene="tween-{{line.id}}" trigger-element="'#time-{{line.id}}'" duration="40%" offset="-100"> </div> <div id="time-{{line.id}}" class="timeline__panel" sm-tween="tween-{{line.id}}" from-vars="{right: '120%'}" to-vars="vm.toVars"> <div class="timeline__panel--heading"> <h4>{{line.title}}</h4> <h3>{{line.company}}</h3> <small>{{line.from}} - {{line.to}}</small> </div> <div class="timeline__body"> <p>{{line.detail}}</p> </div> </div> </li>

Any help will be great. Thanks

Easing

How can I add easing to the "to-vars"? for example: {x:-24000,ease:SteppedEase.config(24)}

smClassToggle: remove given class

Hi there, i did find a bug trying to remove a given css-class while using smClassToggle. On scroll down, a given css-class should be removed and added again when scrolled up. Like so:

<div class='"given" sm-scene="someId" duration="500" trigger-hook="0.75" sm-class-toggle="someId" classes="given">
</div>

It won't work. When i scroll to the needed position, somehow an endless loop removes/adds the class. When i scroll further, the class is removed.

Any idea why that happens?
Kind regards!

ScrollWizardry js not working anymore

Hello,

The scrollWizardry link to https://rawgit.com/homerjam/scrollwizardry/master/dist/scrollwizardry.js doesn't work anymore, can this be updated please as both the angular demo (http://homerjam.github.io/angular-scroll-magic/) and my local version give a "ScrollWizardry is not defined" error.

Thank you

Installing in agular 8

hi, thanks for the plugin

I am facing some difficulties / doubts about how to install the angle 8.
Especially in the step
hj.scrollMagic

What file should I supposed to import this into?

Is it possible to further detail the installation?
Thank you very much

Multiple sm-class-toggle for sm-scene

Hey there, I have been trying to setup two elements with sm-class-toggle that both reference the same sm-scene. The first of these elements will toggle correctly but the second one is being ignored. My structure is basically like this:

<div class='home' sm-scene='homeId' offset='1000'>

    <section class='description' sm-class-toggle='homeId' classes='class-triggers'>
        <h1>This class toggles correctly</h1>
    </section>

    <section class='features' sm-class-toggle='homeId' classes='class-does-not-trigger'>
        <h1>This class does not toggle</h1>
    </section>

</div>

When I remove the first (working) <section> the second <section> will start triggering. So either I am incorrectly assuming that this is a proper use case for ScrollMagic or perhaps the sm-class-toggle directive is not firing correctly for multiple elements.

Scroll animation starts midway on page load.

Hello, I'm having this weird behavior when setting a scrolling Tween. My setup uses out of the box functionality and I haven't modified anything inside my controllers.

When the page first loads, the effect (be it changing position or rotating it) is setup like it was already in the middle of the scrolling event. In my case the transform matrix starts like this:

matrix(0.89632, 0.44338, -0.44338, 0.89632, 0, 0)

If I scroll down and finish the animation and scroll back up the matrix looks like it should from the beginning:

matrix(1, 0, 0, 1, 0, 0)

My HTML markup looks like this:

<div class="chevron_down">
  <a sm-tween="projects"
     to-vars="{rotation: '180'}"
     ng-href="#home-projects">
    Go
  </a>
</div>

<div sm-scene="projects" duration="300" offset="0" trigger-hook="1"></div>

<div class="project-grid" id="home-projects">
  <h2>Projects</h2>
  <p class="wide-legend">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit et dolore.
  </p>
</div>

Angular version: 1.5.8
Scrollmagic version: 2.0.5
Angular Scroll Magic version: 0.0.9

Tested on browers:
Chrome: 54.0.2840.87
Firefox: 49.0.2
Microsoft Edge: 39.14931