Obaid Nadeem Posted October 24, 2021 Share Posted October 24, 2021 When transforming 3D using perspective for svgs chrome there is always a bug that I face. For example on this web https://threeedy.surge.sh/ when all the elements are translated in 3D, there is a bug in the where it sticks on awkward positions. And this happens only in chrome , on firefox it stays in 3D transformation. Also in my portfolio web: https://obaidnadeem.surge.sh/ in the User Interface section I have done the same thing but getting the same bug in chrome while the firefox runs everything smoothly. Is their solution to this or am I doing something wrong? or the only solution is to wait until chrome team fixes bug from their end and extend support for Scalar Vector Graphics ? Link to comment Share on other sites More sharing options...
Cassie Posted October 24, 2021 Share Posted October 24, 2021 Hi obaidnadeem, Do you have a GSAP specific problem? I'd be interested in seeing the code, could you pop it in a minimal demo? Maybe on codepen? Link to comment Share on other sites More sharing options...
OSUblake Posted October 24, 2021 Share Posted October 24, 2021 Hi @obaidnadeem First off, I really love your animations!!! 9 hours ago, obaidnadeem said: or the only solution is to wait until chrome team fixes bug from their end and extend support for Scalar Vector Graphics ? Perhaps Firefox is wrong. I'm not sure what issues you are referring to in the links you provided as there is a lot of stuff going on, but whenever I see someone mention 3D and SVG, that's a big red flag as the current SVG spec does not support 3D. Firefox jumped the gun a bit implementing parts of SVG 2.0, which does supports 3D, but that spec is still a work in progress and may never happen. I also noticed that you are using CSS transitions, which will conflict with GSAP, especially is you are using all. If you want to use CSS transitions and GSAP on the same element, you need to be explicit about what properties you want to use for the transition, and make sure GSAP will not target the same properties. 1 Link to comment Share on other sites More sharing options...
Obaid Nadeem Posted October 24, 2021 Author Share Posted October 24, 2021 3 hours ago, Cassie said: Hi obaidnadeem, Do you have a GSAP specific problem? I'd be interested in seeing the code, could you pop it in a minimal demo? Maybe on codepen? Nope, It's pure css. Can be done with GSAP also. Link to comment Share on other sites More sharing options...
Obaid Nadeem Posted October 24, 2021 Author Share Posted October 24, 2021 2 hours ago, OSUblake said: Hi @obaidnadeem First off, I really love your animations!!! Perhaps Firefox is wrong. I'm not sure what issues you are referring to in the links you provided as there is a lot of stuff going on, but whenever I see someone mention 3D and SVG, that's a big red flag as the current SVG spec does not support 3D. Firefox jumped the gun a bit implementing parts of SVG 2.0, which does supports 3D, but that spec is still a work in progress and may never happen. I also noticed that you are using CSS transitions, which will conflict with GSAP, especially is you are using all. If you want to use CSS transitions and GSAP on the same element, you need to be explicit about what properties you want to use for the transition, and make sure GSAP will not target the same properties. Thanks for the complement ❤️ Firefox is constantly working and extending support for SVGs and that's great because it is the future,it's getting attention and hype after all these years, I think it's now time for chrome to extend support for SVG 2.0. Yes, It is pure css. It was a simple animation so I prefer not to use GSAP. This snap doesn't occurs with images tho. Well we should now hope for the best. SVG 2.0 and Webgl 2.0 are future. 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