scrollIntoView with animate on scroll

My question is essentially how do we scroll to a specific element that have a transition effect?

So scroll into view scrolls to a specific element based on it's current position. But what if that element is conditionally rendered with an animation? Then the element is not visible in the DOM at the moment when the user wants to scroll to that element in the DOM.

I am using svelte-intersection-observer, not sure how to resolve this.

import IntersectionObserver from 'svelte-intersection-observer';
let infoNode: HTMLElement, featureNode: HTMLElement, faqNode: HTMLElement, priceNode: HTMLElement;

<div class="flex flex-col mt-32 gap-60">
  <div id="features">
    <IntersectionObserver once element={infoNode} let:intersecting>
      <div bind:this={infoNode}>
        {#if intersecting}
          <section
            in:fly={{ duration: 700, x: -150, opacity: 0.1, easing: cubicIn }}
            class="flex items-center justify-center"
          >
            <Info />
          </section>
        {/if}
      </div>
    </IntersectionObserver>
  </div>

  <IntersectionObserver once element={featureNode} let:intersecting>
    <div bind:this={featureNode}>
      {#if intersecting}
        <section
          in:fly={{ duration: 700, x: 150, opacity: 0.1, easing: cubicIn }}
          class="relative flex items-center justify-center"
        >
          <Features />
        </section>
      {/if}
    </div>
  </IntersectionObserver>

  <div id="pricing">
    <IntersectionObserver once element={priceNode} let:intersecting>
      <div bind:this={priceNode}>
        {#if intersecting}
          <section
            in:fly={{ duration: 700, x: 150, opacity: 0.1, easing: cubicIn }}
            class="relative flex items-center justify-center"
          >
            <Pricing />
          </section>
        {/if}
      </div>
    </IntersectionObserver>
  </div>

  <div id="faq">
    <IntersectionObserver once element={faqNode} let:intersecting>
      <div bind:this={faqNode}>
        {#if intersecting}
          <section
            in:fly={{ duration: 700, y: 150, opacity: 0.1, easing: cubicIn }}
            class="relative mb-56"
          >
            <Faq />
          </section>
        {/if}
      </div>
    </IntersectionObserver>
  </div>
</div>

Are there any workarounds to this?

metonym / svelte-intersection-observer

scrollIntoView with animate on scroll #83