So I want to create a transition when my element will be out. I want the transition to only scaleX (from 1 to 0), because I know that in svelt there is a scale transition but it scales the element in its entirety.
Here is how I use the scale transition for now :
{#if show}
<div out:scale="{{duration: 1000}}" data-title="picture portfolio" data-scroll-speed="1">
<img
on:click={transition}
on:keydown={transition}
src="pictures/portfolioPicture/landing.png"
alt="photography portfolio landing"
/>
</div>
{/if}
In the JS I just toggle the show variable. Any help will be welcome :)
You could write a custom transition - In out transitions t
runs from 1 to 0
<script>
import { cubicOut } from 'svelte/easing';
let show = true
function customScale(node, options) {
return {
duration: options.duration,
easing: cubicOut,
css: t => `transform:scaleX(${t}); transform-origin: top left;`
}
}
</script>
<button on:click={() => show = !show}>
toggle show
</button>
{#if show}
<div out:customScale="{{duration: 1000}}" data-title="picture portfolio" data-scroll-speed="1">
<img src="https://pbs.twimg.com/profile_images/1121395911849062400/7exmJEg4_400x400.png"
alt="photography portfolio landing"
/>
</div>
{/if}