I use Scrollmagic Plugin with Tweemax but I have warnings message in Chrome Console :
WARNING: tween was overwritten by another. To learn how to avoid this issue see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another
I read the page but I don't undestand what's wrong in my code. Can I have some help please ?
// 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);
});