[SOLVED] How to run window.resize event?

1

Im testing the animation on scroll script(https://michalsnik.github.io/aos/) that is listening for the window “resize” event.
It is suppose to animate a div when it is in the middle of the screen.

It say in their docs that

refresh - recalculate all offsets and positions of elements (called on window resize)

So it is listening for the window.resize event.

So when I load my page Im running this.

$$(document).on('page:init', '.page[data-name="apple"]', function (e) {
var page = e.detail;
         
        //init the animation script...
	  AOS.init();
	
       //since the script is listening to the "resize" event Im triggering it here...
       $$(window).trigger('resize');
	//AOS.refresh();
	
});

But this doesnt work, it is not running the animation.

But if I acually resize the browser window by draging and changing the size of it, then it works.
Then the animation is running.

So how can I trigger the resize event when I load the page?

2

Hi, you can listen to your div scroll and refresh AOS

document.getElementsByClassName('my-aos-div')[0].onscroll = function (e) {
AOS.refresh()
}
3

Thanks a lot pvtallulah
I got it working with this.

$$(document).on('page:init', '.page[data-name="apple"]', function (e) {
    AOS.init({
      duration: 600,
      easing: 'ease-in',
    });
   $$(document).on('scroll', '.page-content', function(){
	 AOS.refreshHard()
   },true);
});