Function animate

animate(
    els: OneOrMany<HTMLElement>,
    keyframes: PropertyIndexedKeyframes | Keyframe[],
    options?: number | AnimateOptions,
): Animation[]
Animate one or more elements using the Web Animations API. Automatically respects prefers-reduced-motion.
Parameters
- els: OneOrMany<HTMLElement>
- keyframes: PropertyIndexedKeyframes | Keyframe[]
- Optionaloptions: number | AnimateOptions
Returns Animation[]
Example
```
animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 });
    animate([el1, el2], [{ opacity: 0 }, { opacity: 1 }], 300);
```
- Defined in packages/dom/src/animate.ts:16

Index

Methods

fadeIn fadeOut slideTo

Methods

fadeIn

fadeIn(els: OneOrMany<HTMLElement>, duration?: number): Animation[]
Fade in one or more elements from opacity 0 to 1.
Parameters
- els: OneOrMany<HTMLElement>
- duration: number = 300
Returns Animation[]
Example
```
animate.fadeIn(el);
    animate.fadeIn([el1, el2], 500);
```
- Defined in packages/dom/src/animate.ts:48

fadeOut

fadeOut(els: OneOrMany<HTMLElement>, duration?: number): Animation[]
Fade out one or more elements from opacity 1 to 0.
Parameters
- els: OneOrMany<HTMLElement>
- duration: number = 300
Returns Animation[]
Example
```
animate.fadeOut(el);
    animate.fadeOut([el1, el2], 500);
```
- Defined in packages/dom/src/animate.ts:64

slideTo

slideTo(
    els: OneOrMany<HTMLElement>,
    to: { x?: number; y?: number },
    duration?: number,
): Animation[]
Slide one or more elements to a position via CSS transform.
Parameters
- els: OneOrMany<HTMLElement>
- to: { x?: number; y?: number }
- duration: number = 300
Returns Animation[]
Example
```
animate.slideTo(el, { x: 10, y: -20 }, 300);
```
- Defined in packages/dom/src/animate.ts:79