Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Animating when content loads in Selte

New member
Joined
Feb 27, 2023
Messages
1
I have a website which lists hiking tours as cards in Svelte. I use {#each} to generate the cards:

Code:
{#each tours as tour}
    <Card {tour} />
{/each}
The contents of the cards are grabbed from a separate file in the directory, I'm not using APIs. I wanted to have animation for them when the website loads, for each to generate one-by-one. I tried

Code:
import { fade, fly } from 'svelte/transition';
and added this to the main div of the card component:

Code:
in:fly={{ y: 200, duration: 400 }} out:fade
But this only animates this way if the content is removed, not when loading the page.
 
Top