Fade in-out sections

[Али К]

Hey guys , where is my mistake  here , I want to have fade in - out between sections without to scroll down, example
I don't ask for any 3d animation , I just want to know why the fade in - out not working.
Thanks

See the Pen gOwVwMV by itsalimanuel (@itsalimanuel) on CodePen

[Carl]

when things don't work it's important to check the errors and warnings

 

your pen had numerous warnings 

 

gsap-latest-beta.min.js:10 Invalid property scrollTrigger set to Object Missing plugin? gsap.registerPlugin()
 

 

please add this line above your other code

 

gsap.registerPlugin(ScrollTrigger)

 

This is necessary in cases where you are loading ScrollTrigger BEFORE gsap which is what it appears you are doing in your pen. Using registerPlugin is a best practice which is recommended to avoid these issues (as explained in the docs)

 

[Али К]

 Hey @Carl , yeah , but I just forget to add it here(I have it in my JavaScript file) , now you can check the code , you will understand what I mean

[Carl]

sorry, that example you posted appears to be incredibly complex. I'm not at all prepared to figure out and explain how that is achieved. it appears the animation is not controlled with scrub:true. once a section is reached the animation plays on its own. Hopefully that helps. Good luck with the project!

[Али К]

Okay, but I said before ( I'M NOT ASKING ABOUT 3D ANIMATION) , Just i want to understand why my code not working as fade-in fade-out

[ZachSaucier]

18 minutes ago, Ali Manuel said:

why my code not working as fade-in fade-out

It is working. You're scrubbing through it. If you scroll slow enough you can see that happening. If you scroll quickly then it will jump because that's what you're telling it to do. 

 

Maybe you'd like a numerical scrub like scrub: 0.5?

 

Or perhaps you'd like to fire set enter and exist animations (i.e. don't use scrub, just use toggleActions. Or just use the callbacks and fire new tweens each time).

[akapowl]

 

In addition to what the others said:

 

That page you linked to does use some sort of scrolljacking - something like fullpage.js does.

This is not what ScrollTrigger is built to do in the first place.

 

You can certainly achieve something like that with ScrollTrigger but you'd have to do most of the work (like handling eventlisteners and hijacking the all different possible scroll-events) yourself or choose to use a library like fullpage.js that does it for you.

 

 

[mikel]

Hey @Ali Manuel,

 

Is this - very simple case - what you want to achieve

 

See the Pen ExNxXyq?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[Али К]

@akapowl okay , I will, Thank you 

[Али К]

@mikel  Yeah , exactly , thank you ))