Questions tagged [html5-animation]

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

85 questions
2
votes
1 answer

Animating percentage-based position with jQuery and/or CSS3 transitions (via plugin)

I'm trying to make a page layout that has sections that slide in and out when navigated to. Each section fills the screen (100% width/height) and is positioned absolutely at a percentage-based value. In the attached sample, there are four sections,…
D. A. Terre
  • 6,092
  • 1
  • 18
  • 18
2
votes
1 answer

HTML5 translate relative to page

How can you apply a translate to an element but make it move to a point on the page rather than relative to itself? For example, in the code below the "card" elements will move 50, 100 relative to their starting position. What I want instead is for…
ʞɔıu
  • 47,148
  • 35
  • 106
  • 149
2
votes
1 answer

PaperJS - How do I connect all items that have a distance of X from any given item? (Item interactivity)

I have a project I am trying to get an animated working with Paper JS. What I am curious about is if there is anything built into PaperJS that allows the ability to detect interactivity between items (i.e. if a item is X distance from any…
Fillip Peyton
  • 3,637
  • 2
  • 32
  • 60
1
vote
1 answer

Points not getting drawn when reproducing curve on HTML5 canvas

We are trying to reproduce a curve drawn on an HTML5 canvas, X points every 100 MS, but some points get lost in the reproduced copy. We have all the points used for the original curve. Original curve: http://jsfiddle.net/NWBV4/12/ Reproduced curve:…
Crashalot
  • 33,605
  • 61
  • 269
  • 439
1
vote
1 answer

KineticJS - on click event

I am working on a small application working with KineticJS. I have a circle created and am fading it in upon page load... the problem I am running into is that when I click the main circle to "spawn" smaller circles around the main one, all of the…
dennismonsewicz
  • 25,132
  • 33
  • 116
  • 189
1
vote
2 answers

HTML5 : drawing round corner rectangle as animation

I'm able to draw a rectangle with rounded corner with following code. What I'm looking is I want to form this as an animation - starting from one point and draw the line which ends at the beginning point. (like drawing with pencil) Any…
sr77in
  • 307
  • 2
  • 13
1
vote
1 answer

CSS3 webkitAnimationEnd event ordering

I'm new to Stack Overflow and also relatively new to HTML5 programming. I'm writing something (for Safari, primarily) where the logic is driven by the events which get fired out when webkit animations complete. If I start a number of animations of…
1
vote
2 answers

javascript html5 scaling pixels

I can't seem to figure out how to scale pixels on an html5 canvas. Here's where I am so far. function draw_rect(data, n, sizex, sizey, color, pitch) { var c = Color2RGB(color); for( var y = 0; y < sizey; y++) { var nn = n * 4 *…
Scott
  • 5,135
  • 12
  • 57
  • 74
1
vote
0 answers

Want to show a 3D animation in HTML5 that supports webworks that uses webkit

I want to use a 3d sort of simple animation like throwing a 3d football on a certain surface but I also want it to support webworks that uses webkit, and I think webkit doesn't support 3D webGL. So what should I do? I have the option of an animated…
Hafiz
  • 4,187
  • 12
  • 58
  • 111
1
vote
0 answers

Animation of CAR using Jquery

I want to put animation for running car on the road vertically. As shown in my fiddle, the car animation does work, but I want the car to run on my image on the road and as the car goes farther away, the car should become smaller. The Html…
shivani
  • 980
  • 1
  • 8
  • 29
1
vote
1 answer

How to force browser repaint and avoid UI update delay?

I need the browser to update my UI before a long(er) operation is done. Currently the browser is waiting until after everything is complete and then updating the UI, which means UI freezes for 1-2 seconds then updates. So, user clicks button in UI,…
Alex Kerr
  • 956
  • 15
  • 44
1
vote
2 answers

Get the rotate amount in animate a div through a SVG path

From my last post helped to animate a div through a SVG path. Success and div "#car" animating through my path. Now the problem is how to rotate/ transform the div according to the curve ? ie if it moving through a slanding path need to rotate the…
ramesh
  • 4,008
  • 13
  • 72
  • 117
1
vote
1 answer

How to draw the HTML 5 Canvas and split the quadrant wise and also make the circle rotate the quadrant clickable

I have drawn the circle and separated the 6 equal quadrants using HTML 5 Canvas, I have to make every quadrant clickable, when its clicked it has to rotate it and also needs to redirect to another page and make sure the clicked quadrant need to be…
user1802184
1
vote
1 answer

Playing HTML5 embedded sound on Android

I have a Flash animation with sound that I converted to HTML5. When I play it in a WebView or open it with the device browser, there is no sound. I've tried several sound formats with no success. I used www.html5test.com to see the browser…
Asaf Pinhassi
  • 15,177
  • 12
  • 106
  • 130
1
vote
1 answer

How can I play an Edge animation onclick?

I want to have an Adobe Edge animation, which plays after a visitor clicks an ordinary HTML form button. How can this be done?
Jules
  • 14,200
  • 13
  • 56
  • 101