julianshapiro / velocity Goto Github PK

The scroll command seems to be only dealing with vertical scrolling. How about implementing horizontal scrolling too?

Hey,

you said to continue asking questions: here you are!! =)

When I have a loop, I'd like to have a delay only the first time the animation starts. After that (in the reverse animation and in every loop) I don't want to have the delay.
Right now I simply use a setTimeout(), isn't it possible to add a delayOnce option??

Am I talking about useless feature?? =)

Thanks, cya

I am really enjoying the shortcut syntax in velocity, like scroll and reverse. I think it would be awesome if there was an easy way for developers to extend velocity and add their own custom shortcuts, e.g. $('div').velocity('fadeIn') or $('div').velocity('slideUp').
This would start to rival the similar shorthand syntax that jQuery uses.

The reason I bring this up is because I am starting to replace all the jQuery animation calls on my site but a lot of them are hiding behind things like fadeOut or slideUp. As you can imagine, it gets quite annoying having to write: $('div').velocity({opacity: 1}, {display: 'block'});, when $('div').fadeIn(); did the trick. Once again, the change I have in mind would make it $('div').velocity('fadeIn');.

The other alternative here is to override jQueries fadeIn method to use velocity but I'd rather keep jQuery intact. Any other approaches that I might not have thought of?

If you are open to the idea, I don't mind drafting up a PR for the change, though it might require a lot of re-piping. Thoughts?

Hi @julianshapiro,

thank you for your great work with velocity. I gave it a spin but ran into a problem when animating a DIV to {right: 0}. After the animation, the right-property is set to "auto".

According to your comments in your code bottom- and right-property should be reverted to 0.

cheers

Is there planned support for the 'blur' filter ?
I know it's webkit-only* at the moment, but it's what's missing from my 'magic_animations' port :)

*http://caniuse.com/#feat=css-filters

That is one of the lines that it says on the website and that drew me to this library, since I am really just looking for a minimal library, but turns out the minimized library has 20kb.

If you are talking about the gzipped version, would be nice if you could mention that.
Thanks.

jsDelivr has some phenomenal features where you can generate one single js file from multiple ones and in that way reduce the number of requests needed.

It would be great if you would consider adding velocity to their list of repos.

Thanks for something awesome <3

Thanks for your work on this library - looks promising! I've been testing it out and ran into a small issue. We have scrollable elements in our app (overflow-y:scroll) and have used jQuery's animate like so:

$('.pickup-locations').stop().animate({
  scrollTop: this.topPosition - 15
}, 1000);

When I tried dropping in .velocity using the new syntax, it didn't seem to work:

$('.pickup-locations')
  .velocity('stop')
  .velocity({ scrollTop: this.topPosition - 15 },{ duration: 1000 });

I also tried this, but it only seems to scroll the window to the element's position, not the element itself:

$('.pickup-locations')
  .velocity('stop')
  .velocity('scroll', { duration: 1000, offset: this.topPosition });

Any thoughts on how to achieve animated scrolling inside a scrollable element? Thanks!

It is often useful to jump directly to the final state of an animation and jQuery.animate does just that when you set duration to 0. With velocity, duration: 0 apparently causes the animation to run in the default 400ms duration. A 1ms duration behaves as expected but is not a satisfactory solution when you need an immediate jump to the final state. Thanks!
(PS: your plugin is amazing!)

Hi, started using velocity now and it's going well. Few things I'm wondering:

First of all, regards loops. Take this example:

I have a circle which I'd like to rotate. So if I'd like to do this once with velocity it's basically as simple as: $('.circle').velocity({ rotateZ: ["360deg", "0deg"] }, { duration: 1000 });

Now, with the way 'loop' is designed to work, if I loop that X amount of times it would spin to 360, then back from 360 to 0, then repeat.

How about having the option to force the loop to continue by considering a value of 360 as equivalent to 0 and hence continually spin in one direction?

Also, I think it would be nice to be able to set loop: "infinite", akin to in CSS transitions.

Second thing I'm wondering is with regards to chaining animations on one element: say for example I have a rectangle and I'd like to do the following: when a user scrolls in the vicinity of a desired section the boxes in the section would start at 0deg, rotateZ by 25deg right, then to 25 deg left, then back to 0deg. I can't really see an easy way to do both of the first two movements, rather than just one.

