Pop In

This is a great little utility. I think works a little better than Animate On Scroll in certain cases. You can achieve a very similar effect using AOS zoom-in along with AOS delay (see the docs). My implementation here is nearly identical to that, but it doesn’t actually work on scroll.

The AOS implementations by default always work on scroll, and they also un-animate when you scroll away from that part of the page. (That is, they do the animation backward.) You can turn this off using AOS mirror set to false.

So basically you can do all of this with AOS if you use AOS delay, mirror=false, and set the easing to cubic-bezier, which all needs to be specified in data-aos attributes.
In this alternative implementation, you get a 10-part pop-in (you have to choose the order of things to pop-in) and all you need to do is decorate with classes.

.pop-in {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.6s, transform 0.6s, scale 0.6s;

  &.visible {
    animation: pop-in-animation 0.82s cubic-bezier(.36,.07,.19,.97) both;
    opacity: 1;
  }

  &.position-1 { animation-delay: 0.2s;}
  &.position-2 { animation-delay: 0.4s;}
  &.position-3 { animation-delay: 0.6s;}
  &.position-4 { animation-delay: 0.8s;}
  &.position-5 { animation-delay: 1s;}
  &.position-6 { animation-delay: 1.2s;}
  &.position-7 { animation-delay: 1.4s;}
  &.position-8 { animation-delay: 1.6s;}
  &.position-9 { animation-delay: 1.8s;}
  &.position-10 { animation-delay: 2s;}
}

These have an observer that goes along with them, so they are a good learning example of imperative animations that contain a small “appear on scroll” effect (like AOS, but this is my own implementation), that uses IntersectionObserver.

const popInEffect = () => {

    const callback = (arr, appearOnScroll) => {
        arr.forEach((entry) => {
            if (!entry.isIntersecting) {
                return
            } else {
                entry.target.classList.add(`visible`);
                appearOnScroll.unobserve(entry.target)

            }
        })
    }
    const appearOnScroll = new IntersectionObserver( callback, {
        root: null,
        rootMargin: '0px',
        threshold: 0
    })

    let targets = document.querySelectorAll('.pop-in');
    targets.forEach((target) => {
        appearOnScroll.observe(target);
    })
}

export default popInEffect;