I'm working in a Prototype whit GreenSock and ScrollMagic, I'm trying to make a couple animations that react to diferent triggers, the two triggers go active to the classes: 'fadeInAnim' and 'fadeOutAnim'. fadeInAnim is the class that the page loads by default, before slide down and GreenSock realize the Animation, fadeInAnim is deleted and fadeOutAnim is added, at this point, everything is ok, but, if I try to Slide Up and trigger fadeOutAnim, anything happens.
My code is Here:
var controller = new ScrollMagic.Controller();
$('.fadeInAnim').each(function(){
var fadeInAnim = new ScrollMagic.Scene({
triggerElement: '.fadeInAnim',
duration: 0,
offset: 120,
triggerHook: 0.36,
reverse: true
})
.addIndicators({
name: 'fadeInAnim Elements scene',
colorTrigger: 'white',
colorStart: '#75C695',
colorEnd: 'pink'
})
.addTo(controller);
fadeInAnim.on("enter", function (event) {
fadeInTl = new TimelineMax();
fadeInTl
.to($intro, 0.3, {y: '-=30px', autoAlpha: 0, ease:Power4.easeIn, className:'-=fadeInAnim'})
.to($intro, 0.1,{className: '+=fadeOutAnim'})
.restart();
});
});
$('.fadeOutAnim').each(function(){
var fadeOutAnim = new ScrollMagic.Scene({
triggerElement: '.fadeOutAnim',
duration: 0,
offset: 120,
triggerHook: 0.36,
reverse: true
})
.addIndicators({
name: 'fadeOutAnim Elements scene',
colorTrigger: 'white',
colorStart: '#75C695',
colorEnd: 'pink'
})
.addTo(controller);
fadeOutAnim.on("leave", function (event) {
fadeOutTl = new TimelineMax();
fadeOutTl
.to($intro, 0, {className:'-=fadeOutAnim'})
.to($intro, 0.1,{className: '+=fadeInAnim'})
.restart();
})
});
The Idea is: The fadeInAnim only goes active if the animation be actived by scrolling down and fadeOutAnim goes active if the animation be actived scrolling Up
Is that a Bug or is just my code just skiping something?