javascriptcsssveltesvelte-transition

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


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.


Solution

  • 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;`,
            };
        }