### Installing - Solid MotionOne - Bash

Source: https://github.com/solidjs-community/solid-motionone/blob/main/README.md

These commands demonstrate how to install the solid-motionone library using various package managers like npm, pnpm, or yarn. The library is required to use the Motion and Presence components for animations in SolidJS projects.

```bash
npm install solid-motionone
```

```bash
pnpm add solid-motionone
```

```bash
yarn add solid-motionone
```

--------------------------------

### Applying Transitions - Solid MotionOne - TSX

Source: https://github.com/solidjs-community/solid-motionone/blob/main/README.md

These examples illustrate how to control the animation timing and easing using the 'transition' prop. Transitions can be applied globally to all animated properties or overridden on a per-property basis for fine-grained control.

```tsx
<Motion
  animate={{rotate: 90, backgroundColor: "yellow"}}
  transition={{duration: 1, easing: "ease-in-out"}}
/>
```

```tsx
<Motion
  animate={{rotate: 90, backgroundColor: "yellow"}}
  transition={{
    duration: 1,
    rotate: {duration: 2},
  }}
/>
```

--------------------------------

### Using Basic Component - Solid MotionOne - TSX

Source: https://github.com/solidjs-community/solid-motionone/blob/main/README.md

This snippet shows the fundamental way to import and use the Motion component in a SolidJS component. It can render any HTML or SVG element, defaulting to a 'div', and can be specified using dot notation (Motion.div) or the 'tag' prop.

```tsx
import {Motion} from "solid-motionone"

function MyComponent() {
  return <Motion>Hello world</Motion>
}
```

```tsx
import {Motion} from "solid-motionone"

function App() {
  return (
    <Motion.div
      animate={{opacity: [0, 1]}}
      transition={{duration: 1, easing: "ease-in-out"}}
    />
  )
}
```

--------------------------------

### Implementing Exit Animations - Solid MotionOne - TSX

Source: https://github.com/solidjs-community/solid-motionone/blob/main/README.md

This section illustrates how to animate elements when they are removed from the DOM using the 'Presence' component and the 'exit' prop in conjunction with Solid's <Show> component. The 'exit' prop can also accept its own transition overrides.

```tsx
import {createSignal, Show} from "solid-js"
import {Motion, Presence} from "solid-motionone"

function App() {
  const [isShown, setShow] = createSignal(true)

  return (
    <div>
      <Presence exitBeforeEnter>
        <Show when={isShown()}>
          <Motion
            initial={{opacity: 0, scale: 0.6}}
            animate={{opacity: 1, scale: 1}}
            exit={{opacity: 0, scale: 0.6}}
            transition={{duration: 0.3}}
          />
        </Show>
      </Presence>
      <button onClick={() => setShow(p => !p)}>Toggle</button>
    </div>
  )
}
```

```tsx
<Presence>
  <Show when={isShown()}>
    <Motion
      animate={{opacity: 1}}
      exit={{opacity: 0, transition: {duration: 0.8}}}
    />
  </Show>
</Presence>
```

--------------------------------

### Controlling Initial Animation - Solid MotionOne - TSX

Source: https://github.com/solidjs-community/solid-motionone/blob/main/README.md

By default, elements animate on mount. This snippet shows how to disable the initial animation and apply the 'animate' styles immediately upon creation by setting the 'initial' prop to 'false'.

```tsx
<Motion initial={false} animate={{x: 100}} />
```

--------------------------------

### Animating Reactively with Signals - Solid MotionOne - TSX

Source: https://github.com/solidjs-community/solid-motionone/blob/main/README.md

This snippet demonstrates how to leverage SolidJS signals to create reactive animations. By placing a signal's accessor directly within the 'animate' object, the component will automatically animate when the signal's value changes.

```tsx
const [bg, setBg] = createSignal("red")

return (
  <Motion.button
    onClick={() => setBg("blue")}
    animate={{backgroundColor: bg()}}
    transition={{duration: 3}}
  >
    Click Me
  </Motion.button>
)
```

--------------------------------

### Defining Keyframe Animations - Solid MotionOne - TSX

Source: https://github.com/solidjs-community/solid-motionone/blob/main/README.md

These snippets show how to define keyframe animations by providing an array of values to the 'animate' prop. The timing of these keyframes can be automatically spaced or explicitly controlled using the 'offset' property within the transition options.

```tsx
<Motion animate={{x: [0, 100, 50]}} />
```

```tsx
<Motion animate={{x: [0, 100, 50]}} transition={{x: {offset: [0, 0.25, 1]}}} />
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.