CSS3DObject Render Issues with GSAP


I have a main div which is placed on a plane geometry using CSS3DObject… I have two sub DIVs like section1 and section2 inside that main div that are placed one behind another… I have this simple GSAP animation where section1 hides with an opacity and section2 shows up… Everything is working great but the only problem is that while animating everything gets blurred until the animation completes.

Reference Video:

Kindly help me with this as I want to show GSAP animations in a clear way.

Thank you.

For people like me who may face the same problem in future…

I’ve found the solution. Just write force3D:false this in your gsap animation

Like this:
gsap.to(".class", {opacity: 1, duration: 2, force3D:false})

Cheers :smiley:

1 Like