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.
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!
Related
NOTE: It appears I oversimplified my initial question. See below for the edit.
I'm trying to combine the technique shown in the clipping/stencil example of Three.js, which uses the stencil buffer to render 'caps' when clipping geometry, with an EffectComposer-based rendering pipeline, but I am running into some difficulties. A fiddle demonstrating the problem can be found at https://jsfiddle.net/2vc76ajd/1/.
The EffectComposer has two passes: a RenderPass and a ShaderPass using CopyShader (see code below).
composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
var shaderPass = new ShaderPass(CopyShader);
shaderPass.enabled = false;
composer.addPass(shaderPass);
The first renders the scene as usual, the latter merely copies the rendertarget onto a fullscreen quad. If I disable the ShaderPass everything works as intended: the geometry is clipped, and cutting planes are drawn in a different color:
When the ShaderPass is enabled by clicking the 'copy pass' checkbox in the upper right, however, the entire cutting plane gets rendered, rather than just the 'caps':
Presumably there is some interaction here between offscreen render targets and stencil buffers. However, I have so far been unable to find a way to have subsequent render passes look the same as the initial render. Can anyone tell me what I am missing?
EDIT: While WestLangley's answer solved my initial problem, it unfortunately doesn't work when you're using an SSAOPass, which is what I was doing before trying to simplify the problem for the question. I have posted an updated fiddle at https://jsfiddle.net/bavL98hf/1/, which includes the proposed fix and now toggles between a RenderPass or an SSAOPass. With SSAO turned on, the result is this:
I have tried setting stencilBuffer to true on all the render targets used in SSAOPass in addition to the ones in EffectComposer, but sadly that doesn't work this time. Can anyone tell me what else I am overlooking?
I've made a CodePen showcasing a problem with the vertical functionality of the Slick Carousel. As you can see in the CodePen, I have three testimonials of different heights. When you scroll through them, you'll notice that the content gets cut off and does not display the copy correctly on screen.
Here's what I do to accomplish a vertical carousel using SlickJS:
$('.slick-carousel').slick({
vertical: true,
dots: true
})
Would there be a setting I'm missing in order for this to work?
I was doing a little digging around and I fell upon this post. I've tried it out on my CodePen above and it seems to be working fine.
If anyone has any better solution, do let me know in this thread!
I am working on an animation using GSAP and it is working perfectly on both Chrome and IE, Firefox however has the following glitches:
When the cup fill color fills up the color disappears as opposed to staying there. What looks as if the animation reverts to its original state.
While the big gear rotates around its center the other two seem to rotate around 0,0.
The animation can be found at:
http://codepen.io/anon/pen/WxJQQr
<code>
Any help or leads would be greatly appreciated, thanks!
I am trying to implement webgl for my game. The problem is I use multiple canvases, and my webgl enabled canvas is semi-transparent over my terrain canvas (which is drawn once and just moves with the player). Here is a picture:
I've searched for the past 2 hours on google and can't find anything that has helped.
I have tried:
getContext("experimental-webgl",{alpha: false});
This just hides the terrain completely (now all black), but my webgl drawn objects have the correct color.
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, false);
Neither of these did anything noticeable.
gl.clearColor(0, 0, 0, 0)
Didn't affect the outcome, still looks like the screenshot above.
Everything else here: http://games.greggman.com/game/webgl-and-alpha/
Nothing seems to work. Why is what is drawn on the canvas semi transparent? There is no CSS affecting the canvas element.
Figured it out! I am using WebGL-2D, which is a javascript file that adds the context2D API to webGL. So if I call drawImage, it actually handles that with webgl. In the getContext definition I had to change:
gl.colorMask(1,1,1,0);
to
gl.colorMask(1,1,1,1);
The colorMask() method specifies whether red, green, blue, and alpha can or cannot be written into the frame buffer.
I have no idea why it was 0 before.
I am wondering if there is any library to enable me to upload big image on website and than create animation.
Animation description:
Show are is smaller let's say 300*300 and image uploaded is 1024*768 and I would like the animation to go around the image, zoom out a little, zoom in, etc.
I hope I was clear enough.
Thanks for answers
This can be easliy done with the jquery function animate:
jquery animate() doc
They have some examples in their documentation. You can either work in a div with "overflow:hidden" and put the image in that div or set is as a background image. animate() allows you to manipulate the css styles. Also, you can append animate() calls.