CODEWITHSUNDEEP
sveltesveltekit
Joel Hager
Joel Hager

Reputation: 3440

Initial load animations for Sveltekit SSR pages?

I've followed the issues in github, and it seems to be a HUGE open-ended question in terms of 1st party support. Has anybody implemented any type of logic to enable transitions on initial page load? Any CodePen examples or whatnot? It's really ugly seeing things pop in the first time.

some sample code:

<div class="grid lg:grid-cols-2 justify-between items-center py-[6rem] max-w-[1200px] m-auto">
  <img in:fly={{x: 50, delay: 250, duration: 500}} class="p-5 m-auto hover:scale-[105%] transition-scale duration-150" src="/images/home-responsive-devices.jpeg" alt="Homepage on different devices"/>
  <div in:fade={{delay: 500, duration: 500}} class="flex flex-col w-full">
    <p class="leading-8 px-10 py-6 text-justify"><span class="font-semibold">AdPrompt</span> believes content creators should make more revenue for their work. That is why we are committed to building tools that help people turn passions into professions. Our proprietary A.I. and advertising technologies remove the inefficiencies from today’s digital advertising landscape, passing that value on to real people doing what they love.</p>
    <a class="m-auto" href="/contact"><button class="self-center mt-10 btn btn-primary btn-outline">Learn More</button></a>
  </div>
</div>

Upvotes: 3

Views: 1277

Answers (1)

carlosV2
carlosV2

Reputation: 1419

I've built a component that could do what you need:

<script>
  import { fade } from 'svelte/transition';
  import { navigating } from '$app/stores';
  import { onMount } from 'svelte';

  let animate = !$navigating;
  let loaded = false;

  onMount(() => loaded = true);
</script>

{#if animate}
  {#if loaded}
    <div in:fade={{delay: 500, duration: 500}} class="contents">
      <slot/>
    </div>
  {/if}
{:else}
  <slot/>
{/if}

The idea behind this component is to trigger the animation only if $navigating is null (it is null for the first load and then it contains an object with the navigation details on subsequent loads) and after the component has been mounted.

You can take a look at this REPL.

I'm not sure this is the best way to do it but, at least, it isolated and reusable.

The big pity is that Svelte allows for such animations to happen if you set the intro parameter in the component to true but I haven't found a way to set this from within the component itself.

Upvotes: 2

Related Questions