Mcan Posted March 14, 2023 Share Posted March 14, 2023 Hi, I am trying to create a reveal animation. I am not a beginner but even though I tried everything, I couldn't solve the issue. It works like a charm on Safari but not on Chromium browsers. When SVGs are moving, as soon as they overlap, the bug shows up. Note that if the scale of these SVGs are not big then there is no bug but as the purpose of the animation, the SVGs should be big enough to cover the whole page. Note that to see the bug you have to go to the pen and make the result full screen with the link below. It somehow doesn't happen when the window is small. Please help me, I really appreciate it. Thanks. See the Pen WNgOJEm by xenoverseup (@xenoverseup) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted March 14, 2023 Share Posted March 14, 2023 Hi @Mcan. Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer: A clear description of the expected result - "I am expecting the purple div to spin 360degrees" A clear description of the issue - "the purple div only spins 90deg" A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great. I looked at your CodePen on a large screen in both Safari and Chrome and didn't notice anything different. Help? 1 Link to comment Share on other sites More sharing options...
Mcan Posted March 14, 2023 Author Share Posted March 14, 2023 17 minutes ago, GSAP Helper said: Hi @Mcan. Apologies for the lack of response so far, but it looks like people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer: A clear description of the expected result - "I am expecting the purple div to spin 360degrees" A clear description of the issue - "the purple div only spins 90deg" A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great. I looked at your CodePen on a large screen in both Safari and Chrome and didn't notice anything different. Help? Thanks for your reply! Sorry for the vagueness but when I try to create the animation, just at the beginning, when svgs are overlapping, it seems like the renderer cannot decide which one to render first and there are some terrible flickers. I tried setting z-indexes for each one but still no hope. You can try refreshing the page in full-screen mode to see the bug. Here is a screen recording of the bug. I bug (1).mp4 The bug happens when the flowers start to move. In this animation I have a bunch of paths which the flowers have to follow. What is the best and the most efficient way to achieve this? Note that it should be responsive, as well. Link to comment Share on other sites More sharing options...
GreenSock Posted March 14, 2023 Share Posted March 14, 2023 I'm not seeing that at all. Is anyone else? Also, is there some reason you think this is related to GSAP or MotionPathPlugin? It sounds like more of a browser graphics rendering issue, perhaps even related to your graphics card. Link to comment Share on other sites More sharing options...
Rodrigo Posted March 14, 2023 Share Posted March 14, 2023 Hi, I can't see that particular issue neither on firefox nor chrome. Tested in Ubuntu 20 & 22, an iOS 16 iPad and an Android phone. On the phone there is some lag because is not the most powerful one though, but I can't seem to replicate the issue. Link to comment Share on other sites More sharing options...
Mcan Posted March 14, 2023 Author Share Posted March 14, 2023 Hi @Rodrigo, @GreenSock, @GSAP Helper Could you please look at this website? Do you see any glitches on the intro animation Chromium-based browsers? https://nakiska-portfolio-one.vercel.app/ It is all glitchy for me. I hope it is about my graphics card. I am literally trying to fix the bug for more than 3 weeks. Link to comment Share on other sites More sharing options...
Rodrigo Posted March 14, 2023 Share Posted March 14, 2023 Hi, This is chrome on Ubuntu 22https://i.imgur.com/rc8Ng78.mp4 This is Firefox in the same system: https://i.imgur.com/afCSrev.mp4 As you can see it kind of looks the way it should 🤷♂️ What you could try is start with just one element and see how that goes, then start adding and maybe you'll find a breaking point of sorts. Sorry I can't be of more assistance. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Mcan Posted March 14, 2023 Author Share Posted March 14, 2023 9 minutes ago, Rodrigo said: Hi, This is chrome on Ubuntu 22https://i.imgur.com/rc8Ng78.mp4 This is Firefox in the same system: https://i.imgur.com/afCSrev.mp4 As you can see it kind of looks the way it should 🤷♂️ What you could try is start with just one element and see how that goes, then start adding and maybe you'll find a breaking point of sorts. Sorry I can't be of more assistance. Happy Tweening! Thank you! I guess it is just because of my system. Thanks for your time. It helps a lot. I already tried adding them one by one. But it didn't help with the bug. 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