Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
obaidnadeem

SVG ANIMATION

Recommended Posts

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

  • obaidnadeem changed the title to SVG ANIMATION

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

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.

 

image.png

 

 

 

 

  • Like 1
Link to comment
Share on other sites

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

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.

 

image.png

 

 

 

 

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×