velocity-animate

What is velocity-animate?

Velocity-animate is a powerful and versatile JavaScript library for creating high-performance animations. It allows developers to animate HTML elements with a wide range of effects, including transformations, colors, and more. The library is known for its speed and efficiency, making it suitable for complex animations and large-scale projects.

What are velocity-animate's main functionalities?

Basic Animations

This feature allows you to create basic animations such as fading an element's opacity. The code sample demonstrates how to animate an element's opacity to 0.5 over a duration of 1000 milliseconds.

document.getElementById('element').velocity({ opacity: 0.5 }, { duration: 1000 });

Transformations

This feature enables you to apply transformations to elements, such as translating and rotating. The code sample shows how to move an element 100 pixels to the right and rotate it by 45 degrees over a duration of 1000 milliseconds.

document.getElementById('element').velocity({ translateX: '100px', rotateZ: '45deg' }, { duration: 1000 });

Color Animations

This feature allows you to animate color properties of elements. The code sample demonstrates how to change the background color of an element to red over a duration of 1000 milliseconds.

document.getElementById('element').velocity({ backgroundColor: '#ff0000' }, { duration: 1000 });

Easing Functions

This feature provides various easing functions to control the acceleration of animations. The code sample shows how to animate an element's opacity to 1 using the 'easeInOutQuad' easing function over a duration of 1000 milliseconds.

document.getElementById('element').velocity({ opacity: 1 }, { duration: 1000, easing: 'easeInOutQuad' });

Sequence Animations

This feature allows you to create sequence animations by chaining multiple animations together. The code sample demonstrates how to first animate an element's opacity to 0.5 and then back to 1, each over a duration of 1000 milliseconds.

Velocity(document.getElementById('element'), { opacity: 0.5 }, { duration: 1000 }).then(function() { return Velocity(document.getElementById('element'), { opacity: 1 }, { duration: 1000 }); });

Other packages similar to velocity-animate

animejs

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It supports a wide range of animations, including CSS properties, SVG, DOM attributes, and JavaScript objects. Compared to velocity-animate, Anime.js offers more flexibility and a more modern API, but may not be as performant for very complex animations.

gsap

GSAP (GreenSock Animation Platform) is a robust JavaScript library for creating high-performance animations. It is widely used in the industry and offers a comprehensive set of features, including timeline management, advanced easing, and plugin support. GSAP is known for its performance and ease of use, making it a strong competitor to velocity-animate.

popmotion

Popmotion is a functional, flexible JavaScript animation library. It provides a range of tools for creating animations, including physics-based animations, keyframes, and timelines. Popmotion's API is highly modular, allowing developers to pick and choose the parts they need. While it offers similar capabilities to velocity-animate, it is designed with a more functional programming approach.

README

Velocity 1.3.2

Docs http://VelocityJS.org

News WhatsApp, Tumblr, Windows, Samsung, Uber, and thousands of other companies rely on Velocity. Visit Libscore.com to see which sites use Velocity on their homepage.

Hi folks, I have some exciting news to share. Julian has graciously offered and I have accepted to become the lead maintainer for Velocity. I'm really excited to be working closely with and learning from him in order to transition this project onto my plate. I remember when Julian started working on Velocity (locked away in his apartment — a few blocks away from me). Then later when he first announced it publicly. And finally when it exploded in growth from 0 to what it is today. I hope to bring that same enthusiasm, energy, and skill to it. I am honored to be taking it on. Looking forward to working on it along with the rest of the contributors.

— Message from @kvirani [August 22, 2016]

React Plugin Announcement: https://fabric.io/blog/introducing-the-velocityreact-library Repo: https://github.com/twitter-fabric/velocity-react NPM: https://www.npmjs.com/package/velocity-react

Quickstart Velocity (CDN, choose one of them):

<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>

Velocity UI pack (CDN, choose one of them):

<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>

Package managers:
npm: npm install velocity-animate bower: bower install velocity

Questions or Problems? Ask on StackOverflow (make sure you add the velocity.js and javascript tags).

Updates

• 1.3.0: Code cleanup - no breaking changes known.
• 1.2.0: Custom tweens. Custom easings. "Finish" command. See commit log for more.
• 1.0.0: File name changed to velocity.js. Read VelocityJS.org/#dependencies.
• 0.1.0: stop now stops animations immediately (instead of only clearing the remainder of the animation queue). No other backwards-incompatible changes were made.

Learn

• Motion design: smashingmagazine.com/2014/06/18/faster-ui-animations-with-velocity-js
• Animating without jQuery: smashingmagazine.com/2014/09/04/animating-without-jquery
• Performance comparisons: davidwalsh.name/css-js-animation
• Workflow: css-tricks.com/improving-ui-animation-workflow-velocity-js

Comparisons

• CSS transitions are meant for simple interface flourishes.
• jQuery's $.animate() is slow and poorly-equipped for motion design.
• Velocity is a fast, feature-rich standalone alternative to jQuery's $.animate().

====

MIT License. © Julian Shapiro (http://twitter.com/shapiro). Stripe sponsors Velocity's development. BrowserStack provides testing services.

Changelog

v1.3.2

21 November 2016

• Fixed incorrect usage of nodeType #720
• lost var definition #713
• Use window.document #710
• Fix typo #712
• Add editorconfig. See #706 for more. #707
• Improving Readme, fix #704 #705
• Allow Velocity(document.querySelector("div"), ...) and similar calls (not specific checking for jQuery / Zepto wrapped) #714
• Add Auto-parameterised start and end values #697 #677 #459 #562 #388 #263
• Allow a value function to return a forcefeeding array. #639
• Ensure being and complete are called correctly for slide/fade effects #460
• Don't split out *-color properties when the start and end are functions #660
• Add inner / outer + Width / Height to get and set - handles box-sizing correctly #485
• Whitelist "loop" for RegisterEffect #654 #655
• Release v1.3.2 fbb5540
• Fixes after #720 - more bad code that didn't work, plus optimisations and minification b0c6c3c
• Update CONTRIBUTING.md f22ec01