michalsnik / aos Goto Github PK
View Code? Open in Web Editor NEWAnimate on scroll library
License: MIT License
Animate on scroll library
License: MIT License
As you have zoom-in and zoom-out, I think adding fade-out in the fade predefined animations could be useful in some cases.
Hi there!
Besides bower, would be possible to add this project to NPM?
Thanks.
Hello! I am having problems with getting the animations to fire. What am I doing wrong?
Issue is here:
http://www.worklemon.com/
Thanks!
Mike
It not work when animated items in overflow block
Is there a special trick to handle content that is lazy loaded? I tried firing AOS.refresh(), but that doesn’t seem to help very much.
Thanks again :)
I looked at #42 but it's not quite what I'm dealing with here. I have the actual script loaded in the head, but I initialize it at the end right before . And it works, but when I open up DevTools I still see the error. I'm using this for my Rails application, so I don't know if that has anything to do with it. Any ideas on how I can get that error to go away? Or since I got it working, should I not worry about it?
Hi, for a site I’m building I need some elements to disappear when the page is scrolled past them.
So I wondered if there was some way to remove the class not only when the element is below the current page fold, but also when it is scrolled past and the element is above the fold.
Hello,
I have an issue when I want to use AOS with other frameworks like said in title.
I am using Material for bootstrap and own styles. But it seems like that AOS animaitons are not in priority to affect the website. Do you have an idea how I can set the priority?
Thanks and regards
Gino
When i add aos attributes to my svg elements IE doesn't render my html and doesn't show the elements with aos attributes.
Here is my code.
-- HTML --
<svg height="72" width="72" stroke-dasharray="220" stroke-dashoffset="221" data-aos="fill" data-aos-duration="600" data-aos-delay="600" data-aos-anchor=".content"> <circle cx="36" cy="36" r="35" stroke="#999FAF" stroke-width="1" fill="transparent"></circle> </svg>
-- CSS --
`[data-aos='fill'] {
stroke-dashoffset: 221;
&.aos-animate {
stroke-dashoffset: 0;
}
}`
Would it possible to fire some events when things happen? Like after classes are applied to elements, etc? I think this would allow some more flexibility with the script.
I’m really loving it – using it on everything.
I want to use aos together with RequireJS but I can't get it to work. I get error: "main.js:78 Uncaught TypeError: Cannot read property 'init' of undefined". All the other scripts works fine. My main.js file looks like this:
requirejs.config({
paths: {
jquery: 'lib/jquery',
domReady: 'plugins/require/domReady',
async: 'plugins/require/async',
lazysizes: 'plugins/lazysizes',
velocity: 'lib/velocity',
velocityUi: 'lib/velocity.ui',
matchHeight: 'plugins/jquery.matchHeight',
fastclick: 'plugins/fastclick',
offCanvasMenu: 'modules/offCanvasMenu',
subNav: 'modules/subNav',
productsInsideProdCat: 'modules/productsInsideProdCat',
respimg: 'plugins/ls.respimg',
slick: 'plugins/slick',
onePageNav: 'plugins/jquery.onePageNav',
countUp: 'plugins/countUp',
ctaForm: 'modules/ctaForm',
popUp: 'modules/popUp',
hunt: 'plugins/hunt',
aos: 'plugins/aos',
animateNumbers: 'modules/animateNumbers',
},
shim: {
'picturefill': {
deps: ['lazysizes']
},
'lazysizes': {
deps: ['slick']
},
'velocity': {
deps: ['jquery']
},
'velocityUi': {
deps: ['velocity']
},
}
});
define(function(require) {
'use strict';
var $ = require('jquery');
var domReady = require('domReady');
var FastClick = require('fastclick');
var hunt = require('hunt');
var AOS = require('aos');
require('lazysizes');
require('respimg');
require('slick');
require('velocity');
require('velocityUi');
require('matchHeight');
require('offCanvasMenu');
require('countUp');
require('productsInsideProdCat');
require('onePageNav');
require('subNav');
require('ctaForm');
require('popUp');
require('animateNumbers');
domReady(function() {
AOS.init({
duration: 500,
easing: 'ease-out-quart',
anchorplacement: 'top-bottom',
offset: 250,
once: true,
});
}); // domReady end
}); // define end
Any ideas?
is it: 'anchor-placement'
or anchorPlacement
?
I’ve tried both, but neither seem to work.
I'm trying to implement aos but it seems broken.
Here is HTML and CSS.
`
<title></title>
<meta name="" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.css" rel="stylsheet">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.js"></script>
<script>
AOS.init();
</script>
<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>
<div class="item" data-aos="slide-up">7</div>
<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>
.item {
width: 200px;
height: 200px;
margin: 50px auto;
padding-top: 75px;
background: #ccc;
text-align: center;
color: #FFF;
font-size: 3em;
}`
It has been taken from Live Demos at https://css-tricks.com/aos-css-driven-scroll-animation-library/, I just copied it but it's not working, I'm beginner front-end so i would be glad for an working answear.
I put the CDN imports, and added the init at the <head>
of the page, but animation doesn't work and that's what I get on chrome console:
aos.js:122 Uncaught TypeError: Cannot read property 'setAttribute' of null
Hello,
Google's Material Design Lite use a custom DOM structure to wrap the main content. Can you help me how to override the default scrollable element (html, body) with the container element?
Hello,
can anyone take a look at my aos animation and see why they dont trigger right?
third section with iphone messages popping up --
so they should go one by one but not doing it even with delays and when i scroll up i want it to do it again
Hi! I hope my many questions aren’t discouraging. I think this plugin is great and will be very useful.
I’m working on this site: http://prd.studiohelm.com.au/ and the bottom 2 images (right before the footer) are not firing properly. Would you mind checking into it and letting me know if I’m doing something improperly?
Hi, first, thanks for this awesome lib, that's very cool.
I've searched for simple Fade-in (without move up/down/left/right) effect but I didn't find it.
Do you know if it's possible to add it ?
I want my animation to run a number of times rather than just once, but I can't find a place where this is done in all of the demos. Is this possible?
I want to fade-in my elements when they are in view but i want them not to fade out whatsoever. How can I achieve this?
I apologize if this is not the right place to post this - it may be a Drupal issue rather than AOS, but I figured it wouldn't hurt to bring it up. After loading aos.js and calling the init function through the CMS theme, my browser console displays the following error:
document.querySelector(...) is null
Any thoughts? (Thanks for your time!)
$val-sm
, $val-md
, $val-lg
and especially $easing
are IMO too generic. It would be good to add prefixes, like $aos-val-sm
.
I've been trying to implement this with Meteor and React.js is there something that might prevent it from working on this frameworks?
At the moment it's not possible to override $val-sm
, $val-md
and $val-md
variables. It could be easily fixed by adding the !default
statement.
The !default
statement makes it possible to override variables before a SASS file is @imported. Reference: https://robots.thoughtbot.com/sass-default
This is not properly a bug/error but more a warning: when you check your website with Google PageSpeed (this could also affect other applications that parse the website similarly to it) and you use an AOS animation that resize the image (like the flip-) the insight alerts you to "compress and resize your image", meanwhile using animations that don’t resize the image (like the fade-) no alerts are shown.
PageSpeed also suggest you the image size to use instead and for a 220x220px having flip-left it suggests you to use a 38x188px image.
I was hoping this would work with the latest versions of Edge and Internet Explorer 11 but that doesn't seem to be the case.
Always returns an error Object doesn't support property or method 'includes'
as seen here:
https://www.dropbox.com/s/rg8xrhbb7dt72o2/Screenshot%202016-06-28%2016.37.03.png?dl=0
Atm you ask for .offsetLeft
and .offsetTop
on each parent element, which each triggers a reflow and leads to layout thrashing. When switching to .getBoundingClientRect()
you minimize the amount to a single reflow.
Going with the modular pattern of the animate-on-scroll practice, perhaps it would be a good idea to separate out the actual animation CSS, so it can be replaced with a dedicated animation library such as Animate.css.
Hey Michalsnik,
http://northout-dev.us-east-1.elasticbeanstalk.com/wemod-site/pro.html
this is the website we're working. aos animation was working fine untill i've disable body scroll. for some reasons i have to disable body/html scrollbar and make inside div (.wrapper) scrollable. it is not working on page loads, it starts working when we resize browser window.
my question is
how can we make aos scrolling work on any div's scrollbar rather than default browser scrollbar
Hi,
I'm trying to use AOS but I can't make it work.
The divs disappear completely from the webpage and I get this error in the console:
'aos.js:122 Uncaught TypeError: Cannot read property 'setAttribute' of null'
I'm referencing the JS file to:
<script src="https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.js"></script>I've tried to do it locally and I get the same error. I'm quite new with CSS and JS so I wonder if this is some kind of bug in AOS or I'm simply doing something wrong.
I wonder if this is a know issue and if you could guide me to the appropriate way to solve it.
Thanks
Great library, thank you!
As it written in ES6 I think it's just one step left to offer real ES6 export
and use jsnext:main
field in package.json
: https://github.com/rollup/rollup/wiki/jsnext:main - it will result in very handy imports for other ES6 apps.
Love the looks of this little library. I'm unsure if I'm missing something completely obvious, but haven't had any luck implementing this with react.
I'm using create-react-app.
I have a long product page, with lots of sections, each one being rendered by it's own react functional component, that looks relatively like this:
import React from 'react';
import './XYZ.css';
import XYZImg from './assets/XYZ.png';
import AOS from 'aos'
const ProductXYZ = () => {
AOS.init()
return(
<section className="Product-XYZ">
<div className="content XYZ-container">
<img className="product-img" data-aos="fade-zoom-in" alt="XYZ" src={XYZImg} />
<section className="XYZ-details">
<h2 className="product-header"> Lorem ipsum etc. </h2>
<p className="product-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, .</p>
</section>
</div>
</section>
)
}
export default ProductXYZ;
I've tried init
ing AOS on the parent level component and in a per component basis but neither have had any luck getting an image / html element to animate in on scroll.
Anything I'm missing?
Thanks!!
edit: extra notes
.config
file is not exposed unless you eject
your project. So I haven't looked into how that might make a difference...Im not sure this is a bug or not.
But seems like no transition-timing-function
on CSS
If animation duration is long enough, scrolling element out of the view (opacity: 0) animation lasts too long. If you scroll back to elements position it could be still doing the hiding animation.
Maybe setting hiding animation duration to smaller fixed value or with new data-attribute.
I quickly handled it with this css:
[data-aos][data-aos][data-aos-remove='100']:not(.aos-animate)
transition-duration 100ms
Also option to hide (opacity: 0) faster than doing the movement transition-duration 100ms, 500ms
When i init AOS in jQuery document ready function AOS isn't initialized
$(document).on('ready', function(){ AOS.init(); });
Getting this in this console. I installed via npm and referenced the css file in the /dist folder.
Seems like many test I've done before testing your code that the scroll detection inside a div (like a popup) is not working. So the script isn't either.
Here's a little fiddle to represent what I'm talking about.
https://jsfiddle.net/Warface/tgv0rmj2/
As you can see, there's 5 element inside that popup and only the first 3 are visible, the next ones stay hidden since the script don't detect the scroll inside that popup. Any clue on how to fix this?
Hello
In tag body has event onclick to do something. This event work good on desktop and android.
Only ios device can not work good.
this is codepen
http://codepen.io/eknimation/pen/ORAOgr
Thank you
Maybe IntersectionObserver can be used in the future, this was recently added to Chrome 51.
https://www.youtube.com/watch?v=LXbtIeHIQJA
http://rawgit.com/WICG/IntersectionObserver/master/index.html
Fyrd/caniuse#2425
Hi.
Thanks again for a great plugin. Just wonder, is it possible to run a javascript function on the element instead of a css animation? Would be great to have the flexibility...
https://developer.mozilla.org/en-US/docs/Web/Events/load
I’m not getting an init when setting the options.startEvent
to load
. The documentation above suggests binding load to window
instead of document
. Is that something you think would be better? Maybe just check for load
and use window
instead of document
.
I’m more than happy to do a pull request, but it’s just one line :)
The main issue I’m having, is that when I have any elements in the top area, they’re not animating in – they just sit there.
IMO it would be good to split SCSS files into:
This will allow to include all the styles at once (by including the aos.scss file) or to include the core styles only - without animations. I will not break the backward compatibility.
I know this isn't directly an issue with the plugin but thought it would be the best place for it.
I'd recommend updating the link to always get the latest. At the moment if someone downloads from there and reads the docs stuff won't work.
It seems that sourcemaps are put in the /dist
directory unintentionally. Isn't it?
Right now all movement (translate, flip, etc) are static.
Is there a way of specifying them different for some elements?
p.e. data-aos-distance.
I had some issues getting elements to trigger. I narrowed it down to the overflow property. It seems that if overflow is set and it's set to anything other than "visible", the element in question just doesn't display at all and certainly doesn't get triggered.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.