javascriptsveltesvelte-3svelte-transition

Is there a way to only scaleX with svelte transition?


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 :)


Solution

  • You could write a custom transition - In out transitions t runs from 1 to 0

    REPL

    <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}