Jump to content
Search Community

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

iLInko test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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?

Link to comment
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
Link to comment
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 ?

Link to comment
Share on other sites

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)

Link to comment
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
Link to comment
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.
×
×
  • Create New...