@studiometa/ui

Appearance

JS API ​

Refs ​

target ​

HTMLElement reference for the element to animate. If not provided, the component's root element will be used.

Options ​

playRange ​

  • Type: [number, number]
  • Default: [0, 1]

Define the scroll progress range when the animation should play. Values between 0 and 1, where 0 is when the element enters the viewport and 1 is when it exits.

from ​

  • Type: object
  • Default: {}

Initial keyframe for the animation. Define CSS properties as key-value pairs.

html
data-option-from='{"opacity": 0, "translateY": "100px"}'

to ​

  • Type: object
  • Default: {}

Final keyframe for the animation. Define CSS properties as key-value pairs.

html
data-option-to='{"opacity": 1, "translateY": "0px"}'

keyframes ​

  • Type: array
  • Default: []

Array of keyframes for complex animations. When provided, from and to are ignored.

html
data-option-keyframes='[
  {"opacity": 0, "scale": 0.8},
  {"opacity": 0.5, "scale": 1.1},
  {"opacity": 1, "scale": 1}
]'

easing ​

  • Type: [number, number, number, number]
  • Default: [0, 0, 1, 1]

Cubic-bezier easing values for the animation timing.

Methods ​

render(progress) ​

  • Parameters: progress (number) - Animation progress between 0 and 1
  • Returns: void

Manually render the animation at a specific progress value.

scrolledInView(props) ​

  • Parameters: props (ScrollInViewProps) - Scroll information from the intersection observer
  • Returns: void

Internal method called when the element scrolls in view. Calculates progress and calls render.

Properties ​

target ​

  • Type: HTMLElement

The element being animated (either the target ref or the component's root element).

animation ​

  • Type: Animation

The animation instance created from the keyframes and easing options.