title: Is it possible to trigger Intersection Observer callback every scroll/pixel?
body: <p>I'm using Intersection Observer API instead of scroll events for my animations but I just ran into a problem when trying to animate SVG along the <code>offset-path</code> depending on scroll position and scroll value.</p>
  <pre><code>path.style.offsetDistance = element.intersectionRatio * 100 + &quot;%&quot;;
  </code></pre>
  <p>Since Intersection Observer callback fires every time it passes through <code>threshold</code> values defined in <code>options</code> object, using <code>element.intersectionRatio</code> to animate <code>offset-distance</code> gives me glitchy aniamtion that fires only every 25% percentage of scroll. I could put every 1% in options object for threshold, like so:</p>
  <pre><code>let options = {
    root: null,
    rootMargin: &quot;20px&quot;,
    threshold: [0.01, 0.02, 0.03, 0.04, .....]
  };
  </code></pre>
  <p>but is there a better solution or should I just switch to good old scroll events and use scrollY value in the formula to calculate offset-distance smoothly every scroll/pixel?</p>
  <p>The rest of the code:</p>
  <pre><code>let options = {
    root: null,
    rootMargin: &quot;20px&quot;,
    threshold: [0, 0.25, 0.5, 0.75, 1]
  };
  
  let callback = (entries, observer) =&gt; {
      entries.forEach(element =&gt; {
          if (element.isIntersecting) {
              element.target.querySelectorAll(&quot;path&quot;).forEach(path =&gt; {
                  path.setAttribute(&quot;style&quot;, &quot;offset-path: path('M&quot; + generateRandomAnimationPathM() +&quot; &quot; + generateRandomAnimationPathM() + &quot; L &quot; + generateRandomAnimationPathLine() + &quot; &quot; + generateRandomAnimationPathLine() + &quot;')&quot;, &quot;offset-rotate: 0deg&quot;);
                  path.style.offsetDistance = element.intersectionRatio * 100 + &quot;%&quot;;
              });
          }
      });   
  }
  
  let generateRandomAnimationPathM = () =&gt; {
      return Math.floor(Math.random() * Math.floor(100));
  }
  
  let generateRandomAnimationPathLine = () =&gt; {
      return Math.floor(Math.random() * Math.floor(200));
  }
  
  let observer = new IntersectionObserver(callback, options);
  
  document.querySelectorAll('section').forEach(section =&gt; {
      console.log(section)
      observer.observe(section);
  });
  </code></pre>