Questions tagged [html5-animation]

HTML5-ANIMATION is a way to animate HTML element with css or java script or both....

85 questions
37
votes
1 answer

using HTML5 Canvas - rotate image about arbitrary point

Rotate the dial on top of a semi circular(Northern Hemisphere) image as background. range could be 0 - 180 degrees. on input to the method that does canvas transformation, the dial would rotate and stop over the matched value. Here's what I was…
Abhijit
  • 1,153
  • 2
  • 16
  • 32
25
votes
4 answers

Page flip effect for HTML5?

Hi is it possible to have an effect of flipping a page like a book for HTML5? If so how is it done? Thanks in advance!
questor
  • 271
  • 1
  • 3
  • 3
17
votes
1 answer

Zooming with canvas

In a test application i have a canvas with a simple rectangle on it. The method draw is called every 100ms. as you can see from the code i'm using the Mousewheel to scale everything. What happens now is, that everything is scaled, but i.e. when the…
Chris
  • 7,675
  • 8
  • 51
  • 101
15
votes
1 answer

How to accurately measure HTML5 Browser Framerates (FPS)?

What is the most accurate way to measure framerates, i.e. FPS, in modern HTML5 browsers? I'm specifically interested in FPS for Canvas animations. http://weblogs.mozillazine.org/roc/archives/2010/11/measuring_fps.html will tell you that trying to…
Seth Ladd
  • 112,095
  • 66
  • 196
  • 279
12
votes
2 answers

What are the pros and cons of HTML5 Canvas vs. SVG + Raphael.js?

I just started a project using the Canvas. But one of the things I need is to keep track of movable, clickable boxes as in this example : http://raphaeljs.com/graffle.html so I'm wondering if Raphael-js + SVG would be better. Which would you use?…
interstar
  • 26,048
  • 36
  • 112
  • 180
10
votes
5 answers

Animation options HTML5 Canvas/CSS3/jQuery

I'm interested in doing some more flash-like animation in either, or a combination of HTML5/JQuery. One of the ideas floating around is of flying birds, character animation and 'tween'-like animation sequences. I'm a flash dev by background so all…
dg85
  • 490
  • 2
  • 7
  • 21
9
votes
1 answer

Why does requestAnimationFrame function accept an element as an argument?

I am just trying to understand why the hell window.requestAnimationFrame is accepting the second parameter as an element, what is the reason behind that? I am curious to know the underlying execution for this function....
8
votes
3 answers

Any software like blend for HTML5 canvas animation?

Is there any software available like blend, for working with HTML5. Especially, to do animation related stuffs.
Prince Ashitaka
  • 8,623
  • 12
  • 48
  • 71
7
votes
3 answers

Spin wheel image in HTML5 (e.g., roulette wheel)?

What's the best way to emulate a spinning roulette wheel in HTML5? The wheel spinning should be controllable by some input (i.e., speed of spinning based on some user input). The wheel labels should blur as the wheel spins fast, but as the spinning…
Crashalot
  • 33,605
  • 61
  • 269
  • 439
7
votes
3 answers

Canvas arc clearing

How do I overwrite an HTML5 canvas arc? I presumed this code would work but it leaves a border around it despite the fact that its exactly the same values and just a different colour.. Is there a border property I'm missing?? …
Alex Latchford
  • 655
  • 1
  • 9
  • 17
7
votes
1 answer

Preloading HTML5 Audio in Mobile Safari

I'm having a problem preloading HTML5 audio content and then using what I have in cache rather than attempting to redownload the audio every time I try to replay it. http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungFuPanda2_tj/ The…
TJ Kirchner
  • 4,321
  • 6
  • 24
  • 26
7
votes
1 answer

How does Google animate their logos?

I've been trying to figure out how Google animate their logos since the particle explosion one a while back, and today they have a chemistry set to celebrate the 200th anniversary of Robert Bunsen. I'm assuming this is HTML5 (I'm using Firefox 4,…
Osu
  • 1,137
  • 2
  • 18
  • 34
5
votes
2 answers

CSS3 Multiple Transitions of the Same Element

I am trying to make a dropdown effect for one of my background images. I was able to do it using css3 but it's not complete. The effect is supposed to be a curtain that drops down then sort of bounces back up a little. The problem with css3 is…
Free Lancer
  • 1,000
  • 2
  • 16
  • 33
5
votes
1 answer

Sketching effect with HTML5 canvas

I have a JPEG image consisting of handedly-sketched contours of a city. I want to achieve a slowly-sketching effect drawing these contours on an empty area from left to right. How can I do that based on the HTML5 canvas element? Something like…
Moshe
  • 555
  • 3
  • 14
5
votes
2 answers

Lots of HTML canvasses or one big one?

I'm planning an interface to show lots of little widgets (drawn on a ), which may move around (for example in a list that gets sorted different ways with jQuery). The number of widgets may be anywhere between 10 and 100. I could do this with…
Joe
  • 46,419
  • 33
  • 155
  • 245
1
2 3 4 5 6