Trigger Element Error when Using this.$()

[Shaneprrlt]

I am trying to use this library, and just to get set up, I followed the code you posted in the README. However, when I try to create a new scene object in a component's didInsertElement, I get an error from ScrollMagic saying the element I passed to triggerElement was not found.

Here's the code for my component:

createScene: Ember.on('didInsertElement', function() {

    const scrollController = this.get('scrollMagic').getController();

    let scene = new ScrollMagic.Scene({
      triggerElement: this.$()
    });

    scene.setTween(TweenLite.fromTo(this.$(), 1, { opacity: 0, opacity: 1 }));

    scrollController.addScene(scene);
  }),

and this is the error I am getting from chrome:

I've played around with this a few times, and I don't want to use a different method, since I think setting triggerElement to this.$() is the cleanest way of writing that.

I should also note that when I click on the ref to the dom element in the error above, it does correspond to a div that exists. After all, this code is called after didInsertElement.

[willviles]

@Shaneprrlt, ScrollMagic is expecting a DOM object to be passed to it, not a jQuery object.

Therefore you've got two options: use either this.$()[0] or this.get('element').

I've updated the README to reflect this.

[Shaneprrlt]

@willviles Thanks! That worked. At least for creating the Scene. However, I am still getting one error when calling TweenLite.fromTo, I've updated my code a bit.

createScene: Ember.on('didInsertElement', function() {

    const scrollController = this.get('scrollMagic').getController();

    let elem = this.$()[0],
      scene = new ScrollMagic.Scene({
        triggerElement: elem
      });

    scene.setTween(TweenLite.fromTo(elem, 1, { opacity: 0, opacity: 1 }));
    scrollController.addScene(scene);
  }),

And I'm still getting a similar error in the startAt call with TweenLite.

Edit: My mistake! My call to TweenLite.fromTo was just incorrect. Here's the updated code. Thanks for the help @willviles !

createScene: Ember.on('didInsertElement', function() {

    const scrollController = this.get('scrollMagic').getController();

    let elem = this.$()[0],
      scene = new ScrollMagic.Scene({
        triggerElement: elem
      });

    scene.setTween(TweenLite.fromTo(elem, 1, { opacity: 0 }, { opacity: 1 }));
    scrollController.addScene(scene);
  }),

[willviles]

No worries!