Custom Keyframes

Beyond the script keyframes built in by default, Vreo supports custom script keyframes. You can set the keyframe type to VreoKeyframeEnum.Custom, and then parse your own custom script behavior by listening to the script event via vreoplayer.on(VreoKeyframeEnum.Custom, callback).

Integrating via Configuration Parameters

You can implement a React component, for example:

export function YourCustomKeyframe(props: CustomVreoKeyframeProps) {
  React.useEffect(() => {
    props.subscribe.on(VreoKeyframeEnum.Custom, callback);

    return () => {
      props.subscribe.off(VreoKeyframeEnum.Custom, callback);
    };
  }, []);

  return <>...</>;
}

Then add it through the new Player(five, {customKeyframes: [YourCustomKeyframe]}) configuration parameter.

Integrating with React Hooks

export function YourCustomKeyframe() {
  // Pretty simple, right?
  useVreoEventCallback(VreoKeyframeEnum.Custom, callback);

  return <>...</>;
}