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: https://streamable.com/mzq71i

Thank you.

CodePudding user response：

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!