Share Posted April 4 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...
Share Posted April 4 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...
Author Share Posted April 4 @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...
Share Posted April 4 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...
Author Share Posted April 4 @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...
Share Posted April 4 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...
Author Share Posted April 4 @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...
Share Posted April 4 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