bakaotaku Posts - Answer Overflow

bakaotaku

•Created by bakaotaku on 8/15/2023 in #support

solid-motion. Children exit animation not triggering.

I am using @motionone/solid for animation. I have a component wrapped in presence. This component contains multiple elements each with their own exit prop set to a animation. When the component is removed from dom, only the immediate child to presence plays it's exit animation. children deeper inside don't play any animation...

2 replies

SSolidJS

•Created by bakaotaku on 8/1/2023 in #support

How to reactively set height of a element?

The title is kinda vague so let me explain. I have a h1 tag that has 2 divs inside it. I want to set the height of the parent h1 tag equal to height of single child div. I've kept overflow hidden so the extra div is hidden. My component looks like this:

import { Motion } from "@motionone/solid";
import { createSignal, For } from "solid-js";
import pageStore from "~/store/page";

export default function Home() {
  const [ref, setRef] = createSignal<HTMLElement>();
  const [_, setPage] = pageStore;

  return (
    <Motion.section
      class="flex items-center justify-center"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      onClick={() => {
        setPage("about");
      }}
    >
      <h1
        style={
          ref() &&
          (console.log(ref()!.getBoundingClientRect().height),
          {
            height: `${ref()!.getBoundingClientRect().height - 2}px`,
          })
        }
        class="overflow-hidden text-center text-9xl font-semibold"
      >
        <For each={["Baka Otaku", "Tanish Khare"]}>
          {(word) => (
            <div ref={setRef}>
              <For each={word.split("")}>
                {(letter, idx) => (
                  <Motion.span
                    class="inline-block letterSpan"
                    animate={{ y: "-100%" }}
                    transition={{
                      y: {
                        duration: 1,
                        delay: idx() * 0.03,
                        easing: [0.76, 0, 0.024, 1],
                      },
                    }}
                  >
                    {letter.trim() === "" ? "\xa0" : letter}
                  </Motion.span>
                )}
              </For>
            </div>
          )}
        </For>
      </h1>
    </Motion.section>
  );
}

import { Motion } from "@motionone/solid";
import { createSignal, For } from "solid-js";
import pageStore from "~/store/page";

export default function Home() {
  const [ref, setRef] = createSignal<HTMLElement>();
  const [_, setPage] = pageStore;

  return (
    <Motion.section
      class="flex items-center justify-center"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      onClick={() => {
        setPage("about");
      }}
    >
      <h1
        style={
          ref() &&
          (console.log(ref()!.getBoundingClientRect().height),
          {
            height: `${ref()!.getBoundingClientRect().height - 2}px`,
          })
        }
        class="overflow-hidden text-center text-9xl font-semibold"
      >
        <For each={["Baka Otaku", "Tanish Khare"]}>
          {(word) => (
            <div ref={setRef}>
              <For each={word.split("")}>
                {(letter, idx) => (
                  <Motion.span
                    class="inline-block letterSpan"
                    animate={{ y: "-100%" }}
                    transition={{
                      y: {
                        duration: 1,
                        delay: idx() * 0.03,
                        easing: [0.76, 0, 0.024, 1],
                      },
                    }}
                  >
                    {letter.trim() === "" ? "\xa0" : letter}
                  </Motion.span>
                )}
              </For>
            </div>
          )}
        </For>
      </h1>
    </Motion.section>
  );
}

6 replies

Gaming

Programming