Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scrollIntoView with animate on scroll #83

Open
socketopp opened this issue Feb 1, 2024 · 0 comments
Open

scrollIntoView with animate on scroll #83

socketopp opened this issue Feb 1, 2024 · 0 comments

Comments

@socketopp
Copy link

socketopp commented Feb 1, 2024

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?

@socketopp socketopp changed the title PROBLEM: scrollIntoView with animate on scroll scrollIntoView with animate on scroll Feb 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant