javascript - How to trigger animation on scroll up with AOS - Stack Overflow

admin管理员组

文章数量:1278984

I'm using AOS library (css & js) it helps me to create animation triggered everytime user scrolling down the page. I have an issue that the top element of my page only run once because AOS only make it triggered when scroll down. I want all my animation run evrytime user scrolling down and up. How can I make it ? and this is a sample of my problem.

JSFiddle

for look scrolling up do not give any effect please put

<div class="alert kotak" data-aos="bounce"> 

in

<div class="wrapper">

tag

I'm using AOS library (css & js) it helps me to create animation triggered everytime user scrolling down the page. I have an issue that the top element of my page only run once because AOS only make it triggered when scroll down. I want all my animation run evrytime user scrolling down and up. How can I make it ? and this is a sample of my problem.

JSFiddle

for look scrolling up do not give any effect please put

<div class="alert kotak" data-aos="bounce"> 

in

<div class="wrapper">

tag

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 12, 2017 at 4:06 azalikaayla asked Jan 12, 2017 at 4:01 azalikaaylaazalikaayla 6111 gold badge11 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I had the same question, i used attributes on the container:

 data-aos-mirror="true"

Or pass it as settings in the init object.

AOS.init();

// You can also pass an optional settings object
// below listed default settings
AOS.init({
  // Global settings:
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)


  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  once: false, // whether animation should happen only once - while scrolling down
  mirror: true, // whether elements should animate out while scrolling past them

});

Hope it helps for newers as me.

You need to add the class name of "aos-item", here is an example that animates re-animates every time you scroll past it.

<div class="well hidden-sm hidden-xs aos-item" data-aos="zoom-out"  data-aos-anchor-placement="top-center">

本文标签： javascriptHow to trigger animation on scroll up with AOSStack Overflow