And actually, a final suggestion: have a first argument similar to "reverse" but instead "repeat", pretty self explanatory really. Say I have menu items, and when the page loads a little wobble animation is applied to all the li elements, say when a user hovers one of the items, the same effect should occur. If I could just have a simple jQuery function $("li").hover(function(){
$(this).velocity("repeat");
});

So that the effect earlier applied could repeat itself from the initial force fed values/cached values I think that would be sweet.

Sorry if some of what I'm saying is already covered or redundant because I don't yet know it intricately. :)

Cheers!

Hi

http://jsfiddle.net/ctZWq/

Click the link "velocity" and you will see there is no animation.

This is not really a bug, but it's good to know, i've waste 3h to find the incompatibility with http://plugins.jquery.com/jquery.easing/

Thanks

Dear Julian,

Thanks for the NPMjs publishing, but let me notice, that it does not contain your JS file at all. :(

https://www.dropbox.com/s/g2nencv3c1wgjid/Screenshot%202014-05-06%2007.11.07.png

I wonder if https://github.com/tobia/Pause/blob/master/jquery.pause.js can be repurposed to wrap over $.velocity instead of $.animate to enable pausing/resuming velocity animations.

These jQuery functions need to be stripped out into their own Velocity add-on -- preferably all encapsulated under a new prefix to indicate their connection, but also their differentiation, from their jQuery counterparts:

$.extend()
$.data()
$.queue()
$.dequeue()
$.offset()
$.isPlainObject()
$.isEmptyObject()

The goal would be to separate out these shims into an independent file to be optionally loaded alongside Velocity in production.

If anyone's willing to tackle this, feel free to reach out to me about it. For now, my personal focus is on addressing any bugs that arise so I can ensure Velocity is a reliable long-term replacement for jQuery's $.animate().

It would be great if we could have a "visibility" option that behaves the same way as Velocity's "display" option - i.e. when set to "visible" it is applied up front, and when set to "hidden" it is applied at the conclusion of the animations.

Also, Velocity is great.

I get this question a lot. Here's the full response:

I so thoroughly circumvented their CSS and animation codepaths that they would have to house a lot of redundant code to in order incorporate Velocity.

Either way, we're now working to remove jQuery dependency -- so this will be an entirely moot point shortly. (I built Velocity to be minimally reliant on jQuery. Dependency removal will be simple.)

Create an extended examples page, possibly even similar to the one jquery has, for all the animation functions that are supported.

It would be lovely to see this in npmjs.org to able to manage automatic build&deployment using this lib as resource.

Like JQuery, knockout, etc. do.

Thanks!

On the Velocity docs page, it is stated that 'Velocity automatically falls back to jQuery's $.animate() in IE 6 and 7'. This is fantastic, and exactly what I'd expect, however this will not work if people are building jQuery -effects for use with Velocity.

It would be nice if (either automatically in the absence of $.animate, or via an option), Velocity called $.css instead in these old browsers.

Bug reporting

Unless you're reporting an obvious bug that can be immediately recreated by anyone, please create a demo with the minimum amount of code needed to reproduce your bug. You can use this template, which already has Velocity and the UI pack loaded: http://jsfiddle.net/65xCP/4/.

Using Velocity without jQuery? Here's how you can save a couple KB

If you're using jQuery with Velocity, simply cut out the jQuery shim code at the top of velocity.js. It's simple and safe to do. Just delete all the code that comes before this:

/******************
    Velocity.js
******************/

I don't plan on releasing a build that automatically excises the shim because I don't want to overwhelm users with build options, nor do I want to maintain an additional file.

Disabling transitions during Velocity animation

Velocity automatically adds a velocity-animating class to elements that are in the process of animating. So, you can add a custom class in your stylesheet to disable transitions during these moments, e.g.

.velocity-animating { transition: none }

Velocity is not working on elements cloned within jQuery

Velocity cannot animate elements that have been cloned within jQuery when jQuery's clone function is passed the true argument, which indicates that a deep clone should be performed. This is a result of Velocity relying on jQuery's internal data store when jQuery is present on the page. The act of cloning duplicates an element's data store, which then presents Velocity with stale data values on the cloned element. The solution is to call jQuery's .removeData() after deep cloning an element.

$.css()-like transform setting/getting

To set a transform subproperty (e.g. translateX, rotateZ, scale) in the same manner that you'd instantly set a CSS property using jQuery's $.css() function, use Velocity's hook() function: http://VelocityJS.org/#hook. If, in particular, you wish to animate from an arbitrary transform value that wasn't previously set, use forcefeeding: http://velocityjs.org/#forcefeeding. For example:

/* 90 is your target end value. 123 is your forced start value. */
$element.velocity({ rotateZ: [ 90, 123 ] }, 0);

Preventing memory leaks when creating/destroying large numbers of elements

When you're repeatedly removing elements from the DOM, also call jQuery's $element.removeData() on the target elements to clean them of the data Velocity has saved onto them.

Scrolling a textarea

$("textarea").velocity("scroll", { container: $("textarea"), offset: SCROLL_AMOUNT_HERE });

Using Velocity's slideUp/Down functions for nav menus

Let's say you have a nav menu that slides down into view when the user hovers over it. It may seem like a good idea to stop the sliding down animation then start a sliding up animation if the use hovers off the menu midway through a sliding down animation. (If you don't call stop, the subsequent sliding up animation will queue onto the sliding down animation, which takes a long time to play out. Plus, you don't want a bunch of slide animations queueing onto each other if the user hovers back and forth.)

The problem here is that calling Velocity's stop function will firmly set the element's height at whatever its explicit value is at the moment stop is called. If you then attempt to slide this element down again, it'll slide down to this incorrect height value instead of its original height.

The solution to this problem is to not call stop on sliding elements, and instead avoid re-triggering slide animations if the element is already in the process of sliding. You can achieve this by checking for the presence of a velocity-animating class:

$navContainer.on({
    mouseover: function() {
        if (!$nav.hasClass("velocity-animating")) {
            $nav.velocity("slideDown");
        }
    },
    mouseout: function() {
        if (!$nav.hasClass("velocity-animating")) {
            $nav.velocity("slideUp");
        }
    }
});

Overwriting $.animate()

Do not overwrite jQuery's native $.animate() function with $.velocity(). Keep them separate. Velocity does not guarantee 100% API compatibility with jQuery's $.animate(). Even if it did, overwriting third-party functions is widely considered bad practice.

Contributors

Yehonatan Daniv (@ydaniv): Spring physics, promises, issues moderation.
Jens Anders Bakke (@cfenzo): Initial effects porting for the UI Pack.
Jimmy Gaussen (@nmussy): Initial jQuery dependency removal.

Hello
Now velocity is a single big file and it is difficult for many devs to work on it. Could you break it to multiple modules (commonJS, AMD)?

Cheers

I'm researching using velocity for a new project for which performance is a huge concern. Adding velocity on top of jQuery's effects is something I will have a hard time selling to the stakeholders.

Since Velocity and jQuery's effects are roughly the same size, I would feel much better custom building jQuery to not include effects, and use Velocity for everything relating to animation.

From what I can tell, of jQuery's effects, Velocity is only dependent on $.easing, which is not present if you build jQuery -effects. I'd love to see Velocity work with jQuery -effects.

I haven't dived in to this, but I can manage to get jQuery -effects and Velocity to load without errors if I add:

jQuery.easing = {
    linear: function( p ) {
        return p;
    },
    swing: function( p ) {
        return 0.5 - Math.cos( p*Math.PI ) / 2;
    }
};

(taken straight from jQuery) after loading jQuery and before loading Velocity. There may be some more dependencies that I haven't yet encountered, but either way this would be an awesome change to make Velocity all the better.

Hi there.

I love this plugin, great work.

A suggestion might be to move the docs over to Github, that way someone like me could pull request instead of complaining 👍

Thanks for the wonderful work, seeing dramatic improvements all around!

I have a specific cubic-bezier I like to use for my CSS transition timing functions. I'd love to be able to use it with Velocity, too. Is there a way to modify the easing function in this way? Or to declare the easing in CSS?

backgroundColor is not working in Safari 7.0.3
$(".btn").velocity({ backgroundColor: "#333333" }, { duration: 500, easing: "easeOutExpo" });
Anything wrong?
Great plugin, Thanks!

It's necessary for some animations to loop indefinitely. Is it possible in Velocity without big performance hits?

It could be great if you could implement a simple seek feature, where you could specify a percent or ms value where the animation jumps instantly (then the animation could be continued from that state or reset to the start position or simply reverse play from those point.)

Not sure why this is happening, but when I run tests with PhantomJS velocity throws the following error:

Uncaught TypeError: 'undefined' is not a function (evaluating 'CSS.getPropertyValue(element, "boxSizing").toLowerCase()') (http://localhost:8001/bower_components/Velocity.js/jquery.velocity.js:753)

I fixed it temporarily by doing some more checks (it seems getPropertyValue doesn't return a string so toLowerCase is undefined) in the if statements there, but I'm sure there's a cleaner way to handle it than this...

if (property === "height" && CSS.getPropertyValue && CSS.getPropertyValue(element, "boxSizing").toLowerCase && CSS.getPropertyValue(element, "boxSizing").toLowerCase() !== "border-box") {
    return element.offsetHeight - (parseFloat(CSS.getPropertyValue(element, "borderTopWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "borderBottomWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingTop")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingBottom")) || 0);
} else if (property === "width" && CSS.getPropertyValue && CSS.getPropertyValue(element, "boxSizing").toLowerCase && CSS.getPropertyValue(element, "boxSizing").toLowerCase() !== "border-box") {
    return element.offsetWidth - (parseFloat(CSS.getPropertyValue(element, "borderLeftWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "borderRightWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingLeft")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingRight")) || 0);
}

While simple slideUp / Down calls work, .velocity('fadeIn') etc not.

Having latest v0.0.1

Create a page that will make extensive comparison between the fast js animation libraries.

Given the fact that JavaScript will have promises natively in the language with ES6, and the fact there's many polyfills/libraries out there to replace jQuery's many instances of $.Deferred, it doesn't hurt if Velocity.js look into incorporating something like that instead of depending on JQuery for such things.

I'm trying to synchonize animations across a page, by making one jQuery object for a set of elements, and calling .velocity(mySequence) on that object (with force-fed values). In situations where some of those elements are currently animating, those animations need to halt/cancel and make way for this call.

Unfortunately, calling .velocity('stop') is not sufficient to make this happen. Is it possible to forcibly cancel the current animation, or is this not supported?

...On a related note, some elements that are part of the jQuery object do not seem to be animating at all. Am I doing this wrong?

Hi!

I realize that this hasn't exactly been released yet but I wanted to submit a feature request anyway.

When running on a large enough stylesheet there is serious slowdown in IE (tested with 10 and 11) caused by the parsing of every css rule in $.velocity.Classes.extract. Can velocity be configured to skip the initial extraction? More importantly, is this even a good idea?

Thanks!

I was messing around with swapping out the animate function entirely to see if I could utilize velocity without having to alter third-party scripts (in this case a Wordpress theme). Is this something that is supported and/or recommended?

I put the following after both jQuery and velocity are included:

jQuery.fn.animate = jQuery.velocity.animate;

Any tips or ideas appreciated. Thanks for the work on this great plugin!

Mention the library licence.

The upcoming jQuery-free Velocity build will only be larger than the current jQuery-required build by 5Kb when minified and 2Kb when gzipped.

(The current Velocity build is 24Kb when minified and 8Kb when gzipped.)

Here's the question: Should there be one or two builds in total for Velocity? In other words, should there just be a single velocity.js which doesn't depend on jQuery (but works as normal if jQuery is in fact loaded), or should there be velocity.js and jquery.velocity.js files?

The con of having two builds is mental overhead for new users not knowing which to choose. Plus, there's the (albeit mild) development overhead of being on top of updating both versions (although they only differ by the inclusion of a single jQuery shim file -- so it's not that bad).

There's a part of me that feels like, for the sake of cleanliness, there should just be one version, even if file size goes up by 5kb(min)/2kb(zip). But there's another part of me that worries that a total file size of ~29Kb(min)/~10KB(zip) pushes the limits of Velocity being considered a very lightweight library.

Thoughts?

Example:

var d = $('div');
var end = function() {console.log("Fired!");}
d.velocity({ left: 0 },{duration:0.01})
.velocity({ left: 500 },{duration:2000, complete:end});

setTimeout(function() {
    d.velocity('stop');
}, 1000);

But isn't stopped!

How to do it?

This is an edge case definitely, but making an element which zooms from a small size (in this case 0) up to 1, will appear very blurred until the animation is complete. Both Android Browser and Firefox are fine.

I assume this is related to hardware-scaling optimisations and potentially there may be nothing Velocity can do, but I have created a reduced example: http://codepen.io/MattyBalaam/pen/ewdvt

Device: Nexus 10
Android: 4.4.2
Browser: Android Chrome 34.0.1847.114

Hey,

first of all fantastic library!!! You really saved my ass at work!!! As soon as we'll be online I'll send you the address so that you could put our site in your velocity gallery!

BTW, I'm in the situation to use another library for something like .css('transform', 'translateX(10px)') while with velocity I'd simply do .velocityCSS('translateX', 10)

Any changes to add a feature like that?

Yeah, I know I could do .velocity({ translateX: 10 }, { duration: 0 }), but .velocityCSS is shorter =)

Thanks!!!

I was reading the source and thought it should work a Transit way:

$(selector).css('rotateZ'). But it always returns undefined.

How do I get separate values of the transform in my JS? Thanks!

Need to clear the cache once a transform is complete. Once an effect is complete , the cache messes up with the values you pass to $.velocity when it is called again .

Have U tested your 3D demo on older machines?
It's not running very smooth on my laptop.

Firstly, I love the work on this library, exactly what I have been looking for.

I have a question about queue. If I set up a set of animations, and set queue to false some animations will run in parallel, but some still run after each other.

$div.velocity({width: 100});
$div.velocity({height: 100});
$div.velocity({marginLeft: 200});
$div.velocity({paddingTop: 60}, {queue: false}); // I would have assumed only this animation would run in parallel with the previous one.
$div.velocity({marginTop: 560});
$div.velocity({paddingRight: 40});
$div.velocity({marginTop: 0});

I had originally assumed that if I set queue to false, it would only be the set of properties in that call that would not be part of a queue but it would appear to affect the whole queue, but in a way I don't understand.

In addition if I set up two elements with their own set of animations, both seem to need queue: false before any alteration to behaviour. I have a codepen: http://cdpn.io/sdrHk

I've been using .animate to change font-sizes as an animation to display scaling to fit a box. I then replaced this with the jQuery Transit's plugins .transition and it also worked. Changing to .velocity and this breaks.

In my list of properties I have:

{"font-size" : "100px"}

If I do this, it ends up with the font-size as 0px.

The only way I've managed to get this to work is by using:

{"fontSize" : "100px"}

Is this intended behaviour, or a bug?

It'd be great to have support for an animation progress callback (like jQuery animate) ... or would this have a severe negative impact on performance?

It used to be Velocity.js. Now it's just velocity.

This is a powerfull feature of jQuery to create the slideDown/up animations. Currently Velocity only supports (or am i wrong?) exact values.

$el.velocity({ height: 'auto' });

The Page-wide options defaults are being set using $ which breaks in jQuery noConflict mode. I replaced:

$.fn.velocity.defaults = {

with

jQuery.fn.velocity.defaults = {

That seems to work find in noConflict mode as far as I can tell.

Hi Julian,

regarding your comment [1]

As for Transit's tearing and banding at high element counts -- that is indeed the performance bottleneck of CSS transitions shining through

i think this is a bug in Transit rather than 'bottleneck of CSS transitions shining through'. i put together a pure CSS animation testcase that somewhat mimics the Velocity benchmark and it works for me without tearing and is actually faster than Velocity on both desktop and mobile (300 elements)

http://jsfiddle.net/kSW2b/3/

that bug may be related to limits imposed by staying within jquery's animation API. would love to hear your thoughts.

cheers!

[1] https://news.ycombinator.com/item?id=7663969

Just a simple suggestion:
In order to make it a bit easier to get used to the animation chaining $().velocity(), could you also add a name like "vanimate", so that the animation could be done using $().vanimate() ?