Search the Community
Showing results for tags 'blurry'.
Found 7 results
-
Hello, When I try to scale with a small amount (between 1.0 and 1.09) the font really becomes blurry. I have tried looking for a solution, but none of them work. Examples: backface-visibility: hidden; transform: translateZ(0); -webkit-font-smoothing: subpixel-antialiased; -webkit-filter: blur(0); TweenMax.set('#button', {rotation:0.01, transformStyle:"preserve-3d"}); In my codepen you can see a example (viewed in Google Chrome).
-
Looks like scaling and will-change issues have been fixed in v59 of Chrome. No more rasterization at a low scale, or jumping at the end of a transform. And using will-change can provide a nice performance boost. Compare the CPU usage between these two demos. In the demo above, you should notice the CPU rise as the image gets larger. This is because it creates a new raster every time the scale changes, so the larger the image, the more the CPU has to work. In the demo below, the CPU usage should be relatively flat as it will use the same raster throughout the animation. While this may improve performance, the overall quality may not look as good, particularly at lower scale levels. EDIT: This is only for graphics. Scaling text is still an issue.
-
Hi, Guys, My CodePen's here: http://codepen.io/WW/pen/NNxEXm While the mouse moving on body, there's a little blurry happening with text. is there any possible to remove the blurry? Thanks for ur kindly help.
-
Does anyone know why when animating the scale of an svg, it gets blurry in IE, and only looks clear in Chrome and Safari once the animation has finished? In this quick test (http://www.brendyn.com/test/) the top image is SVG and the bottom is a PNG. If looked at in IE, once it gets big, you can see it's very blurry, which an SVG shouldnt be. The PNG is only slightly blurry (which is expected). I assume it's a core browser difference, but I would have assumed TweenLite would have taken care of that. Can anyone offer any insight? Thanks very much in advance.
-
I have an animation with lots of SVGs. They are rendered beautifully, scaled up and everything, on initial load. Once you move forward or backwards in the animation (by clicking one of the big blue arrows or a light brown mangrove root), the roots become blurry, especially the ones closest to you, even after the animation has completed. The animation is mostly one timeline which loops. It begins paused. The motion is created by advancing in time in the timeline by passing a value to pause. I looked around online and saw some suggestions like setting transform3d to auto, but that didn't work for me. I'm hoping this is a familiar problem to you veteran animators. I've attached a before (left) and after (right) picture but looking at the animation is probably the easiest way to see the behavior: http://catalyst.goodlookingsoftware.com/a/ Thanks again! Aaron
-
I am trying to animate 2 elements that exist on top of each other, but are rotated 180 degrees to form a card with a back and a front. After the animation completes the elements are blurry. This is what the css transform is upon inspection: transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1); When I adjust the -0.002 to be 0 in the inspector, voila! The element is crisp and clear. Here is the code I am using to animated the elements (node is the element) animateIn: function() { TweenLite.to(node, .3, {opacity: 1, rotationY: 0, ease: Linear.easeNone}); } animateOut: function() { TweenLite.to(node, .3, {opacity: 0, rotationY: -180, ease: Linear.easeNone}); } Is the animation just not completing? Any insight as to how to fix this? NOTE: I've included a codepen url of the exact effect I am trying to achieve, and one where the rotation animations successfully complete. When they work I imagine transform: matrix(1, 0, 0, 1, 0, 0); is what will be applied to the style attribute. Thanks, Zach -
Hi, simple question: How can i tell a Draggable that all values during dragging and during throwing are rounded values. During dragging it seams that it uses rounded values already, but when it came to the second part, where a tween for throwing takes control, the values are not rounded anymore. This leads to blurry text or little gaps i.e. between images (translate3D(23.3234233, ...). I know i can request the tween (via draggable.tween), which is created after onDragEnd, but i have no chance to set roundProps to a tween instance which is already created? In my view, the easiest solution would be to have a roundProps-properties to set via the vars-object when creating a Draggable. Draggable.create("#yourID", {type:"x", throwProps:true, roundProps:["x"]}); Thanks.
.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
