Elements are not being animated after building, works fine in dev server

[DarthGigi]

Elements are not being animated after building the project. In a development server, they are being animated.

I've made a minimal repro: https://stackblitz.com/edit/sveltejs-kit-template-default-gmkp1v

• If you run npm run dev, you will see that the text is being animated
• If you run npm run build && npm run preview, you will see that the text does not animate and just pops into existence

I'm not sure if I'm missing something or doing something wrong?

[candidosales]

Hi @DarthGigi , you should use:

	import Motion from 'svelte-motion/src/motion/MotionSSR.svelte';

In the introduction explaining about this: https://svelte-motion.gradientdescent.de/ (SvelteKit section)

[DarthGigi]

Hi @candidosales, thank you so much for your reply! I somehow missed that part in the docs 😅 . I still have a small problem: the initial="hidden" attribute doesn't work anymore for some reason. The text is visible when the page loads and then does the animation, instead of being invisible and animating to visible.

I have updated my minimal repro: https://stackblitz.com/edit/sveltejs-kit-template-default-gmkp1v
When you refresh the preview page you can see that the text isn't hidden before the animation.

Screenshot.2024-09-03.at.09.23.56.PM.mp4

How it should work:

Screenshot.2024-09-03.at.09.26.04.PM.mp4

Any idea on what could be the issue and/or how to fix it?

[candidosales]

@DarthGigi , I think you can use opacity to control the visibility:

  <Motion let:motion key={i} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}  variants={framerProps} transition={{ duration, delay: i * delayMultiple }}>

https://stackblitz.com/edit/sveltejs-kit-template-default-mpqaxf?file=src%2Flib%2Fcomponents%2Fgradual-spacing.svelte

Another suggestion, you can use animejs is lighter than svelte motion library and you can find many examples of how animate letters: https://tobiasahlin.com/moving-letters/

[DarthGigi]

@candidosales Thanks for you reply again! Your suggestion didn't work unfortunately, the text is still visible on page load and opacity actually broke in the letters sliding in from the right. Do you have any other ideas?

[suyash172003]

Hi @DarthGigi,

I think we can solve this by managing the transition time. I have increased the duration to 1.5 seconds. Please check and let me know your thoughts.

https://stackblitz.com/edit/sveltejs-kit-template-default-bjep6y?file=src%2Flib%2Fcomponents%2Fgradual-spacing.svelte