Relative Content

Tag Archive for sveltesveltekit

Svelte transition with spring instead of duration+easing

I have been following the CSS-tricks article on running Svelte transitions with spring, instead of the usual duration+easing methos. The final result shows spring applied on a transform transition, which is nice and well. But what I wish to achieve is a slide transition with spring – which I have not managed to implement (height/width calculations on containers is more tricky than simple transforms, as mentioned in the article). Can someone kindly suggest how to achieve it?

Remember content in Svelte

In my SvelteKit project, I have a layout that should display all pages next to each other horizontally, but they all are 100vw wide, so only one is shown “within” the screen at a time (the other ones are to the left/right of the screen), and when navigating from one page to another, they should all nicely slide sideways, so the page you navigate to gets shown centered on the screen. Here is a quick demo in a Svelte project that shows how I want it to work.