How To Make Something Fade In Animate
❗ ❗ ❗ This is README for aos@side by side ❗ ❗ ❗
For concluding stable release (v2) become here
🚀 Demo
🌟 Codepen Examples
- Different built-in animations
- With anchor setting in use
- With anchor-placement and different easings
- With uncomplicated custom animations
⚙ Installation
Basic
Add together styles in <head>:
< link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> Add script right before closing </body> tag, and initialize AOS:
< script src="https://unpkg.com/aos@next/dist/aos.js"> </ script > < script > AOS . init ( ) ; </ script >
Using bundle managers
Install aos package:
-
yarn add together aos@next - or
npm install --save aos@side by side
Import script, styles and initialize AOS:
import AOS from 'aos' ; import 'aos/dist/aos.css' ; // Y'all tin can likewise utilise <link> for styles // .. AOS . init ( ) ;
In order to make it piece of work you lot'll accept to make sure your build process has configured styles loader, and bundles it all correctly. If you're using Parcel yet, it will work out of the box every bit provided.
🤔 How to use it?
1. Initialize AOS:
AOS . init ( ) ; // You can too pass an optional settings object // below listed default settings AOS . init ( { // Global settings: disable: false , // accepts following values: 'telephone', 'tablet', 'mobile', boolean, expression or function startEvent: 'DOMContentLoaded' , // proper noun of the event dispatched on the certificate, that AOS should initialize on initClassName: 'aos-init' , // form applied afterwards initialization animatedClassName: 'aos-animate' , // course applied on animation useClassNames: fake , // if true, will add content of `data-aos` as classes on scroll disableMutationObserver: false , // disables automatic mutations' detections (advanced) debounceDelay: 50 , // the delay on debounce used while resizing window (advanced) throttleDelay: 99 , // the delay on throttle used while scrolling the page (advanced) // Settings that tin be overridden on per-element footing, by `data-aos-*` attributes: kickoff: 120 , // offset (in px) from the original trigger betoken delay: 0 , // values from 0 to 3000, with stride 50ms duration: 400 , // values from 0 to 3000, with footstep 50ms easing: 'ease' , // default easing for AOS animations once: false , // whether animation should happen merely once - while scrolling down mirror: faux , // whether elements should breathing out while scrolling past them anchorPlacement: 'elevation-bottom' , // defines which position of the element regarding to window should trigger the blitheness } ) ; 2. Fix animation using information-aos attribute:
< div data-aos="fade-in"> </ div > And adapt behaviour by using information-aos-* attributes:
< div data-aos="fade-up" information-aos-showtime="200" information-aos-delay="50" data-aos-duration="grand" data-aos-easing="ease-in-out" information-aos-mirror="true" data-aos-one time="simulated" data-aos-ballast-placement="meridian-center" > </ div >
Come across full list of all animations, easings and anchor placements
Anchor
At that place is also a setting that can be used but on per-element basis:
-
data-aos-anchor- element whose showtime will be used to trigger blitheness instead of an actual i.
Examples:
< div data-aos="fade-upward" information-aos-ballast=".other-element"> </ div > This way yous can trigger animation on one element, while you roll to another - useful in animative fixed elements.
API
AOS object is exposed as a global variable, for now at that place are three methods available:
-
init- initialize AOS -
refresh- recalculate all offsets and positions of elements (called on window resize) -
refreshHard- reinit assortment with AOS elements and triggerrefresh(called on DOM changes that are related toaoselements)
Example execution:
By default AOS is watching for DOM changes and if there are any new elements loaded asynchronously or when something is removed from DOM information technology calls refreshHard automatically. In browsers that don't support MutationObserver like IE you might need to call AOS.refreshHard() by yourself.
refresh method is called on window resize and then on, as it doesn't require to build new store with AOS elements and should be as light every bit possible.
JS Events
AOS dispatches two events on document: aos:in and aos:out whenever any element animates in or out, so that you lot can practice extra stuff in JS:
document . addEventListener ( 'aos:in' , ( { particular } ) => { panel . log ( 'animated in' , detail ) ; } ) ; document . addEventListener ( 'aos:out' , ( { detail } ) => { console . log ( 'animated out' , detail ) ; } ) ; You can too tell AOS to trigger custom event on specific element, past setting data-aos-id attribute:
< div data-aos="fade-in" data-aos-id="super-duper"> </ div > And so you'll be able to heed for 2 custom events then:
-
aos:in:super-duper -
aos:out:super-duper
Recipes:
Adding custom animations:
Sometimes built-in animations are simply non plenty. Let's say yous need 1 box to take dissimilar animation depending on resolution. Here's how you lot could do information technology:
[data-aos = "new-animation"] { opacity : 0; transition-property : transform, opacity; &.aos-animate { opacity : 1; } @media screen and (min-width : 768px ) { transform : translateX(100px ); &.aos-animate { transform : translateX(0); } } } And then employ it in HTML:
< div data-aos="new-animation"> </ div > The element will only animate opacity on mobile devices, but from 768px width it'll likewise slide from right to left.
Adding custom easing:
Similar to animations you tin add together custom easings:
[information-aos] { torso[data-aos-easing = "new-easing"] & , &[data-aos][information-aos-easing = "new-easing"] { transition-timing-function : cubic-bezier(.250 , .250 , .750 , .750); } } Customizing default animations distance
Default distance for built-in animations is 100px. Every bit long equally you're using SCSS though, you tin can override it:
$aos-distance: 200px; / / It has to be above import @import 'node_modules/aos/src/sass/aos.scss'; You have to however configure your build process to allow information technology to import styles from node_modules beforehand.
Integrating external CSS animation library (eastward.g. Animate.css):
Apply animatedClassName to change default behaviour of AOS, to employ class names placed inside data-aos on curlicue.
< div information-aos="fadeInUp"> </ div >
AOS . init ( { useClassNames: truthful , initClassName: fake , animatedClassName: 'animated' , } ) ; The above element will get two classes: animated and fadeInUp. Using different combinations of the iii higher up settings, you should exist able to integrate any external CSS blitheness library.
External libraries however don't care besides much about animation country before the actual blitheness. So if y'all want those elements to be non visible earlier scrolling, you might need to add similar styles:
[data-aos] { visibility : hidden; } [data-aos].animated { visibility : visible; } Caveats:
setting: duration, delay
Duration and filibuster have values from 50 to 3000, with stride 50ms, it's because those are handled past css, and to not make css longer than it is already I implemented simply a subset. I believe those should cover almost cases.
If non, yous can write simple CSS that will add together some other elapsing, for example:
body[data-aos-elapsing = '4000'] [data-aos], [data-aos][information-aos][data-aos-duration = '4000'] { transition-elapsing : 4000ms ; } This code will add 4000ms duration bachelor for you to ready on AOS elements, or to set as global elapsing while initializing AOS script. Notice that double [data-aos][information-aos] - information technology's not a mistake, it is a play a trick on, to make individual settings more than important than global, without need to write ugly "!important" there :)
Example usage:
< div data-aos="fade-in" data-aos-elapsing="4000"> </ div >
Predefined options
Animations
-
Fade animations:
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-upwardly-left
- fade-downwards-correct
- fade-downwardly-left
-
Flip animations:
- flip-up
- flip-downwardly
- flip-left
- flip-right
-
Slide animations:
- slide-upwards
- slide-down
- slide-left
- slide-right
-
Zoom animations:
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
Ballast placements:
- height-lesser
- height-heart
- summit-top
- center-bottom
- heart-center
- center-top
- lesser-bottom
- bottom-heart
- bottom-top
Easing functions:
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- ease-in-back
- ease-out-back
- ease-in-out-back
- ease-in-sine
- ease-out-sine
- ease-in-out-sine
- ease-in-quad
- ease-out-quad
- ease-in-out-quad
- ease-in-cubic
- ease-out-cubic
- ease-in-out-cubic
- ease-in-quart
- ease-out-quart
- ease-in-out-quart
❔ Questions
If yous found a bug, have a question or an idea, please check AOS contribution guide and don't hesitate to create new issues.
Source: https://github.com/michalsnik/aos
Posted by: cornettinglacrievor.blogspot.com
0 Response to "How To Make Something Fade In Animate"
Post a Comment