[Animation don't works before GreenSock remove and add a class to the Trigger Element]

2 minutes ago, Shaun Gorneau said:

 

That's exactly the reason to have it in a CodePen ... not working  

See the Pen WmMqxX by iLinko (@iLinko) on CodePen

 

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)

[Animation don't works before GreenSock remove and add a class to the Trigger Element]

13 minutes ago, Shaun Gorneau said:

There's a lot going here ... please make a barebones demonstration of the problem in CodePen. Also, by the looks of things like

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

 

Quote

You're using GSAP to simply swap classes, which I assume means you're using CSS transitions for the tweens. You really should pick one ... CSS transitions ... or GSAP.

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 ?

[Animation don't works before GreenSock remove and add a class to the Trigger Element]

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

[Animation don't works before GreenSock remove and add a class to the Trigger 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?