-2

I am trying to add animations to elements that are only viewable after the scroll down has taken place, how do I ensure that the animations have only taken place AFTER the user has scrolled down and can view them. Preferably using CSS and not Javascript.

AsTeR
  • 7,247
  • 14
  • 60
  • 99
Tristan Matthews
  • 1
  • 1
  • https://stackoverflow.com/questions/487073/how-to-check-if-element-is-visible-after-scrolling --> How to check if element is visible after scrolling? – ikiK Feb 16 '21 at 14:20
  • AFAIK there is not direct way to condition CSS styling to the scrolling in a page. This might be relevant though https://css-tricks.com/styling-based-on-scroll-position/ – AsTeR Feb 16 '21 at 14:20
  • Sounds as though intersectionObserver would be helpful here, though it needs a bit (not much) of Javascript. If you put up some code to show your specific case it would help. – A Haworth Feb 16 '21 at 14:22

1 Answers1

0

You can't do it without javascipt.

you can use IntersectionObserver to do that. It's mostly used for lazy loading but you will need a small piece of to be able to observe your scroll.

var sections = document.querySelectorAll('section');

var options = {
  rootMargin: '0px',
  threshold: 0.25
}

var callback = (entries) => {
  entries.forEach((entry) => {
      var target = entry.target;
      console.log(target);
    if (entry.intersectionRatio >= 0.25) {
      target.classList.add("is-inview");
    } else {
      target.classList.remove("is-inview");
    }
  })
}

var observer = new IntersectionObserver(callback, options)
sections.forEach((section, index) => {
  observer.observe(section)
});

you can see smallest working code here.

Jignesh
  • 51
  • 1
  • 1