CODEWITHSUNDEEP
javascriptsveltesvelte-3svelte-transition
Eli-ott
Eli-ott

Reputation: 366

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

Upvotes: 1

Views: 771

Answers (1)

Corrl
Corrl

Reputation: 7741

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}

Upvotes: 2

Related Questions