velocity-animate
Advanced tools
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.
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 }); });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 (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 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.
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.
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
<script src="//cdn.jsdelivr.net/npm/velocity-animate@1.5/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.5.1/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/velocity-animate@1.5/velocity.ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.5.1/velocity.ui.min.js"></script>
Please note that JSDelivr will automatically supply the latest release, while CloudFlare needs to ask for a specific version.
npm: npm install velocity-animate
bower: bower install velocity
Ask on StackOverflow (make sure you add the [velocity.js] and [javascript] tags).
background:["rgba(red,0.1)", "blue"]).
High resolution timers (animations should be slightly smoother).velocity.js. Read VelocityJS.org/#dependencies.stop now stops animations immediately (instead of only clearing the remainder of the animation queue). No other backwards-incompatible changes were made.====
MIT License. © Julian Shapiro (http://twitter.com/shapiro).
Stripe sponsors Velocity's development.
BrowserStack provides testing services.
6 January 2018
FAQs
Accelerated JavaScript animation.
The npm package velocity-animate receives a total of 114,594 weekly downloads. As such, velocity-animate popularity was classified as popular.
We found that velocity-animate demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.