Sukru Posted April 4, 2023 Share Posted April 4, 2023 Hello, I am making a project with gsap. Everything works very well, but when the content comes from the bottom to the top or when the content is independent from each other, a flickering line occurs, I searched, but I could not solve it, can you help? I am sharing the photo with you. Error image https://freeimage.host/i/screenshot-2023-04-05-005609.HOYGZMb See the Pen NWOKveE by sukruemanet (@sukruemanet) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted April 4, 2023 Share Posted April 4, 2023 Yeah, that's a browser rendering issue that's unrelated to GSAP/ScrollTrigger. You can try setting will-change: transform on the content and/or just overlap your sections by 1px by adding margin-top: -1px for example: See the Pen QWZLqjR by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Sukru Posted April 4, 2023 Author Share Posted April 4, 2023 @GreenSock Thank you, yes I know this method but if then; Below the video content i use at the top, the content at the bottom appears and breaks the use of height:100vh. Link to comment Share on other sites More sharing options...
GreenSock Posted April 4, 2023 Share Posted April 4, 2023 Are you talking about the 1px? Then simply adjust the other CSS to compensate, like add 1px of padding-top to the container. Actually, using 0.5px seems to work okay: See the Pen QWZLqjR by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Sukru Posted April 4, 2023 Author Share Posted April 4, 2023 @GreenSock I think basically there is no solution, I will have to write these properties for all the id and class i use. Link to comment Share on other sites More sharing options...
GreenSock Posted April 4, 2023 Share Posted April 4, 2023 Sorry, I don't understand what you mean. It seems totally solvable. Maybe I'm not understanding what you think is a problem. Please be very specific. Link to comment Share on other sites More sharing options...
Sukru Posted April 4, 2023 Author Share Posted April 4, 2023 @GreenSock I think it will be more descriptive if I share the problem with the video, in fact, it is not a problem of these two divs coming together. I wanted to tell this. I want to show this by making a video. I wanted to tell you that there is a flickering and then disappearing line at the bottom of the image at the very bottom. I think the problem is self explanatory now Video https://www.loom.com/embed/b795701bb1b54585a60d97d3019c9b16 Link to comment Share on other sites More sharing options...
GreenSock Posted April 4, 2023 Share Posted April 4, 2023 Oh, I see - we can't really troubleshoot that from just looking at a video, but I'm pretty confident it has nothing to do with GSAP/ScrollTrigger. Did you try setting will-change: transform on the video and/or its container element? If you want more help, please make sure you provide a minimal demo that clearly illustrates the problem (like a CodePen or CodeSandbox, not a video). 👍 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