Share Posted January 29 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 Link to post Share on other sites
Share Posted January 29 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) 3 Link to post Share on other sites
Author Share Posted January 29 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 Link to post Share on other sites
Share Posted January 29 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! 1 Link to post Share on other sites
Author Share Posted January 29 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 Link to post Share on other sites
Share Posted January 29 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). 5 Link to post Share on other sites
Share Posted January 29 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. 4 1 Link to post Share on other sites
Share Posted January 29 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 2 1 Link to post Share on other sites
Author Share Posted January 29 @mikel Yeah , exactly , thank you )) Link to post Share on other sites
