Audience
Developers interested in an open-source solution offering scrolling animations
About Animate On Scroll (AOS)
Animate on scroll library. In order to make it work, you'll have to make sure your build process has configured styles loader and bundles it all correctly. If you're using Parcel, however, it will work out of the box as provided. AOS object is exposed as a global variable, for now, there are three methods available. Initialize AOS, recalculate all offsets and positions of elements (called on window resize), reinitiate the array with AOS elements, and trigger refresh (called on DOM changes that are related to AOS elements). By default, AOS is watching for DOM changes and if there are any new elements loaded asynchronously or when something is removed from DOM it calls refreshHard automatically. In browsers that don't support MutationObserver like IE, you might need to call it by yourself. You can also tell AOS to trigger a custom event on a specific element. You can also add custom animations.
Other Popular Alternatives & Related Software
Element
Element is a secure communications platform built on Matrix: a decentralised and end-to-end encrypted protocol. Bring your teams together, boost productivity and workplace satisfaction, while retaining complete ownership of your data.
Element is a leader in the Forrester Wave: Secure Communications report.
Easily collaborate with your partners, suppliers or clients with video calls and instant messaging: like email for the 21st century. You can even connect your Slack, MS Teams, WhatsApp accounts. On the other hand Element can be closed for high security environments using secure border and cross domain gateways, and even air-gapped deployments.
Being built on Matrix, there is no single point of failure for the network thanks to the decentralised network architecture, making it perfect for mission-critical environments.
Please contact us to explore how your business can benefit from Element.
Learn more
Choreographer-js
A simple library to take care of complicated animations. You can also add custom functions that do non-CSS animations! Install and save to your package.json, and include it in your Javascript. Brew up some instant scroll animations. Animate based on scroll location, animate based on mouse X location and create multiple animations based on mouse X location. Now you can create an instance of Choreographer, and run the animations based on whatever measurement floats your boat (ex. scroll position, mouse position, timestamp, whatever). The easiest way to understand how this all works is to check out the examples. Bugs will occur if you overlap animation ranges that affect the same style properties! There are two built-in animation functions available, called 'scale' and 'change'. Progress is what allows for progressive scaling of values (ex. smooth fading of opacity, 2d translation, etc.) If the value is between 0 and 1, that means you are within a range.
Learn more
Polymer
The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be instantiated using a constructor or document creation element, configured using attributes or properties, populated with internal DOM inside each instance, responsive to property and attribute changes, styled with internal defaults or externally, and responsive to methods that manipulate its internal state. Registering an element associates a class with a custom element name. The element provides callbacks to manage its lifecycle. Polymer also lets you declare properties, to integrate your element's property API with the Polymer data system. Shadow DOM provides a local, encapsulated DOM tree for your element. Polymer can automatically create and populate a shadow tree for your element from a DOM template.
Learn more
Anime.js
Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects. Follow through animations made easy. Anime's built-in staggering system makes complex follow-through and overlapping animations simple. It can be used on both timings and properties. Animate multiple CSS transforms properties with different timings simultaneously on a single HTML element. Play, pause, control, reverse and trigger events in sync using the complete built-in callbacks and controls functions. Anime.js works with anything web. CSS, SVG, DOM attributes and JavaScript Objects, animate everything with a single unified API. Staggering allows you to animate multiple elements with follow-through and overlapping action. Animation keyframes are defined using an Array, within the keyframes property. Each keyframe duration will be equal to the animation's total duration divided by the number of keyframes.
Learn more
Pricing
Starting Price:
Free
Free Version:
Free Version available.
Integrations
No integrations listed.
Company Information
AOS
michalsnik.github.io/aos/
Videos and Screen Captures
Other Useful Business Software
Our Free Plans just got better! | Auth0
You asked, we delivered! Auth0 is excited to expand our Free and Paid plans to include more options so you can focus on building, deploying, and scaling applications without having to worry about your security. Auth0 now, thank yourself later.
Product Details
Platforms Supported
Cloud
Windows
Mac
Linux
iPhone
iPad
Android
Chromebook
Training
Documentation
Support
Online
