iLInko

I made it, here is a demo on CodePen. Don't pay atenttion to the unstyled elements after the fadeIn, thats a problem of SCSS. The real Idea of this is just all the elements Fading In and after finishing the Animation, FadeOut everything and "restart" the website (not literally, just go back to the Start place on the Page)

I already tried but the project is not working correctly, anyway, I just uploaded the entire project to a GitHub repository. https://github.com/iRinku/AlphaDemo I'm not using GSAP only for a swap classes, in that case, JavaScript or jQuery would make that more easier, but, I'm working in some animations for a website and some cools stuff but I'm doing something wrong and I don't know what is that wrong thing ?

I see the title of the topic is wrong, the Animation don't works AFTER GreenSock remove and add a class $intro element

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?