3

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

azalikaayla
  • 41
  • 1
  • 1
  • 5

2 Answers2

4

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.

theelmix
  • 51
  • 6
0

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">
Adam V
  • 1
  • 2