Is it possible to keep child size when parent is scaled in svelte?

Question

So I have an element that has a custom out transition, exactly this one:

export function rightScaleOut(node, options) {
  let nodeTransform = node.style.transform;
  return {
    delay: options.delay,
    duration: options.duration,
    easing: options.easing,
    css: (t) =>
      `transform: ${nodeTransform} scaleX(${t}); transform-origin: top right;`,
  };
}

Here's how I applied it to my element:

{#if show}
    <div
      out:rightScaleOut={{
        delay: 150,
        duration: 400,
        easing: sineInOut,
      }}
      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}

So the problem that I have is that when the div is getting out the element scale with him but I want the child to keep its original size.

I already checked this SO question but it didn't help.

You mean like this? https://svelte.dev/repl/b53a2bb4eef2400b9206e0f33f37a26c?version=3.55.1 — Corrl, Mar 10 '23 at 15:44

score 1 · Accepted Answer · answered Mar 11 '23 at 06:59

As mentioned in your linked question, the size of the child can be kept constant by scaling it by 1 / factor of the parent. This can be achieved with an additional custom transition on the image element

REPL

function rightScaleOutInverse(node, options) {
        let nodeTransform = node.style.transform;
        return {
            delay: options.delay,
            duration: options.duration,
            easing: options.easing,
            css: (t) =>
            `transform: ${nodeTransform} scaleX(${1/t}); transform-origin: top left;`,
        };
    }

Is it possible to keep child size when parent is scaled in svelte?

1 Answers1