Inview observer, load schema js.

InviewObserver-LoadSchema.md

InviewObserver

let dark = false

function changeMode() {
  const el = document.querySelector('#body')
  dark = !dark
  dark ? el.classList.add('dark') : el.classList.remove('dark')
}

function loadSchema(file = '/schema/person.json') {
  fetch(file)
    .then((response) => response.text())
    .then((txt) => {
      const script = document.createElement('script')
      script.setAttribute('type', 'application/ld+json')
      script.textContent = txt
      document.head.appendChild(script)
    })
    .catch((e) => console.log(e))
}

function animateObserver(amination_name = 'animate__fadeIn', trigger = '.services_list', loop = true, name = '.animate__inview') {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      // Check elements with class name
      const el = entry.target.querySelectorAll(name)
      el.forEach((i) => {
        if (entry.isIntersecting) {
          i.classList.add(amination_name)
          if (!loop) {
            // Run animation only once
            i.classList.remove('animate__inview')
          }
          return // if we added the class, exit the function
        } else {
          // We're not intersecting, so remove the class!
          i.classList.remove(amination_name)
        }
      })
    })
  })

  observer.observe(document.querySelector(trigger))
}

window.onload = () => {
  // Load schema (change first in files person.json and website.json)
  // loadSchema('/schema/website.json')
  // loadSchema('/schema/person.json')

  // Run inview animation
  animateObserver('animate__fadeInUp', '.faq-list')
  animateObserver('animate__flipInX', '.social-list')
  // Run inview animation only once
  // animateObserver('animate__fadeInUp', '.faq-list', false)
  // animateObserver('animate__flipInX', '.social-list', false)
}

How to inview

<div class="animate__animated animate__pulse animate__slow animate__infinite">...</div>

<!-- Inview reload animation -->
<div class="services_list">
    <div class="services_item animate__inview animate__animated"></div>
    <div class="services_item animate__inview animate__animated"></div>
    <div class="services_item animate__inview animate__animated"></div>
</div>

import animateObserver from '@/utils/animate_observer'
onMounted(() => {
	animateObserver('animate__fadeIn', '.services_list') // Show and hide when inview
	animateObserver('animate__fadeIn', '.services_list', false) // Show once dont hide
})