UNPKG

framer-motion

Version:

A simple and powerful JavaScript animation library

github.com/motiondivision/motion

motiondivision/motion

1 lines • 8.67 kB
1
{"version":3,"file":"index.mjs","sources":["../../../../src/animation/animate/index.ts"],"sourcesContent":["import type {\n AnimationScope,\n DOMKeyframesDefinition,\n AnimationOptions as DynamicAnimationOptions,\n ElementOrSelector,\n MotionValue,\n UnresolvedValueKeyframe,\n ValueAnimationTransition,\n} from \"motion-dom\"\nimport { activeScope, addEffect, removeEffect } from \"motion-dom\"\nimport {\n AnimationSequence,\n ObjectTarget,\n Segment,\n SequenceOptions,\n} from \"../sequence/types\"\nimport { Timeline, TimelineOptions } from \"../timeline\"\nimport { animateSubject } from \"./subject\"\n\nfunction isSequence(value: unknown): value is AnimationSequence {\n return Array.isArray(value) && value.some(Array.isArray)\n}\n\ninterface ScopedAnimateOptions {\n scope?: AnimationScope\n reduceMotion?: boolean\n skipAnimations?: boolean\n}\n\n/**\n * Creates an animation function that is optionally scoped\n * to a specific element.\n */\nexport function createScopedAnimate(options: ScopedAnimateOptions = {}) {\n const { scope, reduceMotion, skipAnimations } = options\n /**\n * Animate a sequence\n */\n function scopedAnimate(\n sequence: AnimationSequence,\n options?: Omit<TimelineOptions, \"scope\">\n ): Timeline\n /**\n * Animate a string\n */\n function scopedAnimate(\n value: string | MotionValue<string>,\n keyframes: string | UnresolvedValueKeyframe<string>[],\n options?: ValueAnimationTransition<string>\n ): Timeline\n /**\n * Animate a number\n */\n function scopedAnimate(\n value: number | MotionValue<number>,\n keyframes: number | UnresolvedValueKeyframe<number>[],\n options?: ValueAnimationTransition<number>\n ): Timeline\n /**\n * Animate a generic motion value\n */\n function scopedAnimate<V extends string | number>(\n value: V | MotionValue<V>,\n keyframes: V | UnresolvedValueKeyframe<V>[],\n options?: ValueAnimationTransition<V>\n ): Timeline\n /**\n * Animate an Element\n */\n function scopedAnimate(\n element: ElementOrSelector,\n keyframes: DOMKeyframesDefinition,\n options?: DynamicAnimationOptions\n ): Timeline\n /**\n * Animate an object\n */\n function scopedAnimate<O extends {}>(\n object: O | O[],\n keyframes: ObjectTarget<O>,\n options?: DynamicAnimationOptions\n ): Timeline\n /**\n * Implementation\n */\n function scopedAnimate<O extends {}>(\n subjectOrSequence:\n | AnimationSequence\n | MotionValue<number>\n | MotionValue<string>\n | number\n | string\n | ElementOrSelector\n | O\n | O[],\n optionsOrKeyframes?:\n | Omit<TimelineOptions, \"scope\">\n | number\n | string\n | UnresolvedValueKeyframe<number>[]\n | UnresolvedValueKeyframe<string>[]\n | DOMKeyframesDefinition\n | ObjectTarget<O>,\n options?:\n | ValueAnimationTransition<number>\n | ValueAnimationTransition<string>\n | DynamicAnimationOptions\n ): Timeline {\n const motionScope = activeScope.current\n const scopeTransition = motionScope?.transition\n\n const inherited: { reduceMotion?: boolean; skipAnimations?: boolean } =\n {}\n if (reduceMotion !== undefined) inherited.reduceMotion = reduceMotion\n if (skipAnimations !== undefined)\n inherited.skipAnimations = skipAnimations\n\n let timeline: Timeline\n\n if (isSequence(subjectOrSequence)) {\n const sequenceOptions = {\n ...inherited,\n ...(optionsOrKeyframes as SequenceOptions),\n scope,\n }\n if (scopeTransition) {\n sequenceOptions.defaultTransition = {\n ...scopeTransition,\n ...sequenceOptions.defaultTransition,\n } as SequenceOptions[\"defaultTransition\"]\n }\n timeline = new Timeline(subjectOrSequence, sequenceOptions)\n } else {\n // Extract top-level onComplete so it doesn't get applied per-value\n const { onComplete, ...rest } = options || {}\n const transition = {\n ...inherited,\n ...scopeTransition,\n ...rest,\n } as DynamicAnimationOptions\n\n /**\n * Play the animations directly, and only compile them as a\n * sequence if the timeline is changed. Values animated from a\n * number are animated via their onUpdate callback instead.\n */\n const { onUpdate } = rest as ValueAnimationTransition\n const segment = (\n typeof subjectOrSequence === \"number\" ||\n (typeof subjectOrSequence === \"string\" &&\n (typeof optionsOrKeyframes === \"string\" ||\n Array.isArray(optionsOrKeyframes)))\n ? [\n onUpdate || (() => {}),\n Array.isArray(optionsOrKeyframes)\n ? optionsOrKeyframes\n : [subjectOrSequence, optionsOrKeyframes],\n { ...transition, onUpdate: undefined },\n ]\n : [subjectOrSequence, optionsOrKeyframes, transition]\n ) as Segment\n\n timeline = new Timeline(\n [segment],\n { ...inherited, onComplete, scope } as SequenceOptions,\n animateSubject(\n subjectOrSequence as ElementOrSelector,\n optionsOrKeyframes as DOMKeyframesDefinition,\n transition,\n scope\n )\n )\n }\n\n if (motionScope) {\n timeline.finished.then(motionScope.add(() => timeline.stop()))\n }\n\n return timeline\n }\n\n return scopedAnimate\n}\n\nexport const animate = /* @__PURE__ */ Object.assign(\n /* @__PURE__ */ createScopedAnimate(),\n {\n /**\n * Register an effect so `animate()` can animate the subjects it\n * claims, for instance `animate.addEffect(threeEffect)`. The most\n * recently added effect is tested first. DOM elements are always\n * animated directly.\n */\n addEffect,\n removeEffect,\n }\n)\n"],"names":[],"mappings":";;;;AAmBA,SAAS,UAAU,CAAC,KAAc,EAAA;AAC9B,IAAA,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;AAC5D;AAQA;;;AAGG;AACG,SAAU,mBAAmB,CAAC,OAAA,GAAgC,EAAE,EAAA;IAClE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,OAAO;AAgDvD;;AAEG;AACH,IAAA,SAAS,aAAa,CAClB,iBAQS,EACT,kBAOqB,EACrB,OAG6B,EAAA;AAE7B,QAAA,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO;AACvC,QAAA,MAAM,eAAe,GAAG,WAAW,EAAE,UAAU;QAE/C,MAAM,SAAS,GACX,EAAE;QACN,IAAI,YAAY,KAAK,SAAS;AAAE,YAAA,SAAS,CAAC,YAAY,GAAG,YAAY;QACrE,IAAI,cAAc,KAAK,SAAS;AAC5B,YAAA,SAAS,CAAC,cAAc,GAAG,cAAc;AAE7C,QAAA,IAAI,QAAkB;AAEtB,QAAA,IAAI,UAAU,CAAC,iBAAiB,CAAC,EAAE;AAC/B,YAAA,MAAM,eAAe,GAAG;AACpB,gBAAA,GAAG,SAAS;AACZ,gBAAA,GAAI,kBAAsC;gBAC1C,KAAK;aACR;YACD,IAAI,eAAe,EAAE;gBACjB,eAAe,CAAC,iBAAiB,GAAG;AAChC,oBAAA,GAAG,eAAe;oBAClB,GAAG,eAAe,CAAC,iBAAiB;iBACC;YAC7C;YACA,QAAQ,GAAG,IAAI,QAAQ,CAAC,iBAAiB,EAAE,eAAe,CAAC;QAC/D;aAAO;;YAEH,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO,IAAI,EAAE;AAC7C,YAAA,MAAM,UAAU,GAAG;AACf,gBAAA,GAAG,SAAS;AACZ,gBAAA,GAAG,eAAe;AAClB,gBAAA,GAAG,IAAI;aACiB;AAE5B;;;;AAIG;AACH,YAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAgC;AACrD,YAAA,MAAM,OAAO,IACT,OAAO,iBAAiB,KAAK,QAAQ;iBACpC,OAAO,iBAAiB,KAAK,QAAQ;qBACjC,OAAO,kBAAkB,KAAK,QAAQ;AACnC,wBAAA,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;AACtC,kBAAE;AACI,oBAAA,QAAQ,KAAK,MAAK,EAAE,CAAC,CAAC;AACtB,oBAAA,KAAK,CAAC,OAAO,CAAC,kBAAkB;AAC5B,0BAAE;AACF,0BAAE,CAAC,iBAAiB,EAAE,kBAAkB,CAAC;AAC7C,oBAAA,EAAE,GAAG,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE;AACzC;kBACD,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,UAAU,CAAC,CACjD;AAEZ,YAAA,QAAQ,GAAG,IAAI,QAAQ,CACnB,CAAC,OAAO,CAAC,EACT,EAAE,GAAG,SAAS,EAAE,UAAU,EAAE,KAAK,EAAqB,EACtD,cAAc,CACV,iBAAsC,EACtC,kBAA4C,EAC5C,UAAU,EACV,KAAK,CACR,CACJ;QACL;QAEA,IAAI,WAAW,EAAE;AACb,YAAA,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;QAClE;AAEA,QAAA,OAAO,QAAQ;IACnB;AAEA,IAAA,OAAO,aAAa;AACxB;MAEa,OAAO,mBAAmB,MAAM,CAAC,MAAM;AAChD,gBAAgB,mBAAmB,EAAE,EACrC;AACI;;;;;AAKG;IACH,SAAS;IACT,YAAY;AACf,CAAA;;;;"}