@motionone/types - npm Package Compare versions

Comparing version 10.16.3 to 10.17.0

dist/index.cjs.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var MotionValue = require('./MotionValue.cjs.js');
@@ -6,0 +4,0 @@

dist/MotionValue.cjs.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
@@ -6,0 +4,0 @@ * The MotionValue tracks the state of a single animatable

package.json

 {
   "name": "@motionone/types",
-  "version": "10.16.3",
+  "version": "10.17.0",
   "description": "Shared types for the Motion One packages.",
@@ -15,3 +15,3 @@ "license": "MIT",
   },
-  "gitHead": "f4721014f749ce528145c09386af8584eced4e2a"
+  "gitHead": "2775786f4f0ba21cbf222d72a68263c7627c4825"
 }

types/index.d.ts

@@ -9,11 +9,32 @@ import { MotionValue } from "./MotionValue";
 }
-export declare type ProgressFunction = (t: number) => void;
-export declare type AnimationGeneratorFactory<Options> = (options: Options) => AnimationGenerator;
-export declare type AnimationGenerator = (t: number) => AnimationGeneratorState;
-export declare type BezierDefinition = readonly [number, number, number, number];
-export declare type PlayState = "idle" | "running" | "paused" | "finished";
+export type ProgressFunction = (t: number) => void;
+export type AnimationGeneratorFactory<Options> = (options: Options) => AnimationGenerator;
+export type AnimationGenerator = (t: number) => AnimationGeneratorState;
+export type BezierDefinition = readonly [number, number, number, number];
+export type PlayState = "idle" | "running" | "paused" | "finished";
 export interface BasicAnimationControls {
+    /**
+     * Play the animation.
+     *
+     * ```javascript
+     * animation.play()
+     * ```
+     */
     play: VoidFunction;
+    /**
+     * Pause the animation.
+     *
+     * ```javascript
+     * animation.pause()
+     * ```
+     */
     pause: VoidFunction;
     commitStyles: VoidFunction;
+    /**
+     * Cancels the animation and reverts the element to its underlying styles.
+     *
+     * ```javascript
+     * animation.cancel()
+     * ```
+     */
     cancel: VoidFunction;
@@ -23,15 +44,87 @@ stop?: VoidFunction;
     finished: Promise<any>;
+    /**
+     * @internal
+     */
     startTime: number | null;
+    /**
+     * Get/set the current play time of the animation in seconds. This can be used to scrub through the animation.
+     *
+     * ```javascript
+     * const currentTime = animation.currentTime
+     * animation.currentTime = 1
+     * ```
+     */
     currentTime: number | null;
 }
+/**
+ * Animation controls returned from `animate` and `timeline` functions.
+ *
+ * ```javascript
+ * const animation = animate(element, { opacity: 0 })
+ * animation.pause()
+ * ```
+ */
 export interface AnimationControls extends BasicAnimationControls {
+    /**
+     * Stop the animation and set the current value to the element style.
+     *
+     * ```javascript
+     * animation.stop()
+     * ```
+     */
     stop: VoidFunction;
+    /**
+     * Immediately completes the animation and commits the final keyframe to the element's styles.
+     *
+     * ```javascript
+     * animation.finish()
+     * ```
+     */
     finish: VoidFunction;
+    /**
+     * Reverses the playback of the animation.
+     *
+     * ```javascript
+     * animation.reverse()
+     * ```
+     *
+     * @remarks Currently non-functional.
+     *
+     * @alpha
+     */
     reverse: VoidFunction;
+    /**
+     * A `Promise` that resolves when the animation has finished.
+     *
+     * ```javascript
+     * await animation.finished
+     * ```
+     */
     finished: Promise<any>;
+    /**
+     * Get the current play time of the animation in seconds. This can be especially useful
+     * when an animation has used the default duration, or when a timeline has dynamically
+     * generated a duration from the provided sequence.
+     *
+     * This prop is currently **read-only**.
+     */
     duration: number;
+    /**
+     * Get/set the current playback rate of the animation.
+     *
+     * - `1` is normal time.
+     * - `2` doubles the playback rate.
+     * - `-1` reverses playback.
+     *
+     * ```javascript
+     * animation.playbackRate = animation.playbackRate * 2
+     * ```
+     */
     playbackRate: number;
+    /**
+     * Returns the current state of the animation. Can be `idle`, `running`, `paused` or `finished`.
+     */
     playState: AnimationPlayState;
 }
