I got an iron-ajax call who retrieves x amount of elements that are displayed with a dom-repeat. I would like to for example run scale up animation on each of the elements but I want to do this sequential, i.e wait for the element to finish its animation before drawing the next on.
How do I achieve this in Polymer?
Two ways in which i think this can be achieved using neon-animation are
Use timing object to set delay and duration
Manually play the animations using playAnimation function
Related
I have an sprite animation that I would like to play once, finish, and hold on the last frame. I've tried changing the iteration count to 1 and added forward to the fill mode but neither worked. Any information or ideas would help.
I'm using this css3 sprite method. http://jsfiddle.net/simurai/CGmCe/light/
-webkit-animation: crouch 1.2s steps(2, end) 1;
This is what the Fill Mode is for. Add the both keyword to your animation definition and, when the animation stops, it should "freeze" at the last frame and stay that way.
EDIT: Ah, I see what's going on. The animation in that example is actually going one frame too far. You need to change the to keyframe to -450px and lower the number of steps to 9, as well as adding the both keyword.
Note that -ms-animation has never existed, and neither -o-animation or -moz-animation are neede anymore. It's just animation and -webkit-animation.
There is no way to stop the animation on the last frame without some javascript (or you could simply use a sprite animation toolkit.
You need to use javascript to:
Test if style applied to element background-position == 500px. This may or may not be straight forward. Can we fire an event on attribute changed using javascript? If not then you will have to test it repeatedly using a timer
Set the animation-play-state:paused on the above condition using javascript.
OR:
You can find some sprite animation scripts out there which will no doubt allow far more control over the animation.
UPDATE:
To make the tesing of the attribute easier (without the use of setInterval - it uses some nice tricks - you can use a plugin for jQuery.
There is a SO question about mutation events here
I'm making a multi-part introductory animation for a game. It works when I preview in Flash, but not when I export using the CreateJS toolkit to get HTML5 output.
On my scene's timeline, I have this.stop(); on the first frame, as well as a movie clip that contains several seconds of animation (and which may have to change in length as we develop).
My second frame is labeled "sc2" and I would like the animation to pick up there when the first movieclip is finished. To accomplish this, I went into the first movie clip and put this on the last frame:
_parent.gotoAndPlay("sc2");
This works fine in Flash, but perhaps I can't use the _parent object in JS? Is there an alternative way to access the flow of control or another way to accomplish this? My goal is to avoid doing animation on the main timeline and to control the flow by scripting there so that if the length of the individual sections of animation changes, I don't have to change the start and end frames of the various sections in several places.
I have code like this, using jQuery-svg
function replaceRaster(){
$('#png').remove()
a = $('#graphic')
b = a.svg(a)
a.load('IDC_Energy.svg',
{onLoad:bind} )
svg = document.getElementById("graphic").children[0]
console.log(svg)
svg.addEventListener('load', bind)
}
The event handler, bind, is fired before jQuery-svg-dom is able to select elements within the SVG data. My code is supposed to look over the SVG and assign various classes and attach listeners to various elements, but it's not able to find any. If I call bind in the console after everything is loaded it can find alll the SVG elements.
Am I doing something wrong? Is there another way to detect when the SVG DOM is available? I've thought of using a timer, but that's really hacky, especially considering my SVG files could be a few MB large.
Have you tried using a timer with a timer delay of '0' or perhaps just '10'? I've frequently used this technique to push the work out of the current run loop as timers are fired after the redraw ghas completed. With luck the bind will only be fired once the repaint has finished. I'm not sure whether this will help in your particular instance because I don't know what else you are doing in the page - it won't help, for example, if you have some asynchronous data handling going on.
I have an animation that AutoReverses and am interested in getting an event half-way before it completes (I am trying to simulate flipping of a coin, and at half-way point I need to change image from heads to tails). Is there any way to do this?
For general solution to get an event half way would be to put something like an ObjectAnimationUsingKeyFrames and in a DiscreteObjectKeyFrame switch the value of a property like IsGoingUp, then in IsGoingUp property changed handler - react to that change - perhaps by raising an event.
For your specific problem - you can use two ObjectAnimationUsingKeyFrames with DiscreteObjectKeyFrame and just set the Visibility of one image to Collapsed in one of the animations and to Visible in the other one.
Just wondering can you apply some animation on the StageWebView, for example slide in and slide out, i have apply with TweenLite.to() but i don't it accept StageWebView? Is it possible or i just have to be appear visible show and hide?
No it's not possible. You can create the StageWebView, capture a snapshot of the contents and tween this snapshot into place, then once the tween has completed, replace the snapshot with the actual StageWebView.
The function required to do this is
drawViewPortToBitmapData(bitmap:BitmapData):void