SvelteKit not always triggering animations on scroll when using svelte-reveal package

DaveKeehl commented 2 years ago

Describe the bug

Hi, I’m the maintainer of a small Svelte action called svelte-reveal that allows users to easily create and trigger animations on scroll. I’ve tested my package over and over with vanilla Svelte (you can also take a look at this REPL) and it works fine. However, with SvelteKit for some reason it does not.

By testing the action I created on SvelteKit, I've noticed that the animations do not get triggered at a hard page reload, but rather only when the project files are saved with new content. I assume this behavior might have something to do with the way SvelteKit deals with rendering (?). I've decided to create this issue with the highest severity, because at the current state it's almost impossible to preview and test scroll animations without keeping creating dummy content.

Is there anything I can do on my end? If yes, do you have an idea of what might be the root cause?

I did some inspections and all my assets (CSS stylesheet inside the head tag, CSS classes on elements, JS bundle) seem to be correctly placed within the page.

Reproduction

I’ve created reproduction repositories for Svelte and SvelteKit and I deployed them on Netlify and Vercel by using the same source code.

Svelte:

SvelteKit:

Logs

No response

System Info

System:
  OS: macOS 12.1
  CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Memory: 195.90 MB / 16.00 GB
  Shell: 5.8 - /bin/zsh
Binaries:
  Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
  Yarn: 1.22.17 - /usr/local/bin/yarn
  npm: 8.3.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
Browsers:
  Chrome: 97.0.4692.99
  Edge: 97.0.1072.69
  Firefox: 93.0
  Safari: 15.2

Severity

blocking all usage of SvelteKit

Additional Information

No response

Rich-Harris commented 2 years ago

Are the repros private? I'm not able to access either https://github.com/DaveKeehl/svelte-reveal-issue-81-svelte or https://github.com/DaveKeehl/svelte-reveal-issue-81-sveltekit

DaveKeehl commented 2 years ago

Hi Rich, thanks for replying!

Sorry for the repros not being accessible, they are now back. I've also updated some links in my previous comment, because the SvelteKit project builds fine on Netlify but then returns 500 when visiting it (not sure why...). On Vercel it works fine though.

Since I opened this issue at the end of January, I was able to find a workaround that I've also added to the documentation. It basically looks this:

<script>
  import { afterUpdate } from 'svelte';

  let show = false;

  afterUpdate(() => {
    show = true;
  });
</script>

{#if show}
  <your-element-or-component />
{/if}

By doing this, I'm able to trigger the animations at every manual page reload, as it happens with vanilla Svelte. I've also commented out this workaround in the SvelteKit repro, so you can try it out.

Do you think there's a better workaround/solution that doesn't need the users to solve this problem on their end?

souravjamwal77 commented 2 years ago

Thanks, @DaveKeehl for your workaround. I was able to implement the transitions.

socketopp commented 9 months ago

Is this is related to #2759 ?

sveltejs / kit