如何使用AOS向上滚动触发动画

Question

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

Answer 1

您需要添加“ aos-item”的类名，这是一个示例，该示例在每次滚动通过它时都会对动画进行动画处理。

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

Answer 2

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 newcomers as me.