Applying a CSS3 transform to an SVG element in Safari - animation

I am using SVGs to build up a cartoon style street scene, and I wanted to have clouds scrolling across the scene. To do this, I was using a setTimeout or requestAnimationFrame (dependant on browser) to update the SVGs (x) position, but the FPS counter dropped from 30fps to 7fps on the iPad because of it. I tried again using SVG transform="translate(x, y)" to see if performance increased. It did not.
Finally, I thought I would try with CSS3 transforms, and applied it directly to the SVG element:
This worked fine in chrome, and firefox. But Safari (including iPad) doesn't seem to accept having css transforms on an SVG.
Is this a known bug? Or is there a way around this? Thanks.

Okay, I'm not sure if I'm 100% right about this, but it seems that setting the "x" value of a transform every frame for any kind of movement (especially in a complex parallax situation where at least 5 layers are moving at the same time) is a very bad idea.
Also after much research it appears SVG1.1 does not support CSS3 transforms across all browsers for certain. SVG transforms are okay but CSS3 is not.
Finally to fix this solution: I simply reset all x, y positions to (0, 0), and positioned everything with -webkit-transform: translate3d(x, y, z). (and variations of for other browsers).
Note: I use translate3d even for a 2d parallax effect and leave z at 0. translate3d is hardware accelerated and has a visible performance increase on the iPad.

I have no problem with this, you must be doing something wrong.
Working example: http://jsfiddle.net/pqyBJ/

Related

How SVGs are able to incoporate effects like blur?

I have been familiar with the SVG format since a long time. It's usability and benefits over a raster image as well.
But Recently I came to a situation where I needed blur effect in SVG(basically a asset defined by primitive shapes that mimics blur effect and is infinitely scalable), so I did a google search and much to my surprise there are official ways of doing it; I was expecting it not to be!
I am basically intrigued by the fact that if SVGs are really made up primitives shapes defined mathematically then how can it incorporate effect like blur. What shape can even be used for such a process?
In Firefox we render the SVG to an offscreen surface, blur the pixels on that surface and then blit the offscreen surface. I imagine other browsers work similarly.
Filters and masks are raster operations, most everything else is vector.

LÖVE viewport like Libgdx

I wonder if LÖVE framework has the same feature like Libgdx's viewport, because this feature were really great when I used Libgdx and I wonder if there's anything similar to do in LÖVE.
About viewports: https://github.com/libgdx/libgdx/wiki/Viewports
If, by viewport, you mean using normalised coordinates (resolution-independant), then yes, LÖVE can do that.
Although it's not available by default in the framework itself, there's always a possibility to add your own features.
You could make a Viewport system using LÖVE's canvases.
Start by creating a canvas with fixed dimensions,
then make your game using percentages of these dimensions instead of regular pixel positioning.
For example, player.x = 80 (left side of the screen) becomes player.x = canvas:getWidth()*.1
Once you've drawn everything into your virtual window -that is- the canvas, you can scale it and render your game to fit any window resolution.
I suggest that you take a look at this library that handles all the scaling stuff for you, once you provide your game's virtual dimensions.

Do browsers stil animate invisible content?

When a page contains CSS3 animations that are below the fold, or that get hidden as the user scrolls down, should you apply a class using Javascript to stop the animation, or do browsers not animate invisible elements?
Even though browsers will not draw elements that are outside of the viewport I'm still pretty sure they will continue to update the css properties as determined by the css animation even when the element is not visible.
This is needed in order to be able to listen for animation events, or to be able to read the value of an animated css property at any given time.
So, in theory you might improve performance by removing the css class that animates the element, but unless you have very complex animations or animate hundreds of elements I wouldn't really worry about it.
"Drawing" is the most expensive part usually, especially if you're animating things such as colors, which causes a repaint. However, if you're animating a translation or rotation using a css transform the browser usually doesn't need to do a repaint each frame. Instead it can just paint the element once and send it to the GPU as a texure and let the GPU translate or rotate it each frame, which is crazy fast since it's all hardware accelerated.

Need help with CSS3 3D transforms

Please have a look at this page:
http://www.abhi.my/lab/3D-menu.html
If you haven't already guessed, I'm trying to emulate the new iOS notification animation (that's where I first saw it), and obviously, my two paltry div's aren't behaving like a full box...
Any idea what I'm doing wrong here...?
This is what I'd like to get close to: http://www.youtube.com/watch?v=pBgVbzBJqDc
You are only transforming you elements in 2d space, even though you are going for a 3d effect.
A working example:
http://jsfiddle.net/mrlundis/wU296/
The "bottom" span is positioned behind the "front" span by using translate3d(x,y,z) where y and z correspond to half of the elements height (it's rotated around it center point.) It should be possible to achieve the same effect using -webkit-transform-origin.
-webkit-transform-origin is also used to make sure the containing div rotates around it's center point on hover.

Radial css3 animation around a circle

I'm trying to make a div rotating around a circle that is already rotating on himself in css3.
I've tried to use webkit frame, but it don't work well.
Have you some examples of this ?
thanks
This is 1 great example: CSS3 Solar System
The code used is here

Resources