This package has been deprecated

Author message:

please move to @crossani/solid

solid-crossani
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

Solid CrossAni

Bringing the awesome CrossAni transition and animation framework to SolidJS.

Installation

Install solid-crossani and crossani:

  • npm i crossani solid-crossani
  • pnpm i crossani solid-crossani
  • yarn add crossani solid-crossani

That's it.

Usage

  1. In your component, import EASE from crossani and import solid-crossani, like so:
import { EASE } from "crossani";
import crossani from "solid-crossani";
// !!!! this may be required to stop vite and/or typescript
// !!!! removing the import even though you do need it
false && crossani; // it will be minified out of your dist.
  1. Create a signal to trigger animations, and add a use:crossani:
export default () => {
  const [triggerAni, setTriggerAni] = createSignal("");

  return <div use:crossani={triggerAni}>{/* ... */}</div>;
};
  1. Add some transitions (see the main CrossAni readme for a better explanation of the transition format):
export default () => {
  const [triggerAni, setTriggerAni] = createSignal("");

  return (
    <div
      use:crossani={triggerAni}
      prop:transitions={{
        default: {
          state: {},
          reset: true,
          cutOff: true,
          ms: 500,
          easing: EASE.inOut,
        },
        alternate: {
          state: { "margin-top": "2rem" },
          ms: 250,
          easing: EASE.out,
        },
      }}
    >
      {/* ... */}
    </div>
  );
};
  1. Run your transitions!!!
export default () => {
  const [triggerAni, setTriggerAni] = createSignal("");

  onMount(() => setTriggerAni("alternate"));

  return (
    <div use:crossani={triggerAni} prop:transitions={/* ... */}>
      {/* ... */}
    </div>
  )
}
  1. OPTIONAL!! Get the current transition state as a signal
export default () => {
  const [triggerAni, setTriggerAni] = createSignal("");
  const [aniState, setAniState] = createSignal();

  return (
    <div use:crossani={[triggerAni, setAniState]} prop:transitions={/* ... */}>
      Current state: {aniState() ?? <em>not animating</em>}

      {/* ... */}
    </div>
  )
}

Readme

Keywords

none

Package Sidebar

Install

npm i solid-crossani

Weekly Downloads

0

Version

1.1.0

License

MIT

Unpacked Size

7.8 kB

Total Files

8

Last publish

Collaborators

  • lexisother
  • yellowsink