So, if I wanted to make another element animate similar to the one done previously do I have to make a separate JS file? I'm trying this but is not working.
I'm having issues understanding how to attach multiple tweens to the same triggerElement.
console.clear();
const tween = new TimelineMax();
const tween2 = new TimelineMax();
/*=======================
Animations
=======================*/
tween.add(
TweenMax.to ('#mobileLogo', 1,{
opacity:0,
ease:Power1.easeInOut,
})
);
tween.add(
TweenMax.from ('#containerB, .containerC', 0.5,{
opacity:.5,
})
);
tween2.add(
TweenMax.to ('.pictureSpacer', 0.25,{
opacity:1,
})
)
const controller = new ScrollMagic.Controller();
const controller2 = new ScrollMagic.Controller();
/*=======================
Scenes
=======================*/
const scene = new ScrollMagic.Scene({
triggerElement: '#hook',
duration: 395,
triggerHook: 0.9
})
const scene2 = new ScrollMagic.Scene({
triggerElement: 'hook',
duration: 395,
triggerHook: 0.9
})
/*=======================
Add to scene
=======================*/
.setTween(tween) //Applies tween animation to Scroll action
//.addIndicators() // Display indicators for triggers
.addTo(controller)
.setTween(tween2)
.addTo(controller2);
function sizeAll() {
var w = window.innerWidth;
if ( w < 450) {
scene.enabled(true);
scene2.enabled(true);
} else {
scene.enabled(false);
scene.enabled(false);
}
}
$(window).resize(sizeAll);
sizeAll();
Any tips?
Thanks in advance