为什么我的触发器在Greensock TimelineMax场景中放置不正确?

时间:2018-11-06 22:14:52

标签: greensock scrollmagic timelinemax

有人可以告诉我我在做什么错吗? 开始和结束触发器与我的触发器元素根本不匹配,我也不知道是什么引发了它。

var opacityTrigger = $(".opacityTrigger");
var opacityDuration = $(".opacityWrapper").height();

var opacitytl = new TimelineMax();
var opacityItem = $(".opacityContainer li");

  opacitytl.staggerFrom(
    opacityItem,
    0.25,
    {
        opacity:"0"
    },
    0.25
  );

  var opacityScene = new ScrollMagic.Scene({
    triggerElement: opacityTrigger,
    triggerHook: 0.5,
    tweenChanges: true,
    duration: opacityDuration,
    reverse: true
  })
  .setTween(opacitytl)
  .addTo(self.controller);

1 个答案:

答案 0 :(得分:0)

万一其他人遇到麻烦,我发现我的问题是我如何引用触发器。我已经将其设置为jQuery对象的变量,而我只需要引用类名。

  var opacityDuration = $(opacityWrapper).height();
  var opacityItem = $(".opacityContainer li");
  var opacitytl = new TimelineMax();

  opacitytl.staggerFrom(
    opacityItem,
    0.25,
    {
      opacity:"0"
    },
    0.25
  );

  var opacityScene = new ScrollMagic.Scene({
    triggerElement: ".opacityTrigger",
    tweenChanges: true,
    duration: opacityDuration,
    reverse: true
  })
  .setTween(opacitytl)
  .addTo(controller);
}

这是一支笔:

https://codepen.io/moorehannah/pen/OaMNXg