-export declare type CustomAnimationSettings = {
+export type CustomAnimationSettings = {
     easing: Easing;
@@ -41,25 +134,86 @@ keyframes?: Array<number | string>;
 };
-export declare type ValueKeyframe = string | number;
-export declare type UnresolvedValueKeyframe = ValueKeyframe | null;
-export declare type Easing = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "steps-start" | "steps-end" | `steps(${number}, ${"start" | "end"})` | BezierDefinition;
-export declare type EasingGenerator = {
+export type ValueKeyframe = string | number;
+export type UnresolvedValueKeyframe = ValueKeyframe | null;
+export type Easing = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "steps-start" | "steps-end" | `steps(${number}, ${"start" | "end"})` | BezierDefinition;
+export type EasingGenerator = {
     createAnimation: (keyframes: UnresolvedValueKeyframe[], shouldGenerate?: boolean, readInitialKeyframe?: () => number | string, name?: string, value?: MotionValue) => CustomAnimationSettings;
 };
-export declare type KeyframeOptions = {
+export type KeyframeOptions = {
+    /**
+     * A duration, in seconds, that the animation will take to complete.
+     *
+     * @defaultValue `0.3`
+     */
     duration?: number;
+    /**
+     * An easing to use for the whole animation, or list of easings to use between individual keyframes.
+     *
+     * Accepted `easing` options are:
+     *
+     * - **Basic easings:** `"linear"`, `"ease"`, `"ease-in"`, `"ease-out"`, `"ease-in-out"`
+     * - **[Cubic bezier curve](https://cubic-bezier.com/):** e.g. `[.17,.67,.83,.67]`
+     * - **Stepped easing:** e.g. `"steps(2, start)"`
+     * - **Custom easing:** A JavaScript easing function, for example [this bounce easing function](https://easings.net/#easeOutBounce).
+     *
+     * @defaultValue `"ease"`
+     */
     easing?: EasingGenerator | Easing | Easing[] | EasingFunction;
+    /**
+     * The offset of each keyframe, as a number between 0 and 1.
+     *
+     * The number of `offset` entries must match the number of `keyframes` entries.
+     *
+     * @defaultValue `[0, 1]`
+     */
     offset?: number[];
 };
-export declare type OptionResolver<T> = (i: number, total: number) => T;
-export declare type PlaybackOptions = {
+export type OptionResolver<T> = (i: number, total: number) => T;
+export type PlaybackOptions = {
+    /**
+     * A duration, in seconds, that the animation will be delayed before starting.
+     *
+     * @defaultValue `0`
+     */
     delay?: number | OptionResolver<number>;
+    /**
+     * A duration, in seconds, that the animation will wait at the end before ending.
+     *
+     * @defaultValue `0`
+     */
     endDelay?: number;
+    /**
+     * A duration, in seconds, that the animation will take to complete.
+     *
+     * @defaultValue `0.3`
+     */
     repeat?: number;
+    /**
+     * The direction of animation playback. `"normal"`, `"reverse"`, `"alternate"`, or `"alternate-reverse"`.
+     *
+     * @defaultValue `"normal"`
+     */
     direction?: PlaybackDirection;
+    /**
+     * @internal
+     */
     persist?: boolean;
+    /**
+     * Whether the animation should start automatically.
+     *
+     * @defaultValue `true`
+     */
+    autoplay?: boolean;
 };
-export declare type DevToolsOptions = {
+export type DevToolsOptions = {
     record?: boolean;
 };
-export declare type AnimationOptions = KeyframeOptions & PlaybackOptions & DevToolsOptions & {
+export type AnimationOptions = KeyframeOptions & PlaybackOptions & DevToolsOptions & {
+    /**
+     * Because of numerous timing bugs in Webkit's accelerated animations, these are disabled by default in Webkit-powered browsers.
+     *
+     * However, if the your animation is being disrupted by heavy processing, you can allow acceleration with this setting.
+     * It's advised you test these animations thoroughly in both Safari and iOS Chrome.
+     *
+     * @defaultValue `false`
+     */
     allowWebkitAcceleration?: boolean;
@@ -71,3 +225,3 @@ };
 }
-export declare type EasingFunction = (t: number) => number;
+export type EasingFunction = (t: number) => number;
 //# sourceMappingURL=index.d.ts.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15448

increased by40.37%

Lines of code

290

increased by110.14%

No dependency changes