iLInko

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

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

fadeOutTl
  .to($intro, 0, {className:'-=fadeOutAnim'})
  .to($intro, 0.1,{className: '+=fadeInAnim'})
  .restart();

 

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.

  • Like 1

Share this post


Link to post
Share on other sites
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 😅

Share this post


Link to post
Share on other sites
Quote

the project is not working correctly, anyway,

 

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

  • Like 1

Share this post


Link to post
Share on other sites
2 minutes ago, Shaun Gorneau said:

 

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

 

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)

Share this post


Link to post
Share on other sites

If I can make a suggestion, there's way too much in your codepen to try and understand and expect people to sort through and debug.

 

Note that scrollmagic is not a gsap product so it isn't officially supported here but lots of folks use it so someone may step up to help but not if they have to spend a huge amount of time trying to parse through your code to figure it out.

 

If your goal is to get an animation to run and reverse from triggers I would suggest you strip this all down to one element and tween  and work from there to get your scroll magic actions working correctly, and then maybe someone might help you figure out why it isn't working. 

 

Once that is accomplished you should be able to scale it back up to include the rest of your tweens and elements.

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.