aos를 활용한 애니메이션 추가 방법

1. aos가 발동됐을 때 이벤트 추가

document.addEventListener('aos:in', ({ detail }) => {
  const bestSwiperElem = detail.classList.contains('best-section');
  if(bestSwiperElem) {
    this.bestSwiper.params.autoplay = {
      delay: 2500,
      disableOnInteraction: false,
    };
  }
});

 

best-section에 도달했을 때 이벤트를 추가할 수 있음.

 

 

2. aos에 사용자 정의 애니메이션 추가

 

HTML

<div data-aos="new-animation"></div>

 

CSS

[data-aos="new-animation"] {
  opacity: 0;
  transition-property: transform, opacity;

  &.aos-animate {
    opacity: 1;
  }

  @media screen and (min-width: 768px) {
    transform: translateX(100px);

    &.aos-animate {
      transform: translateX(0);
    }
  }
}

 

 

출처: https://github.com/michalsnik/aos