michalsnik / aos Goto Github PK

View Code? Open in Web Editor NEW

25.8K 25.8K 2.5K 1.43 MB

Animate on scroll library

License: MIT License

CSS 13.78% JavaScript 86.22%

aos's People

Contributors

Stargazers

Watchers

Forkers

piotrlewandowski kenio marcinsztankowski josetorrico marshallswain rockmandew hehe-coding publicroots kojoprempeh mori-k leotaillard tamara-reznikova frankie-666 andreamorone efremz couturecraigj akash0675 s1ckdark harish94 lynsei sparkinzy camdixon armiekk utkarshbhimte worldrepository carlosveliz hamnetdeui maposatj ponciusz alfhub changqing666 umarashidiqi carabina grzegorz-s outmost livelikelion gdseller cwdx krishna19 sanjeevks121 chas2016 chrisemoulton paulshvorak cscazorla femotizo workwsl crwinl latticccceeee meiseayoung sharonching mlv-shadab magdonar anandselva bogtan arjunmenon ducban karimabdul pandroid a973c weburnit bestfreelancer mdlorey umarmughal bukalov jaguilarpv umesh-naik xeronith mariopro oandersonbm juanelojga apurbajnu grumcz ridjohansen delpa kamal74 iamarif buzadam lucarosaldi nolajun oddnavy iamravenous candybrito sensenel mistaawesome dhobbs84 stevematthewroberts xshiyun gitter-badger womol sistemampc sammersss 541196776 yaniv81 protofy smulholland2 martinb07 begin-imagedesign fervillz jeiman quentinnolan

aos's Issues

The demo site download button links to an old version of AOS

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.

Not working inside a popup

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?

background color issue

Hi,

I have issue if the div have background color.

If the div background color is #fff, it dont have issue.
If the div background color is grey, it will have overlay issue appear.
Please refer to screenshot.

May I know how can I fix this by CSS?

THanks

Doesn't work with Edge or latest IEs

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

Not triggering correctly

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

Consider to use IntersectionObserver

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

Scrolling in overflow block

It not work when animated items in overflow block

Issue with Material Design Lite

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?

aos.js:122 Uncaught TypeError: Cannot read property 'setAttribute' of null

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

Is it possible to set an iteration count for my animation?

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?

AOS IE (Internet Explorer) 10 not displaying HTML on Scroll - Opacity still 0

I have a problem with IE10 (or IE 10 render mode) where the elements are created but hidden with opacity 0, some how its not changing them on scroll

Animate-Once

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?

Simple Fade-in effect ?

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 ?

PageSpeed on specific animations

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.

Remove .aos-animate class when element is scrolled past

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.

[improvement] Add !default to SASS variables

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

[improvement] Use less generic variables names

$val-sm, $val-md, $val-lg and especially $easing are IMO too generic. It would be good to add prefixes, like $aos-val-sm.

Issues with react?

I've been trying to implement this with Meteor and React.js is there something that might prevent it from working on this frameworks?

Set priority for data-aos animations if other frameworks (for e.g. bootstrap) are in used.

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

AOS Won't Trigger if CSS has an overflow property besides visible.

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.

Everything working, but console still showing "Uncaught TypeError: Cannot read property 'setAttribute' of null"

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?

aos.css:1 Uncaught ReferenceError: Invalid left-hand side in assignment

Getting this in this console. I installed via npm and referenced the css file in the /dist folder.

Fade-out

As you have zoom-in and zoom-out, I think adding fade-out in the fade predefined animations could be useful in some cases.

Animate.css integration

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.

Real ES6 exports from source

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.

AOS Drupal integration error

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!)

Question: Anchor Placement in default init settings

is it: 'anchor-placement' or anchorPlacement ?
I’ve tried both, but neither seem to work.

Run javascript function instead of css animation?

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...

Text shadow (or color, or weight) different with AOS enabled

This is font without AOS enabled:

This is font with AOS enabled:

As you can see, font shadow is a bit different, not sure why.

CSS : Easing functions are gone ?

Im not sure this is a bug or not.

But seems like no transition-timing-function on CSS

Animations not firing

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?

Separate the core SCSS from the animations SCSS

IMO it would be good to split SCSS files into:

aos.scss - this file will include the following files:
_core.scss - core styles only (so basically variables and [data-aos] only).
_animations.scss - animations only.

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.

Consider binding to event listener to window instead of document for initilization

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.

AOS isn't working at all.

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>

` `\* { box-sizing: border-box; }

.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.

Can't get aos to work with RequireJS

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?

Modifying Distance

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.

Working AOS in with React.

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 initing 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

create react app uses webpack - but the .config file is not exposed unless you eject your project. So I haven't looked into how that might make a difference...

aos.js:122 Uncaught TypeError: Cannot read property 'setAttribute' of null

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:

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

body onclick in ios device can not work good

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

AOS Attributes doesn't work with svg tags. (IE)

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;
    }
}`

Add to NPM

Hi there!

Besides bower, would be possible to add this project to NPM?

Thanks.

Remove sourcemaps from /dist

It seems that sourcemaps are put in the /dist directory unintentionally. Isn't it?

Remove element to be able to have shorter animation

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

how to run AOS animation on div scrollbar not body or browser scrollbar?

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

Not responsive in bootstrap

Use getBoundingClientRect to get element's offset

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.

(https://gist.github.com/paulirish/5d52fb081b3570c81e3a)

Cannot get the animations to fire.

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