Pause Velocity animation in the middle - javascript

I am trying out Velocity (https://github.com/julianshapiro/velocity) to power some animations (not using CSS animation because I need some more control over it). Say I am translating a block using:
$element.velocity({
translateX: "100vh"
});
Is there are way to stop the animation in the middle of transition in its current position? Thanks!

Since version 1.4 VelocityJS has had pause/resume abilities, the documentation hasn't been updated to match, but simply use "pause" or "resume" as arguments on an element list -
$element.velocity("pause");
and later -
$element.velocity("resume");

Related

Translate element by constant amount with CSS for smoother animation?

Is it possible to translate an element by a constant amount with CSS? For instance, we want to move a div in 50 pixel increments up the screen. Right now, we use update the translate value manually, but this creates a choppy effect.
Here's the code, where translate equals a value that increments by 50 every time this line is called:
$(element).css( '-webkit-transform', 'translate3d( 0, ' + translate + 'px, 0)' );
We need this work on mobile devices so we can't use jQuery animate because it is not smooth enough (in our experience) on mobile. We need to translate by a constant amount because we need to track the element's position so we call the translate code every X ms.
Instead of constantly firing off repeated animations I'd just set one animation with appropriate values, then detect the current position in your loop rather than trying to do the animation in it. This updated example from the linked question seems to indicate it would work.
You may want to interrogate the transform property to get the current translation values if they're going to be more complex than simple top/left. You should get a value that looks something like this:
matrix(1, 0, 0, 1, 0, 300)
There are several jQuery plugins that extend the animate method to use CSS3 and make animations very smooth on mobile devices.
I've used in the past a couple of plugins, don't remember the ones I used, but a quick Google search gave me this one:
http://ricostacruz.com/jquery.transit/
It would be something like this:
$(element).transition({ y: '+=50' });

How to make a "playback" slider with tickmarks html5?

I would like to do something like this in HTML5 where I have something like:
I want to be able to make it so that when I click on the Start button, the tickmark gradually moves to the next tick and increments by 1 per second, clicking on stop stops the behavior, and clicking on start again resumes from the current spot. The box at the top just shows the number of seconds corresponding to the red tracker bar. Assuming the user can specify the number of tickmarks (i.e. could be 20 seconds/tickmarks wide ro 10 seconds/tickmarks wide).
I have seen the JQuery UI Slider http://jqueryui.com/demos/slider/ though it has no tickmarks and am unsure if it really is the best way to go about doing what I described or if there is some better way.
What is the best javascript, jquery, html approach of doing this?
Try this - I felt like doing an exercise!
http://jsfiddle.net/zBKJk/
Only quirk is that the ticks along the bottom don't align exactly with different values of TICKS_ON_BAR. Probably a minor CSS/math issue.
You can change these variables
var TICKS_ON_BAR = 10; // Number of seconds to show on the bar
var TICK_RATE_MS = 100; // Interval to tick at (in milliseconds)
Also added a handy callback function
function timerComplete(){
// Do something further when the timer hits the end of the bar
}
​
Edit: If you want this to run smoothly, you could make the interval lower or (since you specified HTML5) use a linear CSS3 transition to make the changes animate:
http://jsfiddle.net/zBKJk/1/ (a bit glitchy, I just dumped in the example css from w3schools)
Animating this as is with jQuery is glitchy also: http://jsfiddle.net/zBKJk/2/

JQuery: Better way than queue:false or div wrapper

Here is my situation. I'm trying to do several animations on a single element at once; however, with the UI thread 'feature' and JQuery's animation queue it's becoming a hassle.
I'm designing a re-usable control library for a site and one of the things I wanted to do was to have a multi-class attribute system to initiate different animations upon ready().
For instance:
<div class="fadein loadingbar"></div>
with the CSS for an image background for .loadingbar, and then JQuery to animate the loading-bar's background indefinitely:
$(".loadingbar").each(function(){
$(this).css({backgroundPosition:"0px 0px"});
$(this).animate({backgroundPosition:"(-65px 0px)"}, (($(this).height() / 35) * 2000) + 600, "linear", function(){_n3_animLoadBars(this)});
});
as well as the fadeIn() animation for the .fadein class:
$(".fadein").each(function(){
$(this).css({opacity:0,visibility:"visible"})
.animate({opacity:1}, {duration:1000});
});
However; the only way to get them to animate asynchronously is to do {queue:false} for the .animate() function, which works fine until I want to delay the fade-in animation:
$(".fadein").each(function(){
$(this).css({opacity:0,visibility:"visible"})
.delay(800)
.animate({opacity:1}, {duration:1000,queue:false});
});
which completely skips the .delay() call since it's not queued (therefore not placing the animation cue right after the delay on the fx stack).
The only fix is to wrap the div with another div:
<div class="fadein"><div class="loadingbar"></div></div>
and to take the {queue:false} out, of course.
While this works, the javascript was supposedly going to be advanced enough so the markup didn't have to be that messy (usually a simple div wrap like that is fine with me, but I'm designing this for my own personal amusement and I would like to keep it down to a single div if at all possible).
Any quick fix with JQuery that I am missing, or is there a way to do this through writing a plugin?
Any insight would be helpful!
Found the solution - it was easier than I thought.
Instead of specifying {queue:false} on the fade-ins, I specified it on the background animations, leaving the fade-ins queued.

How to create a smooth animation that eases toward the target

How can I create a smooth animation that eases in toward a target as it changes position?
As this jsFiddle shows, the animation stops or gets blocked during moveTarget() instead of continuing toward the new target coordinates.
What would be the ideal implementation / structure to achieve the desired effect?
Ok, answering my own question here in case anyone else has this problem.
Instead of calculating change (change = finish - begin) each time moveTarget() fires, it is constantly being calculated in onEnterFrame(). So moveTarget() only responsible for getting the new X and Y positions.
This allows the values to ease toward the target.
I also permanently set the time value of the easing function to always be 1:
easeIn(1, begin, change, duration);
The example answer is in this revision jsFiddle: http://jsfiddle.net/dannygarcia/LqP2R/45/

how to reverse animation in IMPACTJS

i am using ImpactJS to create a game on HTML5 and JS, when a animation is running, is it possble at any frame to reverse the animation frame flow (not flipping) ? I used rewind(), it only gets back to the first frame, is there any reverse()?
If you don't mind being a bit hacky something like this should, in theory, work:
animation.sequence = animation.sequence.reverse(); //Reverse the animation
animation.gotoFrame(animation.length - animation.frame - 1); //Set the frame to be the same frame as it was before.
Basically the sequence property of the ig.Animation() class is what determines the order the frames are run, the update just iterates over them based on a timer. Reverse that and you reverse the animation. You can just use the same code again when you want to reset the animation to be forward.
You may need to also do animation.rewind() instead of gotoFrame() if you want the full reversed animation to play out.
Otherwise you could use 2 animations and use gotoFrame() when switching animations to start the correct frame. Also of note the code above will duplicate one frame of animation, you'd want to remove the -1 (looking at the source I think this will be okay in the case where frame = 0).
No, but you could easily write your own using the plugin system.
Or just create a new animation starting with the enetity.currentAnim.frame and then working backwards through entity.sequence.Then setting the current animation to the new one.
No there isn't reverse that i knew of
but instead you could just create new animation that has reversed sequence
then switch to that animation wherever needed

Categories