jquery - Scrollmagic - 补间被另一个覆盖
问题描述
我将 Scrollmagic 插件与 Tweemax 一起使用,但在 Chrome 控制台中出现警告消息:
警告:补间被另一个覆盖。要了解如何避免此问题,请参见此处:https ://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another
我阅读了该页面,但我不明白我的代码有什么问题。请问我可以帮忙吗?
// Scene content leave
$('.anim-leave').each(function() {
// Build Tween goodbye
var sayGoodbye = TweenMax.to($(this), 1, {autoAlpha:0});
var dataOffset = 0, dataResponsive = 0;
if (Modernizr.mq('(min-width: 992px)')) {
var dataOffset = 20;
var dataResponsive = 0.70;
} else {
var dataOffset = 200;
var dataResponsive = '80%';
}
// Element sticky
var fadeGoodbye = new ScrollMagic.Scene({
triggerElement: this,
offset: $(this).outerHeight() - dataOffset,
triggerHook: dataResponsive
})
.setTween(sayGoodbye)
.addTo(controller);
});
// Scene stagger
$('.anim-stagger-s').each(function() {
// Build Tween up and show
var stagger = TweenMax.staggerFromTo($(this).find('.anim-element'), 1,
{
opacity: 0,
delay: 0,
ease: Power2.easeOut
},
{
opacity: 1,
ease: Power2.easeOut
},
0.2);
var showScene = new ScrollMagic.Scene({
triggerElement: this,
offset: -150,
triggerHook: 0.55,
duration: $(this).outerHeight()
})
.setTween(stagger)
.addTo(controller);
});
// Scene stagger
$('.anim-stagger-v').each(function() {
// Build Tween up and show
var stagger = TweenMax.staggerFromTo($(this).find('.anim-element'), 1,
{
y: 200,
opacity: 0,
delay: 0,
ease: Power2.easeOut
},
{
y: 0,
opacity: 1,
ease: Power2.easeOut
},
0.2);
var showScene = new ScrollMagic.Scene({
triggerElement: this,
offset: -150,
triggerHook: 0.55,
duration: $(this).outerHeight()
})
.setTween(stagger)
.addTo(controller);
});
// Scene stagger
$('.anim-stagger-h').each(function() {
// Build Tween up and show
var stagger = TweenMax.staggerFromTo($(this).find('.anim-element'), 1,
{
x: -80,
opacity: 0,
delay: 2,
ease: Power2.easeOut
},
{
x: 0,
opacity: 1,
ease: Power2.easeOut
},
0.5);
var showScene = new ScrollMagic.Scene({
triggerElement: this,
offset: -150,
triggerHook: 0.55,
duration: $(this).outerHeight()
})
.setTween(stagger)
.addTo(controller);
});
解决方案
推荐阅读
- typescript - 零个或所有可选但类型化的参数
- r - 用于汇总贷款数量的 R 函数
- mysql - 如何在mysql中正确利用索引的力量
- batch-file - findstr "^" 不起作用,但 "^^" 可以查找开始行
- r - 在 data.table 中描述 .SD 和 .SDcols 的更好方法是什么?
- c# - Unity 2D 中 Pixel Perfect Camera 和 Cinemachine 的问题
- node.js - 为什么一个 npm 模块会删除其他 npm 模块?
- ruby-on-rails - Spree Commerce 设置错误:“未知版本...(运行时错误)”
- c - 我无法使用 for 循环打印 char 数组的元素
- javascript - 如何使用 reactjs 从多个 API 获取搜索结果