I've been using Adobe Edge Animate to create what is basically an intro to a site. But I'd really like to try to code it myself by hand. And, to that effect, I have a question.
How would I string along multiple animations based on an array?
Here's what I'm thinking:
1. The array holds the name of each image.
2. I want to animation each image across the screen, one at a time.
3. Each image will animate once the one before it is done.
I know how to use the animationEnd event. My idea is that, basically, I'll append a child to a container div, assign it a class with the animation, use animationEnd to know when it's done, and at that time I'd want to go to the next image.
But how can I loop through each image when I need to wait for animationEnd to fire? Any ideas? Does anyone know of a good tutorial that touches on this issue?
I'd appreciate any guidance! I'm not asking for you to write me much code but just explain the way I can do the looping while waiting on animationEnd. I think that's where I'm stuck in my brain.
You should use what's called a "recurring function", a function that calls itself multiple times. It usually functions a lot like a loop, but for asynchronous things (like animationEnd event), it's often the easiest way to go.
An example of usage in your case would be this:
var imgs=[/*images here*/];
function nextAnimation(curInd){
var thisImg=imgs[curInd];
//create the image element, trigger the animation, etc here
//put the img element itself into a variable named imgElt, then:
imgElt.addEventListener('animationEnd',function(){
//only call the function again if this isn't the last item in the array
if(curInd+1!=imgs.length)
nextAnimation(curInd+1);
},false);
}
nextAnimation(0);
Read it through a few times, you should understand it after a while. Also look up some other examples of recurring functions online, it's sometimes a tricky concept to master if you haven't done too much programming before
Related
Does anybody know whether there is a way to check for the end of an animate:flip animation in a svelte component?
I don't see any events listed for it, no transition events work for it either.
I need to run a function once the flip animation completes to measure the containing element. Because the elements are animated, running the function before the animation completes leads to wrong size. I want to avoid "hackish" solutions with timeouts, etc. because I would need to run them in some afterUpdate which may be fired by other "updates" (not necessarily by adding/removing an element in the each block which is using flip), but it seems like there is no other way. Or is there? Thanks for reading.
I modified this code from another project. I want a slider that goes both directions. I did not want to siled all panels at once. Like I see a lot of sliders do. I wanted the content to show in kind of an “in-demand” once requested way. This being one of my first jQuery projects, I figured I would learn, so I tried it out. I seem to get pretty much what I wanted. The place I am stuck with is this. I cannot seem to get out of the IF statement context in the sliderMultipanel function. I need this, so I can determine the direction the animation should flow in, based on the click. I have read a lot and learned some about bubbling and (stopping) propagation, but I don’t know if I am going down the correct path. The IF statement seems to keep on starting the counting over. This makes for unexpected results. So what gets evaluated by the IF is only sometime correct, also it does random weird behavior. However, it is correct if its context is outside of the IF or click function (see lines 66-73). Can some show a way this can be done? To be clear I want to properly determine the number of the nav button click so the slider can go in the requested direction. Thanks
CodePen of project
if ( (mySlider.panelCompare + 1) < mySlider.currentPanel || !mySlider.panelCompare...
I am trying to do some tricky things with animations in a queue function. I hesitated to post my original code here since it's long and messy. But I've boiled down the problem I'm having to the following example (I'm coding the queue using this method by Alnitak: jQuery: code stops working after adding delay() and removeClass()):
http://jsfiddle.net/AYMY7/6/
This is an attempt to write a program that will animate the prime power factorization of 100. It's constructed with a for loop in which the #target div receives new html each time with 'span' tags around the piece that needs to be replaced. Then the 'span'ned part is supposed to fade out, be replaced by something, and fade in. If you run it you'll see that fade in/out only works the first time in the loop and then stops. My guess is that it is because when the next iteration replaces the html in the #target div, the 'span' tags are treated as something new and not affected by the original 'span' queue. I don't know if that made any sense, but if you study the code and run it, you'll see what I mean.
I've tried fixing it with classes and id's but I think the same core problem is still there. Can anyone see a way to fix this?
I thought I fixed it by adding separate div's for each piece and changing the array:
http://jsfiddle.net/nQjBw/2/
This just about works great, except there are these little twitches that seem to happen randomly. So if someone can see how to fix this instead that would be awesome.
In either case I need a solution that isn't specific to factoring numbers, as I'm trying to use this method for a bigger project.
Thanks!
This seems to work:
http://jsfiddle.net/EHJfR/
JQuery is written in Javascript. As someone who knows a little of each, I have to wonder how they wrote some of it. How do you animate HTML elements in pure Javascript? Is it just repeatedly updating the CSS property that is to be animated, using standard DOM manipulation, with callbacks to make it asynchronous? Or is it something more sophisticated?
jQuery animations are just updating CSS properties on a recurring timer (which makes it asynchronous).
They also implement a tweening algorithm which keeps track of whether the animation is ahead of schedule or behind schedule and they adjust the step size in the animation at each step to catch up or slow down as needed. This allows the animation to finish in the time specified regardless of how fast the host computer is. The downside is that slow or busy computers will show more choppy animations.
They also support easing functions which control the time/shape of the acceleration of the animation. Linear means a constant speed. Swing is a more typical, start slow, accelerate to max speed in the middle and then end slowly.
Because animations are asynchronous, jQuery also implements an animation queue so that you can specify multiple animations that you want to see execute one after the other. The 2nd animation starts when the first animation finishes and so on. jQuery also offers a completion function so if you want some of your own code to run when an animation is complete, you can specify a callback function that will get called when the animation completes. This allows you to carry out some operation when the animation is complete such as start the animation of some other object, hide an object, etc...
FYI, the jQuery javascript source code is fully available if you want more details. The core of the work is in a local function called doAnimation(), though much of the work is done in functions called step and update which can be found with the definition of jQuery.fx.prototype.
That's it : a plain old setInterval and some DOM manipulation.
Of course, the code is a bit more complex than that.
Look : http://code.jquery.com/jquery-latest.js , near the end of the file. Search for jQuery.fx.prototype .
When inspecting element during a jQuery animation almost always it changes your CSS code, which is assigned to the element through jQuery that is not really assigned from HTML you write. Get a FireBug if you don't have it for firefox and inspect what's going on while the animations execute.
Without having read the code myself, from what I understand it is indeed using standard Javascript methods and properties to update the DOM elements and CSS styles at regular intervals ("ticks"), which it accomplishes using standard setInterval() and setTimeout() methods.
I'm wring a custom jQuery plugin based on the awesome jGrowl plugin. I just need it to do a few more things than it already does.
Basically everything is working as I need it to (only tested in Firefox so far) except that if you call the plugin too many times too fast it stops and breaks everything
http://jsbin.com/ofejo/edit
Any ideas about what might cause this?
sounds like you need to implement a callback feature and put the additional calls into callbacks to ensure that the plugin processes before other executions occur.
It's rendering and trying to calculate where to place the block but failing because there's an animation already taking place. (often an animation changes the type of display style being used in order to create the effect and this causes oddities with calculations such as these)
You need to queue the effect, but I'm not precisely sure how you would go about it because you're creating new elements, and there's more source code than I am willing to look through at the moment. Let me know if this helps.
http://docs.jquery.com/Effects/queue