Али К Posted January 29, 2021 Share Posted January 29, 2021 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 comment Share on other sites More sharing options...
Carl Posted January 29, 2021 Share Posted January 29, 2021 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 comment Share on other sites More sharing options...
Али К Posted January 29, 2021 Author Share Posted January 29, 2021 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 comment Share on other sites More sharing options...
Carl Posted January 29, 2021 Share Posted January 29, 2021 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 comment Share on other sites More sharing options...
Али К Posted January 29, 2021 Author Share Posted January 29, 2021 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 comment Share on other sites More sharing options...
ZachSaucier Posted January 29, 2021 Share Posted January 29, 2021 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 comment Share on other sites More sharing options...
akapowl Posted January 29, 2021 Share Posted January 29, 2021 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 comment Share on other sites More sharing options...
mikel Posted January 29, 2021 Share Posted January 29, 2021 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 comment Share on other sites More sharing options...
Али К Posted January 29, 2021 Author Share Posted January 29, 2021 @akapowl okay , I will, Thank you Link to comment Share on other sites More sharing options...
Али К Posted January 29, 2021 Author Share Posted January 29, 2021 @mikel Yeah , exactly , thank you )) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now