Skip to main content
Glama

Motion.dev MCP Server

motion-docs.db1.33 MB
SQLite format 3@ �E�W��.�*�� ��d�����8� ��6��;;�Otablemotion_examples_fts_idxmotion_examples_fts_idxCREATE TABLE 'motion_examples_fts_idx'(segid, term, pgno, PRIMARY KEY(segid, term)) WITHOUT ROWID�==�#tablemotion_examples_fts_datamotion_examples_fts_dataCREATE TABLE 'motion_examples_fts_data'(id INTEGER PRIMARY KEY, block BLOB)�\33�atablemotion_examples_ftsmotion_examples_ftsCREATE VIRTUAL TABLE motion_examples_fts USING fts5( title, description, code, tags, content='motion_examples', content_rowid='id' )~99�tablemotion_docs_fts_configmotion_docs_fts_configCREATE TABLE 'motion_docs_fts_config'(k PRIMARY KEY, v) WITHOUT ROWID�;;�tablemotion_docs_fts_docsizemotion_docs_fts_docsizeCREATE TABLE 'motion_docs_fts_docsize'(id INTEGER PRIMARY KEY, sz BLOB)�33�Gtablemotion_docs_fts_idxmotion_docs_fts_idxCREATE TABLE 'motion_docs_fts_idx'(segid, term, pgno, PRIMARY KEY(segid, term)) WITHOUT ROWID|55�tablemotion_docs_fts_datamotion_docs_fts_dataCREATE TABLE 'motion_docs_fts_data'(id INTEGER PRIMARY KEY, block BLOB)�O ++�Wtablemotion_docs_ftsmotion_docs_ftsCREATE VIRTUAL TABLE motion_docs_fts USING fts5( title, description, content, tags, content='motion_docs', content_rowid='id' )~ E+�indexidx_motion_examples_categorymotion_examples CREATE INDEX idx_motion_examples_category ON motion_examples(category)� G+�indexidx_motion_examples_frameworkmotion_examples CREATE INDEX idx_motion_examples_framework ON motion_examples(framework)z A/�indexidx_motion_components_namemotion_components CREATE INDEX idx_motion_components_name ON motion_components(name)� K/�%indexidx_motion_components_frameworkmotion_components CREATE INDEX idx_motion_components_framework ON motion_components(framework)^3#uindexidx_motion_docs_urlmotion_docs CREATE INDEX idx_motion_docs_url ON motion_docs(url)n=#� indexidx_motion_docs_categorymotion_docsCREATE INDEX idx_motion_docs_category ON motion_docs(category)q?#� indexidx_motion_docs_frameworkmotion_docsCREATE INDEX idx_motion_docs_framework ON motion_docs(framework)�++�Ctablemotion_examplesmotion_examplesCREATE TABLE motion_examples ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, description TEXT, framework TEXT NOT NULL CHECK(framework IN ('react', 'js', 'vue')), category TEXT, code TEXT NOT NULL, tags TEXT, -- JSON array of tags difficulty TEXT CHECK(difficulty IN ('beginner', 'intermediate', 'advanced')), related_docs_id INTEGER, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (related_docs_id) REFERENCES motion_docs(id) )� //�Itablemotion_componentsmotion_componentsCREATE TABLE motion_components ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, framework TEXT NOT NULL CHECK(framework IN ('react', 'js', 'vue')), type TEXT CHECK(type IN ('component', 'function', 'hook', 'utility')), description TEXT, props TEXT, -- JSON object of props/parameters methods TEXT, -- JSON array of methods examples TEXT, -- JSON array of examples related_docs_id INTEGER, FOREIGN KEY (related_docs_id) REFERENCES motion_docs(id) )P++Ytablesqlite_sequencesqlite_sequenceCREATE TABLE sqlite_sequence(name,seq)�##�Otablemotion_docsmotion_docsCREATE TABLE motion_docs ( id INTEGER PRIMARY KEY AUTOINCREMENT, url TEXT UNIQUE NOT NULL, title TEXT NOT NULL, framework TEXT NOT NULL CHECK(framework IN ('react', 'js', 'vue')), category TEXT, description TEXT, content TEXT NOT NULL, examples TEXT, -- JSON array of code examples api_reference TEXT, -- JSON object of API information is_deprecated INTEGER DEFAULT 0, is_react INTEGER DEFAULT 0, is_js INTEGER DEFAULT 0, is_vue INTEGER DEFAULT 0, tags TEXT, -- JSON array of tags last_updated DATETIME DEFAULT CURRENT_TIMESTAMP, created_at DATETIME DEFAULT CURRENT_TIMESTAMP )5I#indexsqlite_autoindex_motion_docs_1motion_�\�������������������)>GO+�A��] �M33https://motion.dev/docs/reactGet started with Motion for Reactreactgetting-startedLearn Motion for React animation library: Install, animate HTML and SVG elements with spring animations, staggering effects. Complete guide with examples.**Motion for React** is a React animation library for building smooth, production-grade UI animations. You can start with simple prop-based animations before growing to layout, gesture and scroll animations. Motion's unique **hybrid engine** combines the performance of native browser animations with the flexibility of JavaScript. It's also trusted by companies like [Framer](https://framer.com) and [Figma](https://figma.com) to power their amazing no-code animations and gestures. In this guide, we'll learn how to install Motion and take a whirlwind tour of its main features. Install ------- Motion is available via npm: ``` npm install motion ``` Features can now be imported via `"motion/react"`: ``` import { motion } from "motion/react" ``` **Note:** Motion for React includes React-specific APIs. All [vanilla Motion features](./quick-start) are also available. Your first animation -------------------- [The](./react-motion-component) `[<motion />](./react-motion-component)` [component](./react-motion-component) is the core API in Motion for React. It's a normal DOM element, supercharged with animation capabilities. ``` <motion.ul animate\={{ rotate: 360 }} /> ``` When values in `animate` change, the component will animate. Motion has intuitive defaults, but animations can of course be configured via [the](./react-transitions) `[transition](./react-transitions)` [prop](./react-transitions). ``` <motion.div animate\={{ scale: 2, transition: { duration: 2 } }} /> ``` Enter animation --------------- When a component enters the page, it will automatically animate to the values defined in the `animate` prop. You can provide values to animate from via the `initial` prop (otherwise these will be read from the DOM). ``` <motion.button initial\={{ scale: 0 }} animate\={{ scale: 1 }} /> ``` Or disable this initial animation entirely by setting `initial` to `false`. ``` <motion.button initial\={false} animate\={{ scale: 1 }} /> ``` Hover & tap animation --------------------- `<motion />` extends React's event system with powerful [gesture animations](./react-gestures). It currently supports hover, tap, focus, and drag. ``` <motion.button whileHover\={{ scale: 1.1 }} whileTap\={{ scale: 0.95 }} onHoverStart\={() \=> console.log('hover started!')} /> ``` Motion's gestures are designed to feel better than using CSS or JavaScript events alone. Scroll animation ---------------- Motion supports both types of [scroll animations](./react-scroll-animations): **Scroll-triggered** and **scroll-linked**. To trigger an animation on scroll, the `whileInView` prop defines a state to animate to/from when an element enters/leaves the viewport: ``` <motion.div initial\={{ backgroundColor: "rgb(0, 255, 0)", opacity: 0 }} whileInView\={{ backgroundColor: "rgb(255, 0, 0)", opacity: 1 }} /> ``` Whereas to link a value directly to scroll position, it's possible to use `MotionValue`s via `useScroll`. ``` const { scrollYProgress } = useScroll() return <motion.div style\={{ scaleX: scrollYProgress }} /> ``` Layout animation ---------------- Motion has an industry-leading [layout animation](./react-layout-animations) engine that supports animating between changes in layout using transforms. It's as easy as applyOUTTtSqQ�O�N�MeL�KSJ5IrG�E�C3BdA0@>  �F /  � � � ���j��� � X UfC /� � � x(Uhttps://motion.dev/docs/motion-valueW,]https://motion.dev/docs/easing-functionsV%Ohttps://motion.dev/docs/transformU"Ihttps://motion.dev/docs/resizeT+[https://motion.dev/docs/vue-transitionsS!Ghttps://motion.dev/docs/pressR"Ihttps://motion.dev/docs/inviewQ!Ghttps://motion.dev/docs/hoverP#Khttps://motion.dev/docs/staggerO(Uhttps://motion.dev/docs/animate-viewN-_https://motion.dev/docs/react-transitionsM/chttps://motion.dev/docs/react-svg-animationL1ghttps://motion.dev/docs/vue-scroll-animationsK1ghttps://motion.dev/docs/vue-layout-animationsJ(Uhttps://motion.dev/docs/vue-gesturesI"Ihttps://motion.dev/docs/springH"Ihttps://motion.dev/docs/scrollG3khttps://motion.dev/docs/react-scroll-animationsF3khttps://motion.dev/docs/react-layout-animationsE*Yhttps://motion.dev/docs/react-gesturesD)Whttps://motion.dev/docs/vue-animationC#Khttps://motion.dev/docs/animateB+[https://motion.dev/docs/react-animationAChttps://motion.dev/docs/vue@'Shttps://motion.dev/docs/quick-start?!Ghttps://motion.dev/docs/react> �����+motion_examples #motion_docsWmotion_com/motion_components� �2��]# � � � p 7 � � { � � d -���M��Yl5���W��m6���X��7��S�6�V CanimatejsfunctionMotion.dev animate function4�U AMotionjsfunctionMotion.dev Motion function6�T CanimatejsfunctionMotion.dev animate function4�S AMotionjsfunctionMotion.dev Motion function4�R AMotionjsfunctionMotion.dev Motion function4�Q AMotionjsfunctionMotion.dev Motion function7�P CstaggervuefunctionMotion.dev stagger function5�O AspringvuefunctionMotion.dev spring function=�N !ITransitionvuefunctionMotion.dev Transition function5�M AMotionvuefunctionMotion.dev Motion function4�L AMotionjsfunctionMotion.dev Motion function4�K AMotionjsfunctionMotion.dev Motion function4�J AMotionjsfunctionMotion.dev Motion function6�I CstaggerjsfunctionMotion.dev stagger function4�H AMotionjsfunctionMotion.dev Motion function4�G AMotionjsfunctionMotion.dev Motion function +B�_ YuseScrollreacthookReact hook for scroll-based animations=�^ OhoverreactfunctionHover gesture animation functionsL�] ianimatereactfunctionCore animation function for element animations>�\ OscrollreactfunctionScroll-linked animation functionsQ�[ 'emotion.buttonreactcomponentAnimated button element with gesture supportS�Z !omotion.divreactcomponentAnimated div element with Motion.dev capabilities?�Y Imotion.ulreactcomponentMotion.dev motion.ul componentJ�X +SAnimatePresencereactcomponentReact component for exit animations:�W EMotionreactcomponentVue Motion component wrapper5�< AscrollvuefunctionMotion.dev scroll function5�; AMotionvuefunctionMotion.dev Motion functionG�: +SAnimatePresencevuefunctionMotion.dev AnimatePresence function7�9 CanimatevuefunctionMotion.dev animate function5�8 AMotionvuefunctionMotion.dev Motion function5�7 AMotionvuefunctionMotion.dev Motion function6�6 CanimatejsfunctionMotion.dev animate function4�5 AspringjsfunctionMotion.dev spring function4�4 AMotionjsfunctionMotion.dev Motion function6�3 CanimatejsfunctionMotion.dev animate function4�2 AscrolljsfunctionMotion.dev scroll function4�1 AMotionjsfunctionMotion.dev Motion function pG�* +SAnimatePresencevuefunctionMotion.dev AnimatePresence function7�) CanimatevuefunctionMotion.dev animate function5�( AMotionvuefunctionMotion.dev Motion function6�' CstaggerjsfunctionMotion.dev stagger function4�& AspringjsfunctionMotion.dev spring function6�% CanimatejsfunctionMotion.dev animate function4�$ AMotionjsfunctionMotion.dev Motion function>�G� +SAnimatePresencevuefunctionMotion.dev AnimatePresence function7� CanimatevuefunctionMotion.dev animate function5� AMotionvuefunctionMotion.dev Motion function6� CstaggerjsfunctionMotion.dev stagger function6� CanimatejsfunctionMotion.dev animate function4� AMotionjsfunctionMotion.dev Motion function����������������������"�B� )+�3Code Example 2vuegetting-startedexport default defineNuxtConfig({ modules: ['motion-v/nuxt'], })["vue"]begia�A )+53Code Example 1vuegetting-startednpm install motion-v["vue"]beginner2025-08-29 11:54:04�R�@ ++�kE3Code Example 10jsgetting-startedimport { animate, stagger } from "motion" animate( "li", { y: 0, opacity: 1 }, { delay: stagger(0.1) } )["js","animation","stagger"]advanced2025-08-29 11:54:04�2�? )+�'C%3Code Example 9jsgetting-startedanimate( element, { rotate: 90 }, { type: "spring", stiffness: 300 } );["js","animation","spring"]intermediate2025-08-29 11:54:04�0�> )+�51%3Code Example 8jsgetting-startedanimate( element, { scale: [0.4, 1] }, { ease: "circInOut", duration: 1.2 } );["js","animation"]intermediate2025-08-29 11:54:04�L�= )+�m1%3Code Example 7jsgetting-startedanimate( cube.rotation, { y: rad(360), z: rad(360) }, { duration: 10, repeat: Infinity, ease: "linear" } )["js","animation"]intermediate2025-08-29 11:54:04�j�< )+�)1%3Code Example 6jsgetting-started// CSS selector animate(".box", { rotate: 360 }) // Elements const boxes = document.querySelectorAll(".box") animate(boxes, { rotate: 360 })["js","animation"]intermediate2025-08-29 11:54:04w�; )+M13Code Example 5jsgetting-startedimport { animate } from "motion"["js","animation"]beginner2025-08-29 11:54:04�j�: )+�C3Code Example 4jsgetting-started<script src="https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js"></script> <script> const { animate, scroll } = Motion </script>["js","animation","scroll"]beginner2025-08-29 11:54:04�U�9 )+�uC3Code Example 3jsgetting-started<script type="module"> import { animate, scroll } from "https://cdn.jsdelivr.net/npm/motion@latest/+esm" </script>["js","animation","scroll"]beginner2025-08-29 11:54:04��8 )+]C3Code Example 2jsgetting-startedimport { animate, scroll } from "motion"["js","animation","scroll"]beginner2025-08-29 11:54:04]�7 )+13Code Example 1jsgetting-startednpm install motion["js"]beginner2025-08-29 11:54:04�H�6 ++�W7%3Code Example 12reactgetting-started<AnimatePresence> {show ? <motion.div key="box" exit={{ opacity: 0 }} /> : null} </AnimatePresence>["react","animation"]intermediate2025-08-29 11:54:04~�5 ++S13Code Example 11reactgetting-started<motion.div layoutId="underline" />["react","layout"]beginner2025-08-29 11:54:04p�4 ++713Code Example 10reactgetting-started<motion.div layout />["react","layout"]beginner2025-08-29 11:54:04�A�3 )+�Q1%3Code Example 9reactgetting-startedconst { scrollYProgress } = useScroll() return <motion.div style={{ scaleX: scrollYProgress }} />["react","scroll"]intermediate2025-08-29 11:54:04�d�2 )+�)%3Code Example 8reactgetting-started<motion.div initial={{ backgroundColor: "rgb(0, 255, 0)", opacity: 0 }} whileInView={{ backgroundColor: "rgb(255, 0, 0)", opacity: 1 }} />["react"]intermediate2025-08-29 11:54:04�a�1 )+�3%3Code Example 7reactgetting-started<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }} onHoverStart={() => console.log('hover started!')} />["react","gesture"]intermediate2025-08-29 11:54:04��0 )+}7%3Code Example 6reactgetting-started<motion.button initial={false} animate={{ scale: 1 }} />["react","animation"]intermediate2025-08-29 11:54:04�!�/ )+� 7%3Code Example 5reactgetting-started<motion.button initial={{ scale: 0 }} animate={{ scale: 1 }} />["react","animation"]intermediate2025-08-29 11:54:04�0�. )+�)7%3Code Example 4reactgetting-started<motion.div animate={{ scale: 2, transition: { duration: 2 } }} />["react","animation"]intermediate2025-08-29 11:54:04��- )+[7%3Code Example 3reactgetting-started<motion.ul animate={{ rotate: 360 }} />["react","animation"]intermediate2025-08-29 11:54:04v�, )+W3Code Example 2reactgetting-startedimport { motion } from "motion/react"["react"]beginner2025-08-29 11:54:04V�w�l��X��C��.��}�>�s �^�I �6?�&�A�{��h+�W"�A /����ohaZSD=6/������v�����KjsWjsVjsUjsTvueSjsRjsQjsPjsOjsN reactM reactLvueKvueJvueIjsHjsG reactF reactE reactDvueCjsB reactAvue@js? react> ����+ ���P�����E��ti:�]�� referenceW referenceV utilitiesU utilitiesT!animationsS gesturesR scrollQ gesturesP!animationsO!animationsN!animationsM!animationsL scrollK layoutJ gesturesI springsH scrollG scrollF layoutE gesturesD!animationsC!animationsB!animationsA+getting-started@+getting-started?+getting-started>  �F /  � � � ���j��� � X UfC /� � � x(Uhttps://motion.dev/docs/motion-valueW,]https://motion.dev/docs/easing-functionsV%Ohttps://motion.dev/docs/transformU"Ihttps://motion.dev/docs/resizeT+[https://motion.dev/docs/vue-transitionsS!Ghttps://motion.dev/docs/pressR"Ihttps://motion.dev/docs/inviewQ!Ghttps://motion.dev/docs/hoverP#Khttps://motion.dev/docs/staggerO(Uhttps://motion.dev/docs/animate-viewN-_https://motion.dev/docs/react-transitionsM/chttps://motion.dev/docs/react-svg-animationL1ghttps://motion.dev/docs/vue-scroll-animationsK1ghttps://motion.dev/docs/vue-layout-animationsJ(Uhttps://motion.dev/docs/vue-gesturesI"Ihttps://motion.dev/docs/springH"Ihttps://motion.dev/docs/scrollG3khttps://motion.dev/docs/react-scroll-animationsF3khttps://motion.dev/docs/react-layout-animationsE*Yhttps://motion.dev/docs/react-gesturesD)Whttps://motion.dev/docs/vue-animationC#Khttps://motion.dev/docs/animateB+[https://motion.dev/docs/react-animationAChttps://motion.dev/docs/vue@'Shttps://motion.dev/docs/quick-start?!Ghttps://motion.dev/docs/react> :2 �����{sk�����2*" � � � � � ����|qf[PE���bYP������ � � � � � � � � � � � � � � � �js�js�js�js�js�js�vue�vue�vue�vue�js�js�js�js�js�js� react� react� react� react� react� react� react� react� react�vue�vue�vue�vue�vue�vue�js�js�js�js�js�js��Bvue�vue�vue�js�js�js�js��!vue�vue�vue�js�js�js�! V2 �~� ���D�mH< J > %   � � � � � ���7yT/ � � � � � � �� �+a �� 1 � | � � � � � � � � � � � � � animate� Motion� animate� Motion� Motion� Motion� stagger� spring�!Transition� Motion� Motion� Motion� Motion� stagger� Motion� Motion��&useScroll� hover� animate� scroll�'motion.button�!motion.div�motion.ul�+AnimatePresence� Motion� scroll� Motion�+AnimatePresence� animate� Motion� Motion� animate� spring� Motion� animate� scroll� Motion�PR+AnimatePresence� animate� Motion� stagger� spring� animate� Motion��.+AnimatePresence� animate� Motion� stagger� animate� Motion�. _7tld\TLD<4, r j b Z R J B : 2 * "    � � � � � � � � � � � � � � � � z r j b Z R J B : 2 * " � � � � } u m e ] U M E = 5 - %  ��������������~vnf^VNF>6.&���������������wog_WOG?7�����������|����wlaVK@5* � � � � � � � � � � � � z    � � � � � � � � � � � � v k ` U J ? 4 )    � � � � � � � � ���������wlaVK@5* ������������zodYNC8-" �#����������    � � � � � � � � � � � � � � � w n e \ S J A 8 / & ��������������|sjaXOF=4+"����� ��������������}tkbYPG>5,#�js jsjsjsjsjsjsjsjsjsjs�js�js�js�js�js�js�js�js�js�js�js�js�js�js�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vuevue~vue}vue|vue{vuezvueyvuexvuewvuevvueuvuetvuesvuervueqvuepvueovuenvuemvuelvuekvuejvueivuehvuegjsfjsejsdjscjsbjsajs`js_js^js]js\js[jsZjsYjsXjsWjsVjsU reactT reactS reactR reactQ reactP reactO reactN reactM reactL reactK reactJ reactI reactH reactG reactF reactE reactD reactC reactB reactA react@ react? react> react= react< react; react: react9 react8 react7 react6 react5 react4 react3 react2vue1vue0vue/vue.vue-vue,vue+vue*vue)vue(vue'vue&vue%vue$vue#vue"vue!vue vuevuevuevuevuevuevuevuevuevuejsjsjsjsjsjsjsjsjs js js js js jsjsjsjsjsjsjsjsjsjs�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js�js� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react� react�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�vue�js�js�js�js�js�js�js�js�js�js� react� react� react� react� react� react� react� react� react� react� react� react��m� � � � � � | l \ L < ,  � � � � � � � � | l \ L < ,  � � � � � � � � | l \ L < ,  � � � � � � � � | l \ L < ,  ��������|l\L<, ��������|l\L<, ���ueUE5%��������zl^PB43% ��������������mXC.������q\G2 � � � � � � u ` K 6 ! (�����������t��ui]QE9-! �����h\PD8, �����������������uh[NA!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations� scroll� scroll� scroll� scroll� scroll� scroll� layout� layout� layout� layout� layout layout~ layout} layout| layout{ layoutz layouty layoutx layoutw layoutv layoutu layoutt layouts gesturesr gesturesq gesturesp gestureso gesturesn gesturesm gesturesl gesturesk gesturesj gesturesi gesturesh gesturesg springsf springse springsd springsc springsb springsa springs` scroll_ scroll^ scroll] scroll\ scroll[ scrollZ scrollY scrollX scrollW scrollV scrollU scrollT scrollS scrollR scrollQ scrollP scrollO scrollN layoutM layoutL layoutK layoutJ layoutI layoutH layoutG layoutF layoutE layoutD layoutC layoutB layoutA layout@ layout? layout> gestures= gestures< gestures; gestures: gestures9 gestures8 gestures7 gestures6 gestures5 gestures4 gestures3 gestures2!animations1!animations0!animations/!animations.!animations-!animations,!animations+!animations*!animations)!animations(!animations'!animations&!animations%!animations$!animations#!animations"!animations!!animations !animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations !animations !animations !animations !animations !animations!animations!animations!animations!animations!animations!animations!animations!animations!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+l gestures6�to�����������t�~tt) X ' �)������V�0100' ./�oĀ����b �00      deg-px+ 1   0    0'px+vw' 1 2 3#4$2    0)55  3  00 60 deg- 4 5  0' 6  7  8  9     05  action.nimate presence   ionuto( backgroundcolor  g.ox   es utton calc' dn ircinout odemponents nsole  t  ssubedefault ineconfig nuxtconfiglay ist v ocument tsuration   easelementssmxampleit  portfalserom  gesture height(overstart ttps if$mport  nfinityitialstall  js   delivr key latest yout  id i nearogmodulestion     !resolver net pm  ull  xt onhoverstart pacity     riginx,pluginsqueryselectorall radeact  peat  solver sturn gb  otate  ionscale  x   ript oll     yprogress   ection)lectortup!how pring  rctagger rtediffnessyle   templateransform+ ition  latex+ueype ul!nderline pluginsescroll v ar- iteue whilehover inview  presstap#x'y zM P %   }� " * �  X " �)  +99   �] (  z  ( > '      N  �����@�:������x�0100/1/2/ animate/ion/eȀ���_�����ZȀ���]̀���[Ȁ��������Y�����R���������������� ����� U�����P�����X���������� �l � � � � � � ������������zpf\�������~tj`VLB } s i _ U K A 7 - #    � � � � � � � � � � � � � y o e [ Q G = 3 )   � � � | r h ^ T J4*   � � � � � � � � � � � � � � � � � v l b b b b b b b b b b b b b b b b b b b b � � � � � � � � � � � � � � � � � � � � � � � � � � � � ��-�5dd����i�v��ll�f��ows�G��one�0��so�Q�IQ�IQmazing�/��n�D9�R9�R9dd �!�T0�<�'!�T0�<�'!�T0�<�>   !imatex 75m5�^ X]�` X]�` X]�x7number L�7presence*5�7�T �w �w �Ving���on�\K\:�046D ^� �046D ^� �046D ^�   7 s~#�3� sg3W'�P sg3W'�P sg3W'�t    pi���s�e���lplying�!��re�l�;�_�;�_�;s�.�j.�j. utomatically�E��vailable�K%�u%�u%backgroundcolor�\ � � se�!�5d���ic�=��e�TU8�U8�U8fore���tter�)��ween���zier�{��oth�5��x�X��rowser���uilding�u��ndle�1�3t�"��{��{�ton�c �g �g y(� �R�I��R�I��R�Ican0�|XT.�XT.�XT.� pabilities���hange���s����ode.�1�QsP�QsP�Qs�cm6�&�b ��b ��b �?bines���es�t��panies�!��lete�u�� ly�,��onentV1�4� &��4 &��4 &� s$/�7�X���SnfigD�7�7��ured�(��sole���t�}��trols � �7py�}��re���urse�&��s�5reate�2Dss�,��urrently� ��sor&P�6�� � �,ve�|��defaults�!��ined�J��s�K��signed�&��v�7�,��eloper�b��ment�^� � ifferent�-��rectly�p��sable�k��cord�v4�4�(*&&�v�(*&&�v�(*&&e�f��ing�J�� ocumentation�u��m"� Y�s�PY�s�PY�swn �rag� �7�U�� uration�9��vcuqx74mh8wmjkmhiom2yli4 �each�s��sy���diting�ors�}��ffects�lement$� �K�O�K�O�K�Ks �.�{�{n�)��gine������hance�h��ter�;��s�@�����irely�o��venth�7�h��s�/��xamples* �5�*���aclusive�zit$�5�t�t�\perience�l��tends���sion�D�����C�����KB�����JA�����I@�����H?�����G>�����F=�����E<�����D;�����C:�����B9�����A8�����@7�����?6�����>5�����=4�����<3�����;2�����:1�����90�����8/�����7.�����6-�����5,�����4+�����3*�����2)�����1(�����0'�����/&�����.%�����-$�����,#�����+"�����*!�����) �����(�����'�����&�����%�����$�����# ��vȀ��� �Ā��� ������ 漀��� ܸ���� ȴ���� ȴ���� ������ ������ ������ ������ ������ ������ x����� n����� d����� d����� P����� F�����vȀ���B�����9�����4�����2�����1�����!����������JA�����I �̀����̀���uȀ���H�����G�����F�����#������̀���I�����>_Ā���Ā��� Ā����Ā����Ā����Ā����Ā����Ā����Ā������̀��� �̀��� �̀��� �̀��� �̀����̀����̀����̀����̀����Ȁ����Ȁ��� �Ȁ��� �Ȁ��� ;Ȁ��� MȀ��� �Ȁ���bȀ���cȀ���|Ȁ���<Ȁ����Ȁ���yȀ����Ȁ����Ā���� Ā��������������E�����������������������߄����ބ���� ������ ������ ������ Q����� L�����K�����J������P����� �F������<������2������(������������������ ����������"�����!����� �������������������������������������������������������2����� �����  ����� D����� ����� om� � � � | p d Z K :��������������tj` � � � �* � � � ~ u k a W I @ 5 + !   � � � � � � � � � � � ~ p e V K 9 - "  ������ � 3 $       � � � � � � � � � h ] S I 9 .  � � � � w j j j j j j j j j j j j j j j j j j � � � � � � � � � � � � � � � � � � � � � � � � � � � � �  0yout�  0withi�  0whir�  0webf�  0vsc�  0ver�  0values�  0usef�  0upg�  0trus� "0transformb�  0too� 0througho~  0thei|  0targetsx 0suv  0startet  0spor  0simp  0secsn  0scalexl  0rootmj 0reorderih  0readf 0pud  0pressesb 0pn`  0pasted^  0originz\  0opeZ  0offX  0noteV 0msT  0motioncR  0morP  0mapN  0limL 0leJ  0keepsH  0issF  0instantD  0inaB  0hel>  0giv<  0fund:  0forc8  0exc 0directl 0comb 0aw 0alo  0itse� 0giv 0elements 0cu 0bo 0ani  �� �� �� �� �� 0numbers ��  ��  ��  �� 0matche �}  �v 0tr �l  �e �^ �W �P0matchi �B �;0tr    0numbers  "0animationc 0animaten  0ani  0along  0accep  080 020 010 2�0your>[�0wherea<[s0vers:[g0used8[[0transitions6[H0thr4[=0that2[10starte0[#0seti.[0rotatex,[0read*[�0polyl([�0originx&[�0object3$[�0motionc"[ 0views 0too0staggerc 0rests0parents0motionv 0webf 0tu0targets 0seto 0rath 0orc0motionr 0jav 0hav 0i@�c 0plu�X 0motionc�I 0infl �= 0fir �2 0do�( 0callbacks� 0animated�  0dx.  0canc  0butt  0bey  0basi  0asp  0apis�� 0unlw 0startsi 0re_ 0nuU 0ju K 0functions : 0easedp, 0clicks 0animations    0fet6  0exc4  0ende2  0effi0  0done,  0dis*  0definit(  0curv&  0conv$  0compos"  0clienty " 0vi 0they  0sett W �������������~tj`VLB8.$�������������zpf\RH>4*   � � � � � � � � � � � � � v l b X N D : 0 &    � � � � � � � � � � �W(�_V&�]U"�T-�S� R&�VQ,�'P%� O$�yN0� M�} L�K�aJ�\I�_H'�EG/�F�E�vD�RC�x B+�1 A�w @�n ?�y >� =�<�v;�R:�x 9+�1 8�w 7�n 6�y 5� 4(�{ 3&�v 2"�] 1-�v 0� /&�_ .,�R-%�z ,$�H+0� *�v )�' (�# '� &� %'�- $/�w#�M "� !�}  �j +�t �k �D �E �@ (�{ &�v "�] -�v � &�_ ,�R%�z $�H0� �v �' �#  �  �  '�-  /�w �P � �} �j +�t �k �D �E �@ �� version �Z���%>Svka�EL�����}7,������  0startd  0tru       0ho 0box  *F?81*           0rev  0rev  0hovers  0bef��������������ypg^ULC:1( ��������������}tkbYPG>5,# � � � � � � � � � � � � � � � x o f ] T K B 9 0 '    � � � � � � � � � � � � � � | s j a X O F = 4 + "    � � � � � � � � � � � � � �  u k a W M C 9 / %    � � � � � � � � � � � � � { q g ] S I ? 5 + !   � � � � � � � � � � � � � w m c Y O E ; 1 '   �������������}si_UKA7-#�������������yoe[QG=3) ������������ukaWMC9/%�������������{qg]SI?5+! �������������wmcYOE;1' �������������}si_UKA7-#�������_�^�] �\�[�Z�Y�X�W �V�U�T�S�R�Q �P�O �N�M�L�K�J �I�H�G�F*�E�D�C�B�A�@�? �>�=�< �;�:�9�8 �7 �6�5�4 �3�2 �1)�0#�/ �.�-�,+�+�*�)�(�'�&�%�$�#�" �! � ��!�� � ��� ��������� � �  � �  � � � � � � ��� � � � �~�}�|�{�z�y �x�w�v�u�t �s �r �q�p�o�n�m�l �k�j�i �h �g�f�e+�d8�c�b�a�`�_�^�]�\�[�Z �Y �X�W!�V�U �T �S�R�Q �P�O�N �M�L�K �J�I�H�G�F�E�D�C�B�A�@�?�> �=�<�;�:�9�8�7�6 �5�4�3 �2�1�0�/�.�-�,�+�*�)�(�' �&�% �$�#�"�!�  ����*������� ��� ���� �  � � �  � � �)�#� ���+��~}|{zyx w vut!sr q pon mlkjihgfe d c ba `_^ ] \ [ ZYX W V U TSRQPO NMLKJ I H GFEDCB A@? > =<;+:89876543210 / .-!,+ * )(' &%$ #"!          W�_ � B� � ��d�����8� ��6���;;�Otablemotion_examples_fts_idxmotion_examples_fts_idxCREATE TABLE 'motion_examples_�;;�Otablemotion_examples_fts_idxmotion_examples_fts_idxCREATE TABLE 'motion_examples_fts_idx'(segid, term, pgno, PRIMARY KEY(segid, term)) WITHOUT ROWID�==�#tablemotion_examples_fts_datamotion_examples_fts_dataCREATE TABLE 'motion_examples_fts_data'(id INTEGER PRIMARY KEY, block BLOB)�\33�atablemotion_examples_ftsmotion_examples_ftsCREATE VIRTUAL TABLE motion_examples_fts USING fts5( title, description, code, tags, content='motion_examples', content_rowid='id' )~99�tablemotion_docs_fts_configmotion_docs_fts_configCREATE TABLE 'motion_docs_fts_config'(k PRIMARY KEY, v) WITHOUT ROWID�;;�tablemotion_docs_fts_docsizemotion_docs_fts_docsizeCREATE TABLE 'motion_docs_fts_docsize'(id INTEGER PRIMARY KEY, sz BLOB)�33�Gtablemotion_docs_fts_idxmotion_docs_fts_idxCREATE TABLE 'motion_docs_fts_idx'(segid, term, pgno, PRIMARY KEY(segid, term)) WITHOUT ROWID|55�tablemotion_docs_fts_datamotion_docs_fts_dataCREATE TABLE 'motion_docs_fts_data'(id INTEGER PRIMARY KEY, block BLOB)�O ++�Wtablemotion_docs_ftsmotion_docs_ftsCREATE VIRTUAL TABLE motion_docs_fts USING fts5( title, description, content, tags, content='motion_docs', content_rowid='id' )~ E+�indexidx_motion_examples_categorymotion_examples CREATE INDEX idx_motion_examples_category ON motion_examples(category)� G+�indexidx_motion_examples_frameworkmotion_examples CREATE INDEX idx_motion_examples_framework ON motion_examples(framework)z A/�indexidx_motion_components_namemotion_components CREATE INDEX idx_motion_components_name ON motion_components(name)� K/�%indexidx_motion_components_frameworkmotion_components CREATE INDEX idx_motion_components_framework ON motion_components(framework)^3#uindexidx_motion_docs_urlmotion_docs CREATE INDEX idx_motion_docs_url ON motion_docs(url)n=#� indexidx_motion_docs_categorymotion_docsCREATE INDEX idx_motion_docs_category ON motion_docs(category)q?#� indexidx_motion_docs_frameworkmotion_docsCREATE INDEX idx_motion_docs_framework ON motion_docs(framework)�++�Ctablemotion_examplesmotion_examplesCREATE TABLE motion_examples ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, description TEXT, framework TEXT NOT NULL CHECK(framework IN ('react', 'js', 'vue')), category TEXT, code TEXT NOT NULL, tags TEXT, -- JSON array of tags difficulty TEXT CHECK(difficulty IN ('beginner', 'intermediate', 'advanced')), related_docs_id INTEGER, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (related_docs_id) REFERENCES motion_docs(id) )� //�Itablemotion_componentsmotion_componentsCREATE TABLE motion_components ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, framework TEXT NOT NULL CHECK(framework IN ('react', 'js', 'vue')), type TEXT CHECK(type IN ('component', 'function', 'hook', 'utility')), description TEXT, props TEXT, -- JSON object of props/parameters methods TEXT, -- JSON array of methods examples TEXT, -- JSON array of examples related_docs_id INTEGER, FOREIGN KEY (related_docs_id) REFERENCES motion_docs(id) )P++Ytablesqlite_sequencesqlite_sequenceCREATE TABLE sqlite_sequence(name,seq)�##�Otablemotion_docsmotion_docsCREATE TABLE motion_docs ( id INTEGER PRIMARY KEY AUTOINCREMENT, url TEXT UNIQUE NOT NULL, title TEXT NOT NULL, framework TEXT NOT NULL CHECK(framework IN ('react', 'js', 'vue')), category TEXT, description TEXT, content TEXT NOT NULL, examples TEXT, -- JSON array of code examples api_reference TEXT, -- JSON object of API information is_deprecated INTEGER DEFAULT 0, is_react INTEGER DEFAULT 0, is_js INTEGER DEFAULT 0, is_vue INTEGER DEFAULT 0, tags TEXT, -- JSON array of tags last_updated DATETIME DEFAULT CURRENT_TIMESTAMP, created_at DATETIME DEFAULT CURRENT_TIMESTAMP )5I#indexsqlite_autoindex_motion_docs_1motion_docs � � , � � B��b�B<�V � v v v vrOqtabletest_fts5test_fts5CREATE VIRTUAL TABLE test_fts5 USING fts5(content)�nA+�{triggermotion_examples_fts_updatemotion_examplesCREATE TRIGGER motion_examples_fts_update AFTER UPDATE ON motion_examples BEGIN DELETE FROM motion_examples_fts WHERE rowid = old.id; INSERT INTO motion_examples_fts(rowid, title, description, code, tags) VALUES (new.id, new.title, new.description, new.code, new.tags); END�RA+�Ctriggermotion_examples_fts_deletemotion_examplesCREATE TRIGGER motion_examples_fts_delete AFTER DELETE ON motion_examples BEGIN DELETE FROM motion_examples_fts WHERE rowid = old.id; END�.A+�{triggermotion_examples_fts_insertmotion_examplesCREATE TRIGGER motion_examples_fts_insert AFTER INSERT ON motion_examples BEGIN INSERT INTO motion_examples_fts(rowid, title, description, code, tags) VALUES (new.id, new.title, new.description, new.code, new.tags); END�\9#�gtriggermotion_docs_fts_updatemotion_docsCREATE TRIGGER motion_docs_fts_update AFTER UPDATE ON motion_docs BEGIN DELETE FROM motion_docs_fts WHERE rowid = old.id; INSERT INTO motion_docs_fts(rowid, title, description, content, tags) VALUES (new.id, new.title, new.description, new.content, new.tags); END�>9#�+triggermotion_docs_fts_deletemotion_docsCREATE TRIGGER motion_docs_fts_delete AFTER DELETE ON motion_docs BEGIN DELETE FROM motion_docs_fts WHERE rowid = old.id; END� 9#�otriggermotion_docs_fts_insertmotion_docsCREATE TRIGGER motion_docs_fts_insert AFTER INSERT ON motion_docs BEGIN INSERT INTO motion_docs_fts(rowid, title, description, content, tags) VALUES (new.id, new.title, new.description, new.content, new.tags); END� AA�tablemotion_examples_fts_configmotion_examples_fts_configCREATE TABLE 'motion_examples_fts_config'(k PRIMARY KEY, v) WITHOUT ROWID�CC�#tablemotion_examples_fts_docsizemotion_examples_fts_docsizeCREATE TABLE 'motion_examples_fts_docsize'(id INTEGER PRIMARY KEY, sz BLOB)�;;�Otablemotion_examples_fts_idxmotion_examples_fts_idxCREATE TABLE 'motion_examples_fts_idx'(segid, term, pgno, PRIMARY KEY(segid, term)) WITHOUT ROWID�==�#tablemotion_examples_fts_datamotion_examples_fts_dataCREATE TABLE 'motion_examples_fts_data'(id INTEGER PRIMARY KEY, block BLOB)�\33�atablemotion_examples_ftsmotion_examples_ftsCREATE VIRTUAL TABLE motion_examples_fts USING fts5( title, description, code, tags, content='motion_examples', content_rowid='id' )~99�tablemotion_docs_fts_configmotion_docs_fts_configCREATE TABLE 'motion_docs_fts_config'(k PRIMARY KEY, v) WITHOUT ROWID�;;�tablemotion_docs_fts_docsizemotion_docs_fts_docsizeCREATE TABLE 'motion_docs_fts_docsize'(id INTEGER PRIMARY KEY, sz BLOB)O33�Gtablemotion_docs_fts_idxmotion_docs_fts_idxCREATE TABLE 'motion_docs_fts_idx'(segid, term, pgno, PRIMARY KEY(segid, term)) WITHOUT ROWID|55�tablemotion_docs_fts_datamotion_docs_fts_dataCREATE TABLE 'motion_docs_fts_data'(id INTEGER PRIMARY KEY, block BLOB)�O ++�Wtablemotion_docs_ftsmotion_docs_ftsCREATE VIRTUAL TABLE motion_docs_fts USING fts5( title, description, content, tags, content='motion_docs', l"--� tabletest_fts5_configtest_fts5_config~CREATE TABLE 'test_fts5_config'(k PRIMARY KEY, v) WITHOUT ROWIDp!//�tabletest_fts5_docsizetest_fts5_docsize{CREATE TABLE 'test_fts5_docsize'(id INTEGER PRIMARY KEY, sz BLOB)k //�tabletest_fts5_contenttest_fts5_contentzCREATE TABLE 'test_fts5_content'(id INTEGER PRIMARY KEY, c0)=''�;tabletest_fts5_idxtest_fts5_idxNCREATE TABLE 'test_fts5_idx'(segid, term, pgno, PRIMARY KEY(segid, term)) WITHOUT ROWID�))�tabletest_fts5_datatest_fts5_dataCCREATE TABLE 'test_fts5_data'(id INTEGER PRIMARY KEY, block BLOB)Qqtabletest_fts5test_fts5CREATE VIRTUAL TABLE test_fts5 USING fts5(content) �� version ���)>GO+�A��] �M33https://motion.dev/docs/reactGet started with Motion for Reactreactgetting-startedLearn Motion for React animation library: Install, animate HTML and SVG elements with spring animations, staggering effects. Complete guide with examples.**Motion for React** is a React animation library for building smooth, production-grade UI animations. You can start with simple prop-based animations before growing to layout, gesture and scroll animations. Motion's unique **hybrid engine** combines the performance of native browser animations with the flexibility of JavaScript. It's also trusted by companies like [Framer](https://framer.com) and [Figma](https://figma.com) to power their amazing no-code animations and gestures. In this guide, we'll learn how to install Motion and take a whirlwind tour of its main features. Install ------- Motion is available via npm: ``` npm install motion ``` Features can now be imported via `"motion/react"`: ``` import { motion } from "motion/react" ``` **Note:** Motion for React includes React-specific APIs. All [vanilla Motion features](./quick-start) are also available. Your first animation -------------------- [The](./react-motion-component) `[<motion />](./react-motion-component)` [component](./react-motion-component) is the core API in Motion for React. It's a normal DOM element, supercharged with animation capabilities. ``` <motion.ul animate\={{ rotate: 360 }} /> ``` When values in `animate` change, the component will animate. Motion has intuitive defaults, but animations can of course be configured via [the](./react-transitions) `[transition](./react-transitions)` [prop](./react-transitions). ``` <motion.div animate\={{ scale: 2, transition: { duration: 2 } }} /> ``` Enter animation --------------- When a component enters the page, it will automatically animate to the values defined in the `animate` prop. You can provide values to animate from via the `initial` prop (otherwise these will be read from the DOM). ``` <motion.button initial\={{ scale: 0 }} animate\={{ scale: 1 }} /> ``` Or disable this initial animation entirely by setting `initial` to `false`. ``` <motion.button initial\={false} animate\={{ scale: 1 }} /> ``` Hover & tap animation --------------------- `<motion />` extends React's event system with powerful [gesture animations](./react-gestures). It currently supports hover, tap, focus, and drag. ``` <motion.button whileHover\={{ scale: 1.1 }} whileTap\={{ scale: 0.95 }} onHoverStart\={() \=> console.log('hover started!')} /> ``` Motion's gestures are designed to feel better than using CSS or JavaScript events alone. Scroll animation ---------------- Motion supports both types of [scroll animations](./react-scroll-animations): **Scroll-triggered** and **scroll-linked**. To trigger an animation on scroll, the `whileInView` prop defines a state to animate to/from when an element enters/leaves the viewport: ``` <motion.div initial\={{ backgroundColor: "rgb(0, 255, 0)", opacity: 0 }} whileInView\={{ backgroundColor: "rgb(255, 0, 0)", opacity: 1 }} /> ``` Whereas to link a value directly to scroll position, it's possible to use `MotionValue`s via `useScroll`. ``` const { scrollYProgress } = useScroll() return <motion.div style\={{ scaleX: scrollYProgress }} /> ``` Layout animation ---------------- Motion has an industry-leading [layout animation](./react-layout-animations) engine that supports animating between changes in layout using transforms. It's as easy as applying the `layout` prop. ``` <motion.div layout /> ``` Or to animate between completelx $$ u�T������,n 0hoverstart ref�ttps �) ybridB iconvariants� d� f$Vmg�"port      n:Kactive:  dex=Ffinity3Iitial3 " stall  � son�pen�  selected�visible2Htem;  3  s>G js   +L  delivr �)  ustifycontent�key H<latest 7  V yout  q          group�  id sroot�scroll�eft�t�i         *near� "st;Fog(   Imap>ss[ iniBodal2H    ule�*stion     !  "   !                 resolver valueHy\ component?Pnet �) wJ pm  �  ull  (G mbersGxtonce�% lick� directionlock�hoverend�  start �' mount� pan� ointerdowncapture�unmount�pdateG pacity                   en�s�&riginx,Gur:verflow�  padding�#ss:th:,# length: 0  #usei luginsointinfo� sitionNPre@G$omisehqueryselectorall �* rad�*eact    H  f?G   peat   I delaybtypeasolver stdelta^ K speed] turn 2B        i !�,!) �E*�(  k) �R 2-  �Y     �K.  ������������������- ` ������2w00�100�29�5�anF �|������| �00�$   01�)f�* f0�* 1�$    0�#  0�) px�1�52�4� 5�!6�"8�#2�%  0�!55�2 3�& 0�) 0�? 60�- 4�' 5�#  00px�6�) 7�* 8�2 9�3 0�?5�1  accordion� nimate�- presence�6 ion�-backgroundcolor�*  orderradius�! x�6 es�< utton�/cdn�9 hange�( ircinout�> ode�mponent�&nsole�1 t�    ss�<ube�=rrent�( damping�) elay�@ iff�(st�: v�     ocument�< wn�( uration�.  ease�=lement�>s�<sm�9xample�it�6f00�* alse�rom�   unction�gesture�1 tprevious�(height�idden�%over�1ttps�9 img�"port�   nfinity�=itial�$ stall�+ sopen�  js�7  delivr�9 key�6latest�9 yout�     group�  id�5i�@near�=st� og�1module�9tion�       net�9 pm�+  ull�& once�% lick� hoverstart�1 pacity�$    verflow�& padding�#queryselectorall�< rad�=eact�  f�& peat�= stdelta�) turn�   gb�2 oot�&tate�- ion�=scale�. x�'   ript�9 oll�%      direction�(ref�& y�(  progress�'   ection�"lector�<topen�scrolldirection�(how�6pring�) rc�:tagger�@ rted�1iffness�) yle�     transition�.ue�% ype�9ul�-nderline�5p�(semotionvalueevent�( ref�&scroll�' pring�)tate�  transform�*viewport�%sible�% whilehover�1inview�$  tap�1y�= z�=A ;    LL  l 4  S  o $  %&: ; � % � *  #D "   /       �����6�00�@ 1�@ 0�@animate�@ion�@code�@delay�@ example�@from�@import�@js�@li�@motion�@opacity�@ stagger�@ y�@    �����l�0300�? 9�?0�?animate�?ion�?code�?element�?xample�?js�?rotate�?spring�? K ��|; |�      � ��)�@ ..^��R����^��R������J������k00                                 )   00G1�)fI a deg-Gf0�* px+ D 1                          0     '   0'   " px+' -vw' G px_1 + 2 G 3#G4$G'53G'64/'75/86/&0Y9O/2                0) 105   18.29.06  H  3:.4;.5<  +5   0 4 6=.7>.8?.9@.3         *  0ZO 0 :  4 1 1[2\3]4^5_6`0 ) c deg- / 7a8b4 +  44N5c6d7e8f9g5             0' 2  05  Cpx�1i4j5k6  +  7  +  8   +   0vw�9      (   0Bg5  � a� ccordion� tion.Gve:  fterchildren<Gnimate          presence   H ion    synchuto( G waith backgroundcolor   *     sefrequency[e� �R  �S=�      �.  ( b !4. t $$+ : �14�  S ''�Q������&k0beforechildren< G g.Glue:! r_4  orderradius�! unceW x      h es �* geometryNutton  ;   variants�  y<Gcalc' G lback�meraJ ncelj dn �) hange�(  eckmarkpath:-ildren<Gircinout �* le57loses�odelor:  sG mplete: . onent�& s nsole  (   I t             raintsref�  trols?   F    unt@  G  er@ ss1yube�*rrent? ( " speedg stom>G x5HdampingZO nger9Hefault�  transitionM ineconfig nuxtconfiglay '  % < children< ialog�ff�(st �* v  0)        ocument 1y ubleg wn�( rag�  constraints� directionlock�tsuration               (  e�  ase""$ "inU out/ " " lement.  Ss�*nd� sm�*vent�  xampleit  H<portf00ID  alseH& egaussianblur�  turbulence[ffG ilter_4 xed�lex�or�rom      unction? _gesture  ;  tf elementbyidCprevious�(ray:height(G0idden8  C  !overj   +c    �E ,�X"  # �i  �62 �  �H$ h"^ 8 ������Q������&00:�f7Eu�#7Eu�#7E��������00B�@H S@H S@H �4������l��3Q0segment(�O3��L3��L3�lectors�{�#�#quence��'�m������^ �006+ �##1+�}024+ �\24+ � ##80+�;2000+�^5+ �##a+ �(ccess+�##�@ross+�dd+�7ims+�`lpha+0�yready+ �##so+�n+�d+�/ aimate+�Tview+��OK5ion+'��4 s+$n~� s<pi+&!o~�W  s+�?re+ � s+ �ttr+ P�effect+ O�utomatic+�#between+ �r rowser+�Guilt+�Dt+�*change+�s+� ecking+ �##leaner+$�mode+�Jm+ �Ue+� parison+h�lexity+�dntent+�rossfade+�x s+�Ass+\��Surrent+/ly+�wsor+ �Adays+ �##elay+.�v+��##eloper+�Nifferent+ �t)scord+ �2ver+rete+�ocs+�Swn+ �Zvcuqx74mh8wmjkmhiom2yli4+ �Wx+ v�each+�+rly+�sing+ ��diting+�Lffect+Q{s+�6lement+�s+�n+�Qcouraged+� d+�ter+ �{�/ire+�;ly+ �vents+ $�ryone+ � ##xample+�!s+��*clusive+ �=it+�)pand+�glore+"faqs+e�eature+g�s+�ilesize+�[lex+ �or+� J;rame+0� rusercontent+ �Tom+ z�unction+�l s+"�� generated+�-sture+s+ #�t+ ��##�)ithub+�Freat+�]sap+w�uide+��s+ d�handling++�rve+�eight+ �_lp+� ours+ �##ver+%�w+ttps+��##k�images+ �Vportant+�t�B������O 0origin.�a�)�)therwise.�w�)�)ut.�*�)�)side.�#�)�)parent.�8�)�)ssing.�;�)�)yment.� ercentages.�-�)�)formance.~�Y�)�)ixels.�+�)�)lus. �Mng. �&oint.��)�)sitive.�E�)�)sible.�W�)�)werful.�� ������D9 0performant/��X�Xlus/ �Zng/ �3oint/�/�X�Xer/�&�X�Xevent/�S �N �N s/ tart/��X�Xssible/�w�X�Xwerful/�#remium/�? �O �O ss/�^)�^ ,    t ,    t ,    ted/"�5 �& �&  ventdefault/�{�X�Xiew/ �ous/�ivate/�op/ S�effect/ R�rty/� �X�Xvided/�K�S��S��Squick/ x react/ ��!*�0*�0*nderers/ N�size/+��`turn/(�S9p,�u9p,�u9p,s/�V�X�Xight/�)�X�Xobust/s/��I�Icale/��R�R�}roll/�econd/�-�n�l�n�l�nary/�%�X�Xlectors/�fV�V�Vt/�q)�1)�1) implifies/ource/�7�X�Xplit/5��!�X�Xtext/4��!�X�Xring/8pvalue/ K� quarespace/^�tagger/:� rt/F x �o"8�^o"8�^o"8ed/��B�X�Xvent/"�d �5 �5 op/��X�Xyle/ V�effect/ U�uccess/�! �5 �5 fully/�'�X�Xpport/vg/ Y�effect/ X�text/6��!�X�Xhan/�t/$� �]`ZG�]`ZG�]`Ze/jr�U+Z# ;i+Z# ;i+Z# ;ir/� �X�Xy/��X�Xime/�-�X�XSo/Ll t a@�9#;a@�9#;a@�9#Wols/ ��uch/�.�X�Xransform/<w value/ H�iggering/�R�X�Xue/�#N-�aN-�aN-up/�dates/�-grade/��s/�Y�6�$�6�$�6age/��X�Xe/�(�X�Xd/�v�X�Xing/�A�X�Xtils/ -�value/D{s/ A�elocity/�)�X�Xia/�DU�U�Udeo/��X�Xew/ �s/�$ue/�was/�&�X�Xeb/$m~�h�6�$�6�$�6flow/`�ll/�F�X�Xhen/(��rC� �rC� �rCile/�M�X�Xidth/ �8ll/(�@������� �m 0which1�%� � idth1@�^" 8�" 8�" 8oll1�c�b�bth1E ��7     K  W�4���B�C��5 , ^ �? KKK ""�V�����J�06�5'�0[k6 �x&/;F5'�0[k6 �x&/;F5'�0[k6t#< �N��F�6��F�6��F_k"B�FP!^6)�F� P!^6)�F� P!^6)�FY2�>4L x�K4L x�K4L x�J�-� c:!d�� c:!d�� c:!d�f�&/;F5'�0[k�&/;F5'�0[k�&/;F5'�0[k>0 ����9���9��f,�7[�C[�C[�~Dl�Dt� �E�� H�It� �E�� H�It� �E�� Hwh �/�  � �{�{��� � � (�&�<�)�1�)�1�)�b�|t� �E�� L�Mt� �E�� L�Mt� �E�� L��;� � `0within"�l ! �K ! �K ! � �W�=�W�=�W.�%���N%���N%��"� ! �1 ! �1 ! �=�-�8�-�8�-�_ � � "�l ! �K ! �K ! � �W�=�W�=�W.�%���N%���N%��"� ! �1 ! �1 ! �=�-�8�-�8�-�_ � � out��3�3 �y��3�3 �yon�6�3�3��x�x�q���5�^�^�%�c�c�[�)�) �6�3�3��x�x�q���5�^�^�%�c�c�[�)�)rdpressb�b�b�b�b�b�b�b�b�b�b�b�b�b�b�b�b�b�b�b�b�b�b�s�'�3�3��G�G�g����� �'�3�3��G�G�g�����k�t�T�T�U�h��h��h�/�a�a�Y�^�^"�D�G�D�G�D�G�t�T�T�U�h��h��h�/�a�a�Y�^�^"�D�G�D�G�D�Ging��{�{��{�{s �6���\� � �p�c�c�Q���6���\� � �p�c�c�Q��ld�R�{�{�R�{�{ry�W�{�{�W�{�{rap>�>�>�>�>�>�>�>�>�>�>��K>�>�>�>�>�>�>�>�>�>�>�>�ping�8���!�p�p��x�x�H�^�^�8���!�p�p��x�x�H�^�^ites�E� � �E� � ww�~�{�{"�p�d�~�d�~�d"��d�d�d�d�d��� �~�{�{"�p�d�~�d�~�d"��d�d�d�d�d���x�G�{�{p�)?#;�O+�=� �\�?#;�O+�=� �\�?#;�O+�=� �\�>�9i�>�C`&�1�:�DG-1>� �2i�>�C`&�1�:�DG-1>� �2i�>�C`&�1�:�DG-1>� p�b?#;�+�?�*�m�+?#;�+�?�*�m�+?#;�+�?�*�m�!L�k!L�k!L:�W �3��, �3��, �3��>!L�x!L�x!L"�} �u �u :� ?!�d� ?!�d� ?!�d:�F ?!�d� ?!�d� ?!�d��t�tf�M KH ;@Z KH ;@Z KH ;@�G�{�{p�)?#;�O+�=� �\�?#;�O+�=� �\�?#;�O+�=� �\�>�9i�>�C`&�1�:�DG-1>� �2i�>�C`&�1�:�DG-1>� �2i�>�C`&�1�:�DG-1>� p�b?#;�+�?�*�m�+?#;�+�?�*�m�+?#;�+�?�*�m�!L�k!L�k!L:�W �3��, �3��, �3��>!L�x!L�x!L"�} �u �u :� ?!�d� ?!�d� ?!�d:�F ?!�d� ?!�d� ?!�dy� ��o��o�.�*T]#�4�yT]#�4�yT]#�4.�:i�w� �Li�w� �Li�w� .�cT]#�t�:T]#�t�:T]#�t�#�3#�3#"�({ �{ �{ �?#�@#�@#�~ �u �u � ��o��o�.�*T]#�4�yT]#�4�yT]#�4.�:i�w� �Li�w� �Li�w� .�cT]#�t�:T]#�t�:T]#�t�#�3#�3#"�({ �{ �{ �?#�@#�@#�~ �u �u arn�m�{�{�m�{�{brid�9�3�3�9�3�3et�*�p�p�x�T�T�0�a�a�*�p�p�x�T�T�0�a�aou*�{�V��V��V�Z�(. ?)4i1Yy<I. ?)4i1Yy<I. ?)4i1Yy<6�xI*�4�]]I*�4�]]I*�4�]d�&�n�&7"#��4�f&�n�&7"#��4�f&�n�&7"#��4�^�3�3^�=&�n�f7"#��4�@&�n�f7"#��4�@&�n�f7"#��4���R��R�4� �}9�R�j�}9�R�j�}9�R�O���I� � "� ?�d ?�d ?"�5!� �:!� �:!� 4�=�9�<�b�9�<�b�9�<(�.~�5�T~�5�T~�5����V�{�{�f� � �3�X�X�T���� � �]���;7�7�7�:'�<'�<'*�{�V��V��V�Z�(. ?)4i1Yy<I. ?)4i1Yy<I. ?)4i1Yy<6�xI*�4�]]I*�4�]]I*�4�]d�&�n�&7"#��4�f&�n�&7"#��4�f&�n�&7"#��4�^�3�3^�=&�n�f7"#��4�@&�n�f7"#��4�@&�n�f7"#��4���R��R�4� �}9�R�j�}9�R�j�}9�R�O���I� � "� ?�d ?�d ?"�5!� �:!� �:!� 4�=�9�<�b�9�<�b�9�<(�.~�5�T~�5�T~�5����V�{�{�f� � �3�X�X�T���� � r2�]�`)|�XS�S�WVx�%�3@�w ��'m�=w������rj03�@code�@exam�D������ �01�l�R������(�016�a80�a2�a animate�aion�acode�adiv�aex�0������d�09�code�nst�example�from�import�js� mirroreasing� otion�powerin�out� rogress�     �2������h�08�code�nst�example�from�import�js�motion�powerin� out� rogress�  reverseeasing�    �H�������00�  2� 5�4� 5�code�nst�easing� xample�from�import�js� keyframes�motion�steps�    ������� �0reversea gb  � a6 0 ight� oot�&tate    " xWion7 swvalue�sCcale    7  x   �   ope?  G ript e!2 oll    |       direction�(ref�& y�(  progress   �   econds<*tion).2lector�* sCquenceKtf isopen�open�scrolldirection�(tatus:up!ehow �peed?(  ring  '          *   rc�*tagger &  !  < children� rt� ed�te:us:  ddeviation�iffness=P op?$    propagation� yle   C !    vg:+O  tap� emplatee " he�nhis� reeJ imed   lineKs5!'of ransform+ %  ition    5        latex+' ue�  weenS ype ' *ul! !'nderline upluginp�( seanimate?Gd� effect? motionvalue@ Gevent�( ref�scroll � pring�)tate:e  transform�*v H  alue�&sIr-   : iants7  A   elocity\ iewport�%sible8   C   ! ualdurationXteueH watch�hen<Giledrag� focus�hover  ;   inview  C"  pressR tap# R idth�ll� x'  y  +D z�* q �4m .*  |H  ""n !  )k Z<   ' + "VB �]  >?- �+ ""�������������V������0k00�G                              )     +00�q1�Sf�s a deg�WGf0�T px�U D 1�A                        0�J '   0�Q   " px�U' -vw�Q G px� 1�K+  2�LG )3�MG4�NG'5�]G'6�^/'7�_/8�`/&0�9�y/2�B             0�S 10�_   1�b.2�c.0�`  H  3�d.4�e.5�f  +75�J  0 6�g.7�h.8�i.9�j.3�C       *   ,0�O 0�y  4 5 1�2�3�4�5� 6� 0�E) deg�W / 7� 8� 4�D+   00�d 44�x5� 6�7�8�9�5�E            0�Q 2  0�_  Cpx�I1�4�5�6�F+   7�G+   5�d8�H +   0vw�A59�I   (    0�deg�W 5�I a�4.ccordion�I tion�XGve�d  fterchildren�fGll�enimate�E          presence�N H2 ion�E     sync�t�c uto�R G wait� xis�Xbackgroundcolor�J  *     sefrequency�e�F 5  forechildren�f G g�XGlue�d! r� 4 5  orderradius�K unce��P  �%7�     �7   | % | %% 1B   �<5�0  M  � F��V������0�00*�J�|3 ;�N/%. "S%] !N;0#" #LI )&3 ;�N/%. "S%] !N;0#" #LI )&3 ;�N/%. "S%] !N;0#" #LI )&H�#* �UĀ����. z00�B������ \00R�1R� 2R�^9R�aR(l8!/VboutR�cceptsR]YssR�0ibilityR5� leR?tiveR�[ddeventlistenerR�llR�ZsoR -+$=nR�6dR B;S�imateR��GnumberR�JionR sR}yRupiR �X�6rgumentR�rayR�%sR �AsociatedR�^tR g�tachesRjingRd utomaticallyR  beRq"jK2 comesR=ingR 2�lurredR�HrowserRutR w�tonRG:yR1callR�ubackR �ENW sR"edR�znR p"XcelR �- lingR�OpressR �childR�]leanRWickR 0�ysR&entxR�iyR�kodeR�4mpletedR�$onentsR�EnsoleRI _#!-tR�bvenientR\ssRaVurrentlyR�sorR �GdefaultR �j)tectR �ionR sRvR�@eloperR �Q�6ifferentRscoverRvR�[ocsR �V�6umentR�)eachR�itherR^FlementR&74'/!6sR _JnR �T�6dR!�a",edR S�[ventR � ,sR�hancesRterR D� tcRventRZ�sR �btargetR� rR�7yR6xamplesR�!pandsR.loreRfalseR�).%eaturingR�UiltersR reR t�)dR�WingR ocusRArR41romR�unctionRs}` sR�OgainsR�.estureR ;�ET%sR� telementbyidR�*reatR3owingR�8handlersR�]ingR'sR�eldR�NowR ttpsR�P�6;idR �,fR� *)mportR � edR�nRcludeR�WfoR �sRUsN7[tREEhZjsRkeyR E� boardR>�lazyRiearnR �ssR�}ibraryR�9fetimeR�+keR��# nkR�BstenerR sR [ lR�qogRJ _#!- managementRsRY embershipR�,oreR�tionR �� zillaR �R�6ultipleReYyR �+nativeReededRnthR�\umberR�MofR�&�nR / VceR%h�*eR ��lyR k�5 ptionallyR�ssR�hrR ;gR �S�6utR sideR�-verviewR� passedR�iveR$�iymentR�* erformantR�~ointR+erR"eventR �O sR tartRssibleR�sremiumR �; ssRT ,    tedR�1  ventdefaultR�wopertyR�videdR �G�SreactR �#*turnRO9p,sR�RightR%obustRsRcaleR �econdR )�naryR !lectorsRbVtR �m) implifiesRourceR�3plitR�RtextR�QtartR o"8edRLventR�` opR|uccessR � fullyR�#pportRtextR�ShatR�]`ZeR$C+Z# ;irR�yR imeR�)oRa@�9#uchR* riggeringR�NueR �N-usR �U�6ageR� eR�$dRringR�=velocityR�%iaR@UdeoR� wasR�"ebR �W�6llR�BhenR �rCileR�IillR�xK%!thR8�)youR�/                                             0               �2�����K�h��o�|���|���|��G2�[+�� �9+�� �9+�� �i�q�!�Q�!�Q�! 2�v�G�X�O�G�X�O�G�X��% �.��t��t��y�.�O�x�x���(�^�N�m�^�^"�T�X�'�5�y�}� � ����A�'���_�_�T�,2�o�|���|���|��G2�[+�� �9+�� �9+�� �i�q�!�Q�!�Q�! 2�v�G�X�O�G�X�O�G�X��% �.��t��t��y�.�O�x�x��~�(�^�N�m�^�^"�T�X�'�5�y�}� � ����A�'0youtube� �x�x�'�^�^� �x�x�'�^�^z� �{�{�}�y�y�"�3�3�6�z�z� �{�{�}�y�y�"�3�3�6�z�zoom�x� � �x� � �1S ��!� � < � � � � M�a�� 2b��"�a�A )+53Code Example 1vuegetting-startednpm install motion-v["vue"]beginner2025-08-29 11:54:04�R�@ ++�kE3Code Example 10jsgetting-startedimport { animate, stagger } from "motion" animate( "li", { y: 0, opacity: 1 }, { delay: stagger(0.1) } )["js","animation","stagger"]advanced2025-08-29 11:54:04�2�? )+�'C%3Code Example 9jsgetting-startedanimate( element, { rotate: 90 }, { type: "spring", stiffness: 300 } );["js","animation","spring"]intermediate2025-08-29 11:54:04�0�> )+�51%3Code Example 8jsgetting-startedanimate( element, { scale: [0.4, 1] }, { ease: "circInOut", duration: 1.2 } );["js","animation"]intermediate2025-08-29 11:54:04�L�= )+�m1%3Code Example 7jsgetting-startedanimate( cube.rotation, { y: rad(360), z: rad(360) }, { duration: 10, repeat: Infinity, ease: "linear" } )["js","animation"]intermediate2025-08-29 11:54:04�j�< )+�)1%3Code Example 6jsgetting-started// CSS selector animate(".box", { rotate: 360 }) // Elements const boxes = document.querySelectorAll(".box") animate(boxes, { rotate: 360 })["js","animation"]intermediate2025-08-29 11:54:04w�; )+M13Code Example 5jsgetting-startedimport { animate } from "motion"["js","animation"]beginner2025-08-29 11:54:04�j�: )+�C3Code Example 4jsgetting-started<script src="https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js"></script> <script> const { animate, scroll } = Motion </script>["js","animation","scroll"]beginner2025-08-29 11:54:04�U�9 )+�uC3Code Example 3jsgetting-started<script type="module"> import { animate, scroll } from "https://cdn.jsdelivr.net/npm/motion@latest/+esm" </script>["js","animation","scroll"]beginner2025-08-29 11:54:04��8 )+]C3Code Example 2jsgetting-startedimport { animate, scroll } from "motion"["js","animation","scroll"]beginner2025-08-29 11:54:04]�7 )+13Code Example 1jsgetting-startednpm install motion["js"]beginner2025-08-29 11:54:04�H�6 ++�W7%3Code Example 12reactgetting-started<AnimatePresence> {show ? <motion.div key="box" exit={{ opacity: 0 }} /> : null} </AnimatePresence>["react","animation"]intermediate2025-08-29 11:54:04~�5 ++S13Code Example 11reactgetting-started<motion.div layoutId="underline" />["react","layout"]beginner2025-08-29 11:54:04p�4 ++713Code Example 10reactgetting-started<motion.div layout />["react","layout"]beginner2025-08-29 11:54:04�A�3 )+�Q1%3Code Example 9reactgetting-startedconst { scrollYProgress } = useScroll() return <motion.div style={{ scaleX: scrollYProgress }} />["react","scroll"]intermediate2025-08-29 11:54:04�d�2 )+�)%3Code Example 8reactgetting-started<motion.div initial={{ backgroundColor: "rgb(0, 255, 0)", opacity: 0 }} whileInView={{ backgroundColor: "rgb(255, 0, 0)", opacity: 1 }} />["react"]intermediate2025-08-29 11:54:04�a�1 )+�3%3Code Example 7reactgetting-started<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }} onHoverStart={() => console.log('hover started!')} />["react","gesture"]intermediate2025-08-29 11:54:04��0 )+}7%3Code Example 6reactgetting-started<motion.button initial={false} animate={{ scale: 1 }} />["react","animation"]intermediate2025-08-29 11:54:04�!�/ )+� 7%3Code Example 5reactgetting-started<motion.button initial={{ scale: 0 }} animate={{ scale: 1 }} />["react","animation"]intermediate2025-08-29 11:54:04�0�. )+�)7%3Code Example 4reactgetting-started<motion.div animate={{ scale: 2, transition: { duration: 2 } }} />["react","animation"]intermediate2025-08-29 11:54:04��- )+[7%3Code Example 3reactgetting-started<motion.ul animate={{ rotate: 360 }} />["react","animation"]intermediate2025-08-29 11:54:04v�, )+W3Code Example 2reactgetting-startedimport { motion } from "motion/react"["react"]beginner2025-08-29 11:54:04c�+ )+13Code Example 1reactgetting-startednpm install motion["react"]beginner2025-08-29 11:54:04 !!�W������2�00:�f7Eu�#7Eu�#7Eu�OI�/I�/I@�&4Q��_4Q��_4Q��>�im]R �}b9IeM H  s7�!m]R �}b9IeM H  s7�!m]R �}b9IeM H  s7�$�s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$�>�"�HR ��d9In V  v?�'�HR ��d9In V  v?�'�HR ��d9In V  v?<�A� �'W�p_� �'W�p_� �'W�p.�o� =�� =�� =4�GjvM4-� jvM4-� jvM4-F��2�g$� �2�g$� �2�g$N�)9w9,p %2;9w9,p %2;9w9,p %2<�|� �'b�nc� �'b�nc� �'b�n.��! ?�_�! ?�_�! ?.�kwI1�kwI1�kwI1j�P�<A- � �<A- � �<A- �J�|3 ;�N/%. "S%] !N;0#" #LI )&3 ;�N/%. "S%] !N;0#" #LI )&3 ;�N/%. "S%] !N;0#" #LI )&H�#* @ ^* @ ^* @ 0�f�&�i�&�i�&���X�X�J�43 ;�N/%. "S%] !N;0#" #LK +&3 ;�N/%. "S%] !N;0#" #LK +&3 ;�N/%. "S%] !N;0#" #LK +&B�@H S@H S@H d�J49+T�$49+T�$49+T:�OV�*�V�*�V�*:�f7Eu�#7Eu�#7Eu�OI�/I�/I@�&4Q��_4Q��_4Q��>�im]R �}b9IeM H  s7�!m]R �}b9IeM H  s7�!m]R �}b9IeM H  s7�$�s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$�>�"�HR ��d9In V  v?�'�HR ��d9In V  v?�'�HR ��d9In V  v?<�A� �'W�p_� �'W�p_� �'W�p.�o� =�� =�� =4�GjvM4-� jvM4-� jvM4-F��2�g$� �2�g$� �2�g$N�)9w9,p %2;9w9,p %2;9w9,p %2<�|� �'b�nc� �'b�nc� �'b�n.��! ?�_�! ?�_�! ?.�kwI1�kwI1�kwI1j�P�<A- � �<A- � �<A- �J�|3 ;�N/%. "S%] !N;0#" #LI )&3 ;�N/%. "S%] !N;0#" #LI )&3 ;�N/%. "S%] !N;0#" #LI )&H�#* @ ^* @ ^* @ 0�f�&�i�&�i�&���X�X�J�43 ;�N/%. "S%] !N;0#" #LK +&3 ;�N/%. "S%] !N;0#" #LK +&3 ;�N/%. "S%] !N;0#" #LK +&00�=�&��&��&����=�&��&��&1 �!���%�c�c�!���%�c�cf�~�3�3�Q���Y�c�c�C���~�3�3�Q���Y�c�c�C��1�W�3�3�6�G�G��F�;�F�;�F�@�F�C�F�C�F �W�3�3�6�G�G��F�;�F�;�F�@�F�C�F�C�F6 �## �##deg�7�y�y�p�z�z�7�y�y�p�z�zf0 �P���X�c�c �{�a�a �P���X�c�cpx��4�G�4�G�4�S<z�H<z�H<z�A�&�& ��4�G�4�G�4�S<z�H<z�H<z�A�&�&vh�o�y�y�(�z�z�o�y�y�(�z�z1(�iT�T�T.�f�mE�E�mE�E�mE(�)`�f`�f`��@�mW� `r! 5p G G/t�0�mW� `r! 5p G G/t�0�mW� `r! 5p G G/t�B�x�3D#X4�)/P/q/1i D( ;,   #<>"~�@�3D#X4�)/P/q/1i D( ;,   #<>"~�@�3D#X4�)/P/q/1i D( ;,   #<>"~��y�mW�(�br! 5n V.w�>�mW�(�br! 5n V.w�>�mW�(�br! 5n V.w@�:k� � x�Kk� � x�Kk� � x� �x�xL�J TZ�+� TZ�+� TZ�+.��1�n0�A�1�n0�A�1�n0"�P'�x'�x'@�uk� �$ x�Mk� �$ x�Mk� �$ x�)�^�^4�kZy�kZy�kZy"�]+�R+�R+�(�-%�)21�)�Z� H&c'& -%�)21�)�Z� H&c'& -%�)21�)�Z� H&c'&�}6� &I Z&I Z&I *��d�.�d�.�d�.��X�X�(�?-%�)21�)�Z� H&i)& -%�)21�)�Z� H&i)& -%�)21�)�Z� H&i)&$�"�t�t��P3�.3�.3�6�a�a(�iT�T�T.�f�mE�E�mE�E�mE(�)`�f`�f`��@�Y.+Sk-6d,n initial={{ opacity: 0 }}\n whileHover={{ backgroundColor: \"rgba(220, 220, 220, 1)\" }}\n whileTap={{ backgroundColor: \"rgba(255, 255, 255, 1)\" }}\n whileInView={{ opacity: 1 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","gesture"]},{"title":"Code Example 20","description":"","code":"<motion.div variants={variants} />","language":"react","difficulty":"beginner","tags":["react"]},{"title":"Code Example 21","description":"","code":"<motion.div\n variants={variants}\n initial=\"hidden\"\n whileInView=\"visible\"\n/>","language":"react","difficulty":"beginner","tags":["react"]},{"title":"Code Example 22","description":"","code":"animate={[\"visible\", \"danger\"]}","language":"react","difficulty":"beginner","tags":["react","animation"]},{"title":"Code Example 23","description":"","code":"const [status, setStatus] = useState<\"inactive\" | \"active\" | \"complete\">(\n \"inactive\"\n);\n\n<motion.div\n animate={status} // pass in our React state!\n variants={{\n inactive: { scale: 0.9 color: \"var(--gray-500)\" },\n active: { scale: 1 color: \"var(--blue-500)\" },\n complete: { scale: 1 color: \"var(--blue-500)\" }\n }}\n>\n <motion.svg\n path={checkmarkPath}\n variants={{\n inactive: { pathLength: 0 },\n active: { pathLength: 0 },\n complete: { pathLength: 1}\n }}\n />\n</motion.div>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 24","description":"","code":"const list = {\n visible: { opacity: 1 },\n hidden: { opacity: 0 },\n}\n\nconst item = {\n visible: { opacity: 1, x: 0 },\n hidden: { opacity: 0, x: -100 },\n}\n\nreturn (\n <motion.ul\n initial=\"hidden\"\n whileInView=\"visible\"\n variants={list}\n >\n <motion.li variants={item} />\n <motion.li variants={item} />\n <motion.li variants={item} />\n </motion.ul>\n)","language":"react","difficulty":"intermediate","tags":["react"]},{"title":"Code Example 25","description":"","code":"const list = {\n visible: {\n opacity: 1,\n transition: {\n when: \"beforeChildren\",\n delayChildren: stagger(0.3), // Stagger children by .3 seconds\n },\n },\n hidden: {\n opacity: 0,\n transition: {\n when: \"afterChildren\",\n },\n },\n}","language":"react","difficulty":"advanced","tags":["react","animation","stagger"]},{"title":"Code Example 26","description":"","code":"const variants = {\n hidden: { opacity: 0 },\n visible: (index) => ({\n opacity: 1,\n transition: { delay: index * 0.3 }\n })\n}","language":"react","difficulty":"intermediate","tags":["react","animation","stagger"]},{"title":"Code Example 27","description":"","code":"items.map((item, index) => <motion.div custom={index} variants={variants} />)","language":"react","difficulty":"beginner","tags":["react"]},{"title":"Code Example 28","description":"","code":"function MyComponent() {\n const [scope, animate] = useAnimate()\n\n useEffect(() => {\n const controls = animate([\n [scope.current, { x: \"100%\" }],\n [\"li\", { opacity: 1 }]\n ])\n\n controls.speed = 0.8\n\n return () => controls.stop()\n }, [])\n\n return (\n <ul ref={scope}>\n <li />\n <li />\n <li />\n </ul>\n )\n}","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 29","description":"","code":"import { useMotionValue, motion, animate } from \"motion/react\"\n\nfunction Counter() {\n const count = useMotionValue(0)\n\n useEffect(() => {\n const controls = animate(count, 100, { duration: 5 })\n return () => controls.stop()\n }, [])\n\n return <motion.pre>{count}</motion.pre>\n}","language":"react","difficulty":"intermediate","tags":["react","animation"]}]{"props":[],"methods":[{"name":"play","signature":"play()","description":"play method"},{"name":"pause","signature":"pause()","description":"pause method"}],"types":[]}["react","animations","animation","gesture","spring","drag","keyframes","stagger","motion","transition"]2025-08-29 11:54:052025-08-29 11:54:05$ue(0) useEffect(() \=> { const controls = animate(count, 100, { duration: 5 }) return () \=> controls.stop() }, \[\]) return <motion.pre\>{count}</motion.pre\> } ``` This is more performant than setting React state as the `motion` component will set `innerHTML` directly.[{"title":"Code Example 1","description":"","code":"import { motion } from \"motion/react\"","language":"react","difficulty":"beginner","tags":["react"]},{"title":"Code Example 2","description":"","code":"<motion.div animate={{ opacity: 1 }} />","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 3","description":"","code":"<motion.div\n initial={{ x: \"100%\" }}\n animate={{ x: \"calc(100vw - 50%)\" }}\n/>","language":"react","difficulty":"beginner","tags":["react","animation"]},{"title":"Code Example 4","description":"","code":"<motion.div\n initial={{ height: 0 }}\n animate={{ height: \"auto\" }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 5","description":"","code":"<motion.section style={{ x: -20 }} />","language":"react","difficulty":"beginner","tags":["react"]},{"title":"Code Example 6","description":"","code":"<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} />","language":"react","difficulty":"intermediate","tags":["react","gesture"]},{"title":"Code Example 7","description":"","code":"<motion.li\n initial={{ transform: \"translateX(-100px)\" }}\n animate={{ transform: \"translateX(0px)\" }}\n transition={{ type: \"spring\" }}\n/>","language":"react","difficulty":"beginner","tags":["react","animation","spring"]},{"title":"Code Example 8","description":"","code":"<motion.div style={{ originX: 0.5 }} />","language":"react","difficulty":"intermediate","tags":["react"]},{"title":"Code Example 9","description":"","code":"<motion.ul\n initial={{ '--rotate': '0deg' }}\n animate={{ '--rotate': '360deg' }}\n transition={{ duration: 2, repeat: Infinity }}\n>\n <li style={{ transform: 'rotate(var(--rotate))' }} />\n <li style={{ transform: 'rotate(var(--rotate))' }} />\n <li style={{ transform: 'rotate(var(--rotate))' }} />\n</motion.ul>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 10","description":"","code":"<motion.li animate={{ backgroundColor: \"var(--action-bg)\" }} />","language":"react","difficulty":"beginner","tags":["react","animation"]},{"title":"Code Example 11","description":"","code":"<motion.div\n animate={{ x: 100 }}\n transition={{ ease: \"easeOut\", duration: 2 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 12","description":"","code":"<motion.li\n initial={{ opacity: 0, scale: 0 }}\n animate={{ opacity: 1, scale: 1 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 13","description":"","code":"<motion.div initial={false} animate={{ y: 100 }} />","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 14","description":"","code":"<AnimatePresence>\n {isVisible && (\n <motion.div\n key=\"modal\"\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n />\n )}\n</AnimatePresence>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 15","description":"","code":"<motion.div animate={{ x: [0, 100, 0] }} />","language":"react","difficulty":"beginner","tags":["react","animation"]},{"title":"Code Example 16","description":"","code":"<motion.div animate={{ x: [null, 100, 0] }} />","language":"react","difficulty":"beginner","tags":["react","animation"]},{"title":"Code Example 17","description":"","code":"<motion.circle\n cx={500}\n animate={{\n cx: [null, 100, 200],\n transition: { duration: 3, times: [0, 0.2, 1] }\n }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 18","description":"","code":"<motion.button\'m: 'rotate(var(--rotate))' }} /> <li style\={{ transform: 'rotate(var(--rotate))' }} /> <li style\={{ transform: 'rotate(var(--rotate))' }} /> </motion.ul\> ``` **Note:** Animating the value of a CSS variable **always triggers paint**, therefore it can be more performant to use `[MotionValue](./react-motion-value)`[s](./react-motion-value) to setup this kind of animation. ### CSS variables as animation targets HTML `motion` components accept animation targets with CSS variables: ``` <motion.li animate\={{ backgroundColor: "var(--action-bg)" }} /> ``` Transitions ----------- By default, Motion will create appropriate transitions for snappy animations based on the type of value being animated. For instance, physical properties like `x` or `scale` are animated with spring physics, whereas values like `opacity` or `color` are animated with duration-based easing curves. However, you can define your own animations via [the](./react-transitions) `[transition](./react-transitions)` [prop](./react-transitions). ``` <motion.div animate\={{ x: 100 }} transition\={{ ease: "easeOut", duration: 2 }} /> ``` Enter animations ---------------- When a `motion` component is first created, it'll automatically animate to the values in `animate` if they're different from those initially rendered, which you can either do via CSS or via [the](./react-motion-value) `[initial](./react-motion-value)` [prop.](./react-motion-value) ``` <motion.li initial\={{ opacity: 0, scale: 0 }} animate\={{ opacity: 1, scale: 1 }} /> ``` You can also disable the enter animation entirely by setting `initial={false}`. This will make the element render with the values defined in `animate`. ``` <motion.div initial\={false} animate\={{ y: 100 }} /> ``` Exit animations --------------- You can also easily animate elements as they exit the DOM. In React, when a component is removed, it's usually removed instantly. Motion provides [the](./react-animate-presence) `[AnimatePresence](./react-animate-presence)` [component](./react-animate-presence) which keeps elements in the DOM while they perform an `exit` animation. ``` <AnimatePresence\> {isVisible && ( <motion.div key\="modal" initial\={{ opacity: 0 }} animate\={{ opacity: 1 }} exit\={{ opacity: 0 }} /> )} </AnimatePresence\> ``` Keyframes --------- Values in `animate` can be set as a series of keyframes. This will animate through each value in sequence. ``` <motion.div animate\={{ x: \[0, 100, 0\] }} /> ``` We can use a value's current state as the initial keyframe by setting it to `null`. ``` <motion.div animate\={{ x: \[null, 100, 0\] }} /> ``` This way, if a keyframe animation is interrupting another animation, the transition will feel more natural. By default, each keyframe is spaced naturally throughout the animation. You can override this by setting [the](./react-transitions#times) `[times](./react-transitions#times)` [option](./react-transitions#times) via `transition`. `times` is an array of progress values between `0` and `1`, defining where in the animation each keyframe should be positioned. ``` <motion.circle cx\={500} animate\={{ cx: \[null, 100, 200\], transition: { duration: 3, times: \[0, 0.2, 1\] } }} /> ``` Gesture animations ------------------ Motion for React has shortcut props for animating to/from a target when a gesture starts/ends. ``` <motion.button initial\={{ opacity: 0 }} whileHover\={{ backgroundColor: "rgba(220, 220, 220, 1)" }} whileTap\={{ backgroundColor: "rgba(255, 255, 255, 1)" }} whileInView\={{ opacity: 1 }} /> ``` It supports `hover`, `tap`, `drag`, `focus` and `inView`. Variants -------- Setting `animate` as a target is useful for simple, single-element animations. But sometimes we want to orchestrate animations that propagate throughout the DOM. We can do so with variants. Variants are a set of named targets. ``` const variants = { visible: { opacity: 1 }, hidden: { opacity: 0 }, } ``` They're passed to `motion` components via the `variants` prop: ``` <motion.div varia%nts\={variants} /> ``` These variants can now be referred to by a label, wherever you can define an animation target: ``` <motion.div variants\={variants} initial\="hidden" whileInView\="visible" /> ``` You can also define multiple variants via an array: ``` animate\={\["visible", "danger"\]} ``` > _I love using variants alongside React state – just pass your state to_ `_animate_`_, and now you've got a tidy place to define all your animation targets!_ > > ``` > const \[status, setStatus\] = useState<"inactive" | "active" | "complete"\>( > "inactive" > ); > > <motion.div > animate\={status} // pass in our React state! > variants\={{ > inactive: { scale: 0.9 color: "var(--gray-500)" }, > active: { scale: 1 color: "var(--blue-500)" }, > complete: { scale: 1 color: "var(--blue-500)" } > }} > \> > <motion.svg > path\={checkmarkPath} > variants\={{ > inactive: { pathLength: 0 }, > active: { pathLength: 0 }, > complete: { pathLength: 1} > }} > /> > </motion.div\> > ``` > > ~ Sam Selikoff, [Motion for React Recipes](https://buildui.com/courses/framer-motion-recipes) ### Propagation This is already useful for reusing and combining animation targets. But it becomes powerful for orchestrating animations throughout trees. Variants will flow down through `motion` components. So in this example when the `ul` enters the viewport, all of its children with a "visible" variant will also animate in: ``` const list = { visible: { opacity: 1 }, hidden: { opacity: 0 }, } const item = { visible: { opacity: 1, x: 0 }, hidden: { opacity: 0, x: -100 }, } return ( <motion.ul initial\="hidden" whileInView\="visible" variants\={list} \> <motion.li variants\={item} /> <motion.li variants\={item} /> <motion.li variants\={item} /> </motion.ul\> ) ``` ### Orchestration By default, this children animations will start simultaneously with the parent. But with variants we gain access to new `transition` props `[when](./react-transitions#orchestration)` [and](./react-transitions#orchestration) `[delayChildren](./react-transitions#orchestration)`. ``` const list = { visible: { opacity: 1, transition: { when: "beforeChildren", delayChildren: stagger(0.3), // Stagger children by .3 seconds }, }, hidden: { opacity: 0, transition: { when: "afterChildren", }, }, } ``` ### Dynamic variants Each variant can be defined as a function that resolves when a variant is made active. ``` const variants = { hidden: { opacity: 0 }, visible: (index) \=> ({ opacity: 1, transition: { delay: index \* 0.3 } }) } ``` These functions are provided a single argument, which is passed via the `custom` prop: ``` items.map((item, index) \=> <motion.div custom\={index} variants\={variants} />) ``` This way, variants can be resolved differently for each animating element. Animation controls ------------------ Declarative animations are ideal for most UI interactions. But sometimes we need to take manual control over animation playback. The `[useAnimate](./react-use-animate)` [hook](./react-use-animate) can be used for: * Animating any HTML/SVG element (not just `motion` components). * Complex animation sequences. * Controlling animations with `time`, `speed`, `play()`, `pause()` and other playback controls. ``` function MyComponent() { const \[scope, animate\] = useAnimate() useEffect(() \=> { const controls = animate(\[ \[scope.current, { x: "100%" }\], \["li", { opacity: 1 }\] \]) controls.speed = 0.8 return () \=> controls.stop() }, \[\]) return ( <ul ref\={scope}\> <li /> <li /> <li /> </ul\> ) } ``` Animate content --------------- By passing [a](./react-motion-value) `[MotionValue](./react-motion-value)` as the child of a `motion` component, it will render its latest value in the HTML. ``` import { useMotionValue, motion, animate } from "motion/react" function Counter() { const count = useMotionVal6 animate the value of CSS variables, and also use CSS variables as animation targets. #### Animating CSS variables Sometimes it's convenient to be able to animate a CSS variable to animate many children: ``` <motion.ul :initial\="{ '--rotate': '0deg' }" :animate\="{ '--rotate': '360deg' }" :transition\="{ duration: 2, repeat: Infinity }" \> <li :style\="{ transform: 'rotate(var(--rotate))' }" /> <li :style\="{ transform: 'rotate(var(--rotate))' }" /> <li :style\="{ transform: 'rotate(var(--rotate))' }" /> </motion.ul\> ``` **Note:** Animating the value of a CSS variable **always triggers paint**, therefore it can be more performant to use `[MotionValue](./vue-motion-value)`[s](./vue-motion-value) to setup this kind of animation. ### CSS variables as animation targets HTML `motion` components accept animation targets with CSS variables: ``` <motion.li :animate\="{ backgroundColor: 'var(--action-bg)' }" /> ``` #### SVG line drawing Line drawing animations can be created with many different SVG elements using three special properties: `pathLength`, `pathSpacing` and `pathOffset`. ``` <motion.path :initial\="{ pathLength: 0 }" :animate\="{ pathLength: 1 }" /> ``` All three are set as a progress value between `0` and `1`, `1` representing the total length of the path. Path animations are compatible with `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline` and `rect` elements. Transitions ----------- By default, Motion will create appropriate transitions for snappy animations based on the type of value being animated. For instance, physical properties like `x` or `scale` are animated with spring physics, whereas values like `opacity` or `color` are animated with duration-based easing curves. However, you can define your own animations via [the](./vue-transitions) `[transition](./vue-transitions)` [prop](./vue-transitions). ``` <motion.div :animate\="{ x: 100 }" :transition\="{ ease: 'easeOut', duration: 2 }" /> ``` Enter animations ---------------- When a `motion` component is first created, it'll automatically animate to the values in `animate` if they're different from those initially rendered, which you can either do via CSS or via [the](./vue-motion-component) `[initial](./vue-motion-component)` [prop.](./vue-motion-component) ``` <motion.li :initial\="{ opacity: 0, scale: 0 }" :animate\="{ opacity: 1, scale: 1 }" /> ``` You can also disable the enter animation entirely by setting `:initial="false"`. This will make the element render with the values defined in `animate`. ``` <motion.div :initial\="false" :animate\="{ y: 100 }" /> ``` Exit animations --------------- You can also easily animate elements as they exit the DOM. In Vue, when a component is removed, it's usually removed instantly. Motion provides [the](./vue-animate-presence) `[AnimatePresence](./vue-animate-presence)` [component](./vue-animate-presence) which keeps elements in the DOM while they perform an `exit` animation. ``` <AnimatePresence\> <motion.div v-if\="isVisible" key\="modal" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" /> </AnimatePresence\> ``` Keyframes --------- Values in `animate` can be set as a series of keyframes. This will animate through each value in sequence. ``` <motion.div :animate\="{ x: \[0, 100, 0\] }" /> ``` We can use a value's current state as the initial keyframe by setting it to `null`. ``` <motion.div :animate\="{ x: \[null, 100, 0\] }" /> ``` This way, if a keyframe animation is interrupting another animation, the transition will feel more natural. By default, each keyframe is spaced naturally throughout the animation. You can override this by setting [the](./vue-transitions#times) `[times](./vue-transitions#times)` [option](./vue-transitions#times) via `transition`. `times` is an array of progress values between `0` and `1`, defining where in the animation each keyframe should be positioned. ``` <motion.circle :cx\="500" :animate\="{ cx: \[null, 100, 200\], transition={{ duration: 3*much in the same way as HTML & SVG elements. ``` const values = { x: 100, color: "#f00" } animate(values, { x: 200, color: "#00f" }) ``` Any object can be animated, for instance an `Object3D` from [Three.js](https://threejs.org): ``` const camera = new THREE.Camera() animate(camera.rotation, { y: 360 }, { duration: 10 }) ``` ### Timeline sequences The **hybrid** `animate` function can also accept complex animation sequences. ``` const sequence = \[\] animate(sequence) ``` A **sequence** is an array of `animate` definitions: ``` const sequence = \[ \["ul", { opacity: 1 }, { duration: 0.5 }\], \["li", 100, { ease: "easeInOut" }\] \] ``` Each definition will, by default, play one after the other. It's possible to change when a segment will play by passing [an](https://motion.dev/docs/animate#at) `[at](https://motion.dev/docs/animate#at)` [option](https://motion.dev/docs/animate#at), which can be either an absolute time, relative time, or label. ``` const sequence = \[ \["ul", { opacity: 1 }\], \["li", { x: \[\-100, 0\] }, { at: 1 }\] \] ``` Each segment can accept all `animate` [options](https://motion.dev/docs/animate#options) (except `repeatDelay` and `repeatType`) to control the duration and other animation settings of that segment. ``` const sequence = \[ \["ul", { opacity: 1 }, { duration: 1 }\] \] ``` Both `type: "keyframes"` and `type: "spring"` transitions are supported. It's also possible to override transitions for each value individually. ``` const sequence = \[ \[ "ul", { opacity: 1, x: 100 }, { duration: 1, x: { duration: 2 }} \] \] ``` Sequence durations are automatically calculated, but it's also possible to pass any `animate` [option](../#options) to change playback as a whole: ``` animate(sequence, { duration: 10, repeat: 2 }) ``` You can also define default transition settings to be passed to all items in the sequence with the `defaultTransition` option: ``` animate(sequence, { defaultTransition: { duration: 0.2 } }) ``` Any value supported by `animate` can be animated in sequences, mixing HTML & SVGs, motion values and objects in the same animation: ``` const color = motionValue("rgba(255, 0, 0, 1)") const box = new THREE.BoxGeometry() const sequence = \[ \["li", { x: 100 }\], \[box.position, { y: 10 }\], \[color, "#444"\] \] ``` ### Stagger When animating more than one element, it's possible to stagger animations by passing the `[stagger](./stagger)` function to `delay`. ``` import { stagger, animate } from "motion" animate(".item", { x: 300 }, { delay: stagger(0.1) }) ``` Options ------- Animations can be configured with transition options. By default, provided options will affect every animating value. ``` animate( element, { x: 100, rotate: 0 }, { duration: 1 } ) ``` By providing named transitions, these can be overridden on a per-value basis: ``` animate( element, { x: 100, rotate: 0 }, { duration: 1, rotate: { duration: 0.5, ease: "easeOut" } } ) ``` #### `type` `type` decides the type of animation to use. **Mini** `animate` can either animate with the default keyframes animation, or `spring`: ``` import { animate } from "motion/mini" import { spring } from "motion" animate( element, { transform: "translateX(100px)" }, { type: spring, stiffness: 300 } ) ``` **Hybrid** `animate` has all animation types built-in, and can be set to `"tween"`, `"spring"` or `"inertia"`. **Tween** animations are set with a duration and an easing curve. **Spring** animations are either physics-based or duration-based. Physics-based spring animations are set via `stiffness`, `damping` and `mass`, and these incorporate the velocity of any existing gestures or animations for natural feedback. Duration-based spring animations are set via a `duration` and `bounce`. These don't incorporate velocity but are easier to understand. **Inertia** animations decelerate a value based on its initial velocity, usually used to implement inertial scrolling. ``` animate("path", { pathLength: 1 }, { duration: 2, type: "tween" ,}) ``` ### Tween #### `duration` **Default:** `0.3` (or `0.8` if multiple keyframes are defined) The duration of the animation. Can also be used for `"spring"` animations when `bounce` is also set. ``` animate("ul > li", { opacity: 1 }, { duration: 1 }) ``` #### `ease` The easing function to use with tween animations. Accepts: * Easing function name. E.g `"linear"` * An array of four numbers to define a cubic bezier curve. E.g `[.17,.67,.83,.67]` * A JavaScript easing function, that accepts and returns a value `0`\-`1`. These are the available easing function names: * `"linear"` * `"easeIn"`, `"easeOut"`, `"easeInOut"` * `"circIn"`, `"circOut"`, `"circInOut"` * `"backIn"`, `"backOut"`, `"backInOut"` * `"anticipate"` When animating keyframes, `ease` can optionally be set as an array of easing functions to set different easings between each value: ``` animate( element, { x: \[0, 100, 0\] }, { ease: \["easeIn", "easeOut"\] } ) ``` #### `times` When animating multiple keyframes, `times` can be used to adjust the position of each keyframe throughout the animation. Each value in `times` is a value between `0` and `1`, representing the start and end of the animation. ``` animate( element, { x: \[0, 100, 0\] }, { times: \[0, 0.3, 1\] } ) ``` There must be the same number of `times` as there are keyframes. Defaults to an array of evenly-spread durations. ### Spring TimePhysics Duration Bounce Use visual duration #### `bounce` **Default:** `0.25` `bounce` determines the "bounciness" of a spring animation. `0` is no bounce, and `1` is extremely bouncy. **Note:** `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set. ``` animate( "section", { rotateX: 90 }, { type: "spring", bounce: 0.25 } ) ``` #### `visualDuration` If `visualDuration` is set, this will override `duration`. The visual duration is a time, **set in seconds**, that the animation will take to visually appear to reach its target. In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after. This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations. ``` animate( "section", { rotateX: 90 }, { type: "spring", visualDuration: 0.5, bounce: 0.25 } ) ``` #### `stiffness` **Default:** `1` Stiffness of the spring. Higher values will create more sudden movement. ``` animate( "section", { rotate: 180 }, { type: "spring", stiffness: 50 } ) ``` #### `damping` **Default:** `10` Strength of opposing force. If set to 0, spring will oscillate indefinitely. ``` animate( "section", { rotate: 180 }, { type: "spring", damping: 300 } ) ``` #### `mass` **Default:** `1` Mass of the moving object. Higher values will result in more lethargic movement. ``` animate( "feTurbulence", { baseFrequency: 0.5 }, { type: "spring", mass: 0.5 } ) ``` #### `velocity` **Default:** Current value velocity The initial velocity of the spring. ``` animate( ".my-element", { rotate: 180 }, { type: "spring", velocity: 2 } ) ``` #### `restSpeed` **Default:** `0.1` End animation if absolute speed (in units per second) drops below this value and delta is smaller than `restDelta`. ``` animate( ".my-element", { rotate: 180 }, { type: "spring", restSpeed: 2 } ) ``` #### `restDelta` **Default:** `0.01` End animation if distance is below this value and speed is below `restSpeed`. When animation ends, the spring will end. ``` animate( ".my-element", { x: 200 }, { type: "spring", restDelta: 0.5 } ) ``` ### Orchestration #### `delay` **Default:** `0` Delay the animation by this duration (in seconds). ``` animate(element, { filter: "blur(10px)" }, { delay: 0.3 }) ``` By setting `delay` to a negative value, the animation will start that long into the animation. For instance to start 1 second in, `delay` can be set to -`1`. #### `repeat` **Default:** `0` The number of times to repeat the transition. Set to `Infi Gl �  c � $ @ Yh�|�C�h�N\�G��W )!�7%3Code Example 9reactanimations<motion.ul initial={{ '--rotate': '0deg' }} animate={{ '--rotate': '360deg' }} transition={{ duration: 2, repeat: Infinity }} > <li style={{ transform: 'rotate(var(--rotate))' }} /> <li style={{ transform: 'rotate(var(--rotate))' }} /> <li style={{ transform: 'rotate(var(--rotate))' }} /> </motion.ul>["react","animation"]intermediate2025-08-29 11:54:05w�V )![%3Code Example 8reactanimations<motion.div style={{ originX: 0.5 }} />["react"]intermediate2025-08-29 11:54:05�n�U )!�%I3Code Example 7reactanimations<motion.li initial={{ transform: "translateX(-100px)" }} animate={{ transform: "translateX(0px)" }} transition={{ type: "spring" }} />["react","animation","spring"]beginner2025-08-29 11:54:05�"�T )!�3%3Code Example 6reactanimations<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} />["react","gesture"]intermediate2025-08-29 11:54:05q�S )!W3Code Example 5reactanimations<motion.section style={{ x: -20 }} />["react"]beginner2025-08-29 11:54:05�$�R )!�7%3Code Example 4reactanimations<motion.div initial={{ height: 0 }} animate={{ height: "auto" }} />["react","animation"]intermediate2025-08-29 11:54:05�(�Q )!�+73Code Example 3reactanimations<motion.div initial={{ x: "100%" }} animate={{ x: "calc(100vw - 50%)" }} />["react","animation"]beginner2025-08-29 11:54:05��P )![7%3Code Example 2reactanimations<motion.div animate={{ opacity: 1 }} />["react","animation"]intermediate2025-08-29 11:54:05q�O )!W3Code Example 1reactanimationsimport { motion } from "motion/react"["react"]beginner2025-08-29 11:54:05�A�N ++�Q3%3Code Example 14vuegetting-started<AnimatePresence> <motion.div v-if="show" key="box" :exit="{ opacity: 0 }" /> </AnimatePresence>["vue","animation"]intermediate2025-08-29 11:54:04z�M ++S-3Code Example 13vuegetting-started<motion.div layoutId="underline" />["vue","layout"]beginner2025-08-29 11:54:04l�L ++7-3Code Example 12vuegetting-started<motion.div layout />["vue","layout"]beginner2025-08-29 11:54:04�m�K ++�/-%3Code Example 11vuegetting-started<script setup > const { scrollYProgress } = useScroll() </script> <template> <motion.div :style="{ scaleX: scrollYProgress }" /> </template>["vue","scroll"]intermediate2025-08-29 11:54:04�c�J ++�-%3Code Example 10vuegetting-started<motion.div :initial="{ backgroundColor: 'rgb(0, 255, 0)', opacity: 0 }" :whileInView="{ backgroundColor: 'rgb(255, 0, 0)', opacity: 1 }" />["vue"]intermediate2025-08-29 11:54:04�`�I )+�/%3Code Example 9vuegetting-started<motion.button :whileHover="{ scale: 1.1 }" :whilePress="{ scale: 0.95 }" @hoverStart="() => console.log('hover started!')" />["vue","gesture"]intermediate2025-08-29 11:54:04��H )+�3%3Code Example 8vuegetting-started<motion.button :initial="false" :animate="{ scale: 1 }" />["vue","animation"]intermediate2025-08-29 11:54:04��G )+�3%3Code Example 7vuegetting-started<motion.button :initial="{ scale: 0 }" :animate="{ scale: 1 }" />["vue","animation"]intermediate2025-08-29 11:54:04�-�F )+�+3%3Code Example 6vuegetting-started<motion.div :animate="{ scale: 2, transition: { duration: 2 } }" />["vue","animation"]intermediate2025-08-29 11:54:04��E )+]3%3Code Example 5vuegetting-started<motion.ul :animate="{ rotate: 360 }" />["vue","animation"]intermediate2025-08-29 11:54:04t�D )+[3Code Example 4vuegetting-started<template> <motion.div /> </template>["vue"]beginner2025-08-29 11:54:04�T�C )+�%3Code Example 3vuegetting-startedimport Components from 'unplugin-vue-components/vite' import MotionResolver from 'motion-v/resolver' export default defineConfig({ plugins: [ vue(), Components({ dts: true, resolvers: [ MotionResolver() ], }), ], })["vue"]intermediate2025-08-29 11:54:04��B )+�3Code Example 2vuegetting-startedexport default defineNuxtConfig({ modules: ['motion-v/nuxt'], })["vue"]beginner2025-08-29 11:54:04-nity` for perpetual animation. ``` animate( element, { backgroundColor: "#fff" }, { repeat: Infinity, duration: 2 } ) ``` #### `repeatType` **Default:** `"loop"` How to repeat the animation. This can be either: * `loop`: Repeats the animation from the start. * `reverse`: Alternates between forward and backwards playback. * `mirror`: Switches animation origin and target on each iteration. ``` animate( element, { backgroundColor: "#fff" }, { repeat: 1, repeatType: "reverse", duration: 2 } ) ``` #### `repeatDelay` **Default:** `0` **Note:** Not available in `animate` mini. When repeating an animation, `repeatDelay` will set the duration of the time to wait, in seconds, between each repetition. ``` animate( element, { backgroundColor: "#fff" }, { repeat: 1, repeatDelay: 1 } ) ``` #### `at` When defining animations as part of a larger sequence, each definition will start one after the other: ``` const sequence = \[ \["ul", { opacity: 1 }\], // This will start when ul opacity is 1 \["li", { x: \[\-100, 0\] }\] \] ``` By passing `at`, this behaviour can be changed. `at` can change the time to: * A specific time * A labelled time * The start of the previous animation * Time relative to start or end of previous animation ##### Specific time Set as a number to define a specific time (in seconds): ``` const sequence = \[ \["nav", { opacity: 1 }\], // This will start 0.5 from the start of the whole animation: \["nav", { x: 100 }, { at: 0.5 }\], \] ``` ##### Labelled time Set as a label name to start at the same point as the label definition: ``` const sequence = \[ \["nav", { x: 100 }, { duration: 1 }\], "my-label", // label definition \["li", { opacity: 1 }\], // my-label was defined at 1 second \["a", { scale: 1.2 }, { at: "my-label" }\], \] ``` ##### Start of previous animation Pass `"<"` to start at the same time as the previous segment: ``` const sequence = \[ \["nav", { x: 100 }, { duration: 1 }\], // This will start at the same time as the x: 100 animation \["li", { opacity: 1 }, { at: "<" }\], \] ``` ##### Relative to end of previous animation Pass a string starting with `+` or `-` to start relative to the end of the previous animation: ``` const sequence = \[ \["nav", { opacity: 1 }, { duration: 1 }\], // 0.5 seconds after the previous animation (1.5 secs): \["nav", { x: 100 }, { at: "+0.5" }\], // 0.2 seconds before the end of the previous animation: \["nav li", { opacity: 1 }, { at: "-0.2" }\], \] ``` ##### Relative to start of previous animation Pass a string starting with `<+` or `<-` to start relative to the start of the previous animation: ``` const sequence = \[ \["nav", { opacity: 1 }\], // 0.5 seconds after the start animation (0.5 secs): \["nav", { x: 100 }, { at: "<0.5" }\], // 0.2 seconds before the start of the previous animation (0.3 secs): \["nav li", { opacity: 1 }, { at: "<-0.2" }\], \] ``` #### `onUpdate` A function that's provided the latest animation values. **Note:** Currently for single value and motion value animations only. ``` animate("#fff", "#000", { duration: 2 onUpdate: latest \=> console.log(latest) }) ``` Controls -------- `animate()` returns animation playback controls. These can be used to pause, play, cancel, change playback speed and more. ``` const animation = animate(element, { opacity: 1 }) animation.time = 0.5 animation.stop() ``` ### `duration` Returns the duration of the animation. This is the duration of a single iteration of the animation, without delay or repeat options. It is **read-only**. ``` const animation = animate(element, { opacity: 0 }) const duration = animation.duration ``` ### `time` Gets and sets the current time of the animation. ``` const animation = animate(x, 100, { duration: 1 }) // Set animation time to 0.5 seconds animation.time = 0.5 // Get animation time console.log(animation.time) // 0.5 ``` ### `speed` Gets and sets the current playback speed of the animation.. * `1` is normal rate. * `0.5` is half rate. * `2` doubles the playback rate. * `-1` reverses playback. ``` const animation = animate(element, { opacity: 0 }) const currentSpeed = animation.speed // Double current speed animation.speed = currentSpeed \* 2 ``` ### `then()` A `Promise`\-like API that resolves when the animation finishes: ``` const animation = animate(element, { opacity: 0 }) // Async/await await animation console.log("Animation complete") // Promise animation.then(() \=> { console.log("Animation complete") }) ``` **Note:** When an animation finishes, a new `Promise` is created. If the animation is then replayed via the `play()` method, any old callbacks won't fire again. ### `pause()` Pauses the animation until resumed with `play()`. ``` const animation = animate(element, { opacity: 0 }) animation.pause() ``` ### `play()` Plays an animation. * If an animation is **paused**, it will resume from its current `time`. * If an animation has **finished**, it will restart. ``` animation.pause() // Will resume from 1 second animation.time = 1 animation.play() // Will play from start await animation animation.play() ``` ### `complete()` Immediately completes the animation, running it to the end state. ``` animation.complete() ``` ### `cancel()` Cancels the animation, reverting it to the initial state. ``` const animation = animate(element, { opacity: 0 }) animation.cancel() ``` ### `stop()` Stops the animation. Any values being animated via the Web Animations API will be committed to the element via `style`. Stopped animations cannot be restarted. ``` const animation = animate(element, { opacity: 0 }) animation.stop() ```[{"title":"Code Example 1","description":"","code":"animate(\"li\", { opacity: 0 })","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 2","description":"","code":"// Hybrid\nimport { animate } from \"motion\"\n\n// Mini\nimport { animate } from \"motion/mini\"","language":"javascript","difficulty":"beginner","tags":["js","animation"]},{"title":"Code Example 3","description":"","code":"// Element(s)\nconst box = document.getElementById(\"box\")\n\nanimate(box, { opacity: 0 }, { duration: 0.5 })\n\n// CSS selectors\nanimate(\"div\", { opacity: 0 }, { duration: 0.5 })","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 4","description":"","code":"animate(\"div\", { rotate: 360 })","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 5","description":"","code":"animate(element, { \"--rotate\": \"360deg\" })","language":"javascript","difficulty":"beginner","tags":["js","animation"]},{"title":"Code Example 6","description":"","code":"animate(\"circle\", { pathLength: [0, 1] })","language":"javascript","difficulty":"beginner","tags":["js","animation"]},{"title":"Code Example 7","description":"","code":"// Numbers\nanimate(0, 100, {\n onUpdate: latest => console.log(latest)\n})\n\n// Colors\nanimate(\"#fff\", \"#000\", {\n duration: 2\n onUpdate: latest => console.log(latest)\n})","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 8","description":"","code":"const x = motionValue(0)\n\nanimate(x, 200, { duration: 0.5 })","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 9","description":"","code":"const values = {\n x: 100,\n color: \"#f00\"\n}\n\nanimate(values, { x: 200, color: \"#00f\" })","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 10","description":"","code":"const camera = new THREE.Camera()\n\nanimate(camera.rotation, { y: 360 }, { duration: 10 })","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 11","description":"","code":"const sequence = []\n\nanimate(sequence)","language":"javascript","difficulty":"beginner","tags":["js","animation","timeline"]},{"title"/:"Code Example 16","description":"","code":"animate(sequence, { duration: 10, repeat: 2 })","language":"javascript","difficulty":"intermediate","tags":["js","animation","timeline"]},{"title":"Code Example 17","description":"","code":"animate(sequence, {\n defaultTransition: { duration: 0.2 }\n})","language":"javascript","difficulty":"intermediate","tags":["js","animation","timeline"]},{"title":"Code Example 18","description":"","code":"const color = motionValue(\"rgba(255, 0, 0, 1)\")\nconst box = new THREE.BoxGeometry()\n\nconst sequence = [\n [\"li\", { x: 100 }],\n [box.position, { y: 10 }],\n [color, \"#444\"]\n]","language":"javascript","difficulty":"intermediate","tags":["js","timeline"]},{"title":"Code Example 19","description":"","code":"import { stagger, animate } from \"motion\"\n\nanimate(\".item\", { x: 300 }, { delay: stagger(0.1) })","language":"javascript","difficulty":"advanced","tags":["js","animation","stagger"]},{"title":"Code Example 20","description":"","code":"animate(\n element,\n { x: 100, rotate: 0 },\n { duration: 1 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 21","description":"","code":"animate(\n element,\n { x: 100, rotate: 0 },\n {\n duration: 1,\n rotate: { duration: 0.5, ease: \"easeOut\" }\n }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 22","description":"","code":"import { animate } from \"motion/mini\"\nimport { spring } from \"motion\"\n\nanimate(\n element,\n { transform: \"translateX(100px)\" },\n { type: spring, stiffness: 300 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation","spring"]},{"title":"Code Example 23","description":"","code":"animate(\"path\", { pathLength: 1 }, { duration: 2, type: \"tween\" })","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 24","description":"","code":"animate(\"ul > li\", { opacity: 1 }, { duration: 1 })","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 25","description":"","code":"animate(\n element,\n { x: [0, 100, 0] },\n { ease: [\"easeIn\", \"easeOut\"] }\n)","language":"javascript","difficulty":"beginner","tags":["js","animation"]},{"title":"Code Example 26","description":"","code":"animate(\n element,\n { x: [0, 100, 0] },\n { times: [0, 0.3, 1] }\n)","language":"javascript","difficulty":"beginner","tags":["js","animation"]},{"title":"Code Example 27","description":"","code":"animate(\n \"section\",\n { rotateX: 90 },\n { type: \"spring\", bounce: 0.25 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation","spring"]},{"title":"Code Example 28","description":"","code":"animate(\n \"section\",\n { rotateX: 90 },\n { type: \"spring\", visualDuration: 0.5, bounce: 0.25 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation","spring"]},{"title":"Code Example 29","description":"","code":"animate(\n \"section\",\n { rotate: 180 },\n { type: \"spring\", stiffness: 50 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation","spring"]},{"title":"Code Example 30","description":"","code":"animate(\n \"section\",\n { rotate: 180 },\n { type: \"spring\", damping: 300 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation","spring"]},{"title":"Code Example 31","description":"","code":"animate(\n \"feTurbulence\",\n { baseFrequency: 0.5 },\n { type: \"spring\", mass: 0.5 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation","spring"]},{"title":"Code Example 32","description":"","code":"animate(\n \".my-element\",\n { rotate: 180 },\n { type: \"spring\", velocity: 2 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation","spring"]},{"title":"Code Example 33","description":"","code":"animate(\n \".my-element\",\n { rotate: 180 },\n { type: \"spring\", restSpeed: 2 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation","spring"]},{"title":"Code Example 34","description":"","code":"animate(\n \".my-element\",\n { x: 200 },\n { type: \"spring\", restDelta: 0.5 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation","spring"]},{"title":"Code Example 35","description":"","code":"animate(element, { filter: \"blur(10px)\" }, { delay: 0.3 })","language":"javascript","difficulty":"intermediate","tags":["js","animation","stagger"]},{"title":"Code Example 36","description":"","code":"animate(\n element,\n { backgroundColor: \"#fff\" },\n { repeat: Infinity, duration: 2 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 37","description":"","code":"animate(\n element,\n { backgroundColor: \"#fff\" },\n { repeat: 1, repeatType: \"reverse\", duration: 2 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 38","description":"","code":"animate(\n element,\n { backgroundColor: \"#fff\" },\n { repeat: 1, repeatDelay: 1 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation","stagger"]},{"title":"Code Example 45","description":"","code":"animate(\"#fff\", \"#000\", {\n duration: 2\n onUpdate: latest => console.log(latest)\n})","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 46","description":"","code":"const animation = animate(element, { opacity: 1 })\n\nanimation.time = 0.5\nanimation.stop()","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 47","description":"","code":"const animation = animate(element, { opacity: 0 })\n\nconst duration = animation.duration","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 48","description":"","code":"const animation = animate(x, 100, { duration: 1 })\n\n// Set animation time to 0.5 seconds\nanimation.time = 0.5\n\n// Get animation time\nconsole.log(animation.time) // 0.5","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 49","description":"","code":"const animation = animate(element, { opacity: 0 })\n\nconst currentSpeed = animation.speed\n\n// Double current speed\nanimation.speed = currentSpeed * 2","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 50","description":"","code":"const animation = animate(element, { opacity: 0 })\n\n// Async/await\nawait animation\nconsole.log(\"Animation complete\")\n\n// Promise\nanimation.then(() => {\n console.log(\"Animation complete\")\n})","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 51","description":"","code":"const animation = animate(element, { opacity: 0 })\nanimation.pause()","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 54","description":"","code":"const animation = animate(element, { opacity: 0 })\nanimation.cancel()","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 55","description":"","code":"const animation = animate(element, { opacity: 0 })\nanimation.stop()","language":"javascript","difficulty":"intermediate","tags":["js","animation"]}]{"props":[],"methods":[{"name":"animate","signature":"animate()","description":"animate method"},{"name":"then","signature":"then()","description":"then method"},{"name":"play","signature":"play()","description":"play method"},{"name":"pause","signature":"pause()","description":"pause method"},{"name":"complete","signature":"complete()","description":"complete method"},{"name":"cancel","signature":"cancel()","description":"cancel method"},{"name":"stop","signature":"stop()","description":"stop method"}],"types":[]}["js","animations","animate","animation","gesture","scroll","spring","keyframes","timeline","stagger","motion","transition"]2025-08-29 11:54:052025-08-29 11:54:05  ) )�X@CK+�=�;� �I33https://motion.dev/docs/vueGet started with Motion for Vuevuegetting-startedLearn Motion for Vue animation library: Install, animate HTML and SVG elements with spring animations, staggering effects. Complete guide with examples.Motion for Vue is a simple yet limitless animation library. It's the only animation library with a **hybrid engine**, capable of hardware accelerated animations. In this guide, we'll learn how to install Motion Vue and take a whirlwind tour of its main features. Install ------- Motion is available via npm: ``` npm install motion\-v ``` ### Nuxt modules Motion Vue offers Nuxt modules support. In `nuxt.config.ts`, simply add `motion-v/nuxt` into the modules, and it will auto-im��o?S;+�1�y�)�g �W33https://motion.dev/docs/quick-startGet started with Motionjsgetting-startedLearn Motion animation library: Install, animate HTML/SVG/WebGL elements with spring animations, staggering effects. Complete guide with examples.Motion is an animation library that's easy to start and fun to master. Its unique hybrid engine combines the performance of the browser with the limitless potential of a JavaScript engine. This means you can animate anything, like: * **HTML/C` %%�VȟS������*�00Sp3 ;�N/%. "S%] !N;0#" #LK +&1S �F1S:-%�)21�)�Z� H&i)&0S �3�Z0S % m�d�5#"#pxS�<7S�r80S�D6A#%�y/$2S3�Z��#�1Y00S�u5S �2,V3S�4�#E�)00S�I4S �3�&5S�4{%�20S�}� 0S�i67S �s700S�`1S8S�&�3S�t90S �VSaSD0-G31] K2;4.-I{ +& �<�WebsoluteS�D ccelerationS�BptsS �^!rossS �YddS�4justS�qingS�affectingS�msS �q$terS��P childrenS �bgainstS �-$llSaowsS�1soS�C �sternatesS� waysS�nS�T�<� �]�+$dS8:�~BG9 DK'/>� imateS:#@"� 0adGSA#%�A:/$G@dSYingS I�GTonST2 ���09�:$ z%Z  $ sS>�M  ;��?w �6 6ticipateS�yS 7�<ppS�6earS�vreS�N 3L�!.rayS�f<� sS��x�!tS�C utomaticallyS �#[vailableS�backinS�outS�outS�wardsS�sedS �\��j frequencyS�]eS$4 qZT0/�M�+foreS�childrenS�XginningS�EhaviorSlowS �KtweenS �[�/zierS�nitS� lurS�;ounceS �+ �g V�J$dampingS�  stiffnessS �g"%inessS�6yS �CIdariesS�xS+ulkS�mpS �,$tS� yS�3�aD  calculatedS �U*nS$3&q~ZU�(�+�V enterS�zhangeS�fildS �]renS�WsooseS ircinS�outS�outS�omponentS G sS �nfigS �(uredS�FstS�a 2+&antS�draintS �&$tainerS �'ordinateS�reateS �p� ubicS�mrrentS�*veS�V�NstomizeSdampingS�h�gf=� ecelerateS� sS� ionS�kidesS�>faultS<_ 4y��D$m� $&21"LRsS�&ineS�kdS �<�[sSlayS ��G> childrenS�0&taS�OscribesS�LterminesS�4vS �f�CifferentS \�LstanceS�fvS0"%R�dGS�#%b4#"%N/$onS�ragS�Y4#"%  transitionS�B0#"%opsS�JurationS><h# % y ��OC1L' sS�-ynamicS�<eS �bachSU�VN�!$seS]6�#FinS � *outS �5�[outS � *ierS � � ngS�U� sS�'ditS�itherS�M�+lementS�9milS �^�CkowalS�ndS� �:$sS�rterS�=qualsS�RvenlyS�+xceedsS�\istingS�rtS�?tremelyS�BfalseS�IstS�]eedbackS�xlS ��WingS�J turbulenceS�[ilterS�:nishS�kesS�aresSCstS�iorS&�YRx�V�3F�MceS�7wardS�urS�hromS��b unctionS)N�e �q�] alityS�: sS �{*rtherS�TgS �cestureSsS�sivesS�FreatS �idS �7VoupS�!handlingS`ppenS�iddenS�p %gherS�R�d�+owS ��{ttpsS�d�0iS�6�3fS&�8�\� $�D$ mmediatelyS �1$plementS�nS�|s]r�r"dl corporateS �m definitelyS �?�dxS�~ertiaS�KE�v&YlS�finityS �j QluenceS�itialS��`�O�istanceS�QtoS�MsS$�K�5@! �iQ�4$tS�C�O ��$emS�w(rationS�sS��f�e�j javascriptS�wkeepS�ZyframeS�v sS�:`U< owalskiS �_�ClastS �kessS�:thargicS�XiSg�[�9<nearSs�e)stS �oongS�LerS�RopS �z madeS� kesS�ssS�j�g}#thS�xS��5!  imumS�GinS�� #  imumS�%rrorS�odifiedS�+ytargetS �.J)reS�W� stlyS� tionS`%".t�dGSA#%b4#"%N/$E0  configS �* vementS�Y� ingS�PultipleSS�h�3stS�yselfS�nameS�asS� turalS �w�&earestS�gativeS�EverS�wS�oS �QnteS�DumberS ��D= "      '    !&0$              '      *                         8   oo�VȀ��QȀ����&`002B�@H S@H S@H d�J49+T�$49+T�$49+T:�OV�*�V�*�V�*�|7Eu �KI�4Q�@m]R �}b9IeM H  s7�s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$B��HR ��d9In V  v?W� �'W�p�� =]jvM4-�|7Eu �KI�4Q�@m]R �}b9IeM H  s7002��� �9�&1=�7f9�z�g19�Sdeg8�M�N�Mf04�{�a�a �fpx8 �0�4 �1<z �0�4vh8���12$�"�t�t��P3�.3�.3�6�a�a�Tb�mE�`2V�mW� `r! 5p G G/tn�t�3D#X4�)/P/q/1i D( ;,   #<>"~4W�mW�(�br! 5n V.wPk� � x�!` TZ�+�Tb�mE�`2V�mW� `r! 5p G G/t04��a�a� ��DI�Q�g� 02$�@H)U@H)U@H).�YnIW�(nIW�(nIW �T�a_N�B�\C0�0DGBCd?�1�{G-1>�  �T�RaaN�b�mL�2 �T�a_N�B�\Cpx8 �2�.� �3�.�l �2�.vw8�V�W�V242 �5 �N �Spx8����16 �n �n282���kb<�36�p �p502�2��73�m�_�_�K802�d���2�-�2�f0"kb9 px<�A23�F$ �$ �$  �M G'�h �b�S��%:�%���+"n/�:Z/��T�V�'Qo� �2H�: �M G'�h �b�S��%08�3�4 �A�M�302�0�T0�T0��]�v�F�02�7�P�U208 �' �j �'43�M�_�_53�J �? �?  � �������0numbersS�iobjectS�QccurS�fS:�!1Q*<,+ K7H�;� $NS$nS6�`�O�Cj��eS�pacitySk �T�" 2 posingS�6tionS�qallyS ��usSrS*�.C��lz$$�o chestrationS�,iginS�scillateS �>�dtherS b�% verriddenS�JeS�dparentS �_9thS�lengthS�!erS�HpetualS�lhysicsS�[ixelsS�layS �\ backS�ositionS�ssibleS�werS�J ; recalculateS�$opS 9W�=ertyS�/reachS�xllyS�ceivesS�zlativeS�RpeatS�]  &$delayS �' ingS�+sS�typeS �x-titionS�< resentingS� sponsivenessS�LtdeltaS �S"speedS �=!ultS�UturnsS ��verseS � otateS�C6A#%�y/$xS �USundS� sS ��lameS�caleSGriptS �lollSingS�tiptS �$econdS �I�sS�X��K�ltionS�utS05UIQR �. O�q$'$ AJtingS/��WsS�9upS �m:houldS�PwS �+imilarS�9kiS�mallerS�QnapS�c@pingS�oS� pecificS OD�nedS �E)readS�,ingSJp0 /!�i "@  + # "�G$taggerS�Q  rtS��E 9sS�8iffnessS�M�g� �orengthS�4uddenS �r� witchesS�tS�akeS�srgetS�z�.2* �xemplateS�-hanS�S��ktS;�C�u�E3�T� eS�>M51Q25  3  H: D<&$!  *, j !reS � byS�lseS�l��isS,�b& �>9�$$N�"roughoutS�wimeS �k�E�TconstantS �^physicsS�*sS�g�DoSJ�>KA<79O(d�U$I) <�olS� ransitionSb   " m�dE-(A#%�m/$3 50& sSP5 �8iggerS�QweenS�H] .oS ypeS*k"h�4SA#%�uiS�lS�O�40 nderstandS� oodS�itsS�GseS�Dk/`dS 8�\.�,�SfulS�rS�HingS �O uallyS ��!valueS2N �>q+S�-$ !,[ jsSH�r� riantsS�K9 + elocityS�o�TiaS� C�JsualS �.�;durationS �]NiseS� rS�)lyS �u(ueS�&waitS�7eS �T bS �c�CllS�henS  8�zOT� �<)ichS�(lehoverSFillS6=�  3�% EH$/',h. 8KthS$Zt� �E�� LordsS�}xS$ ?!�dyouS�2 "                  ,  G * >    "   "  ����ZBK!�m��g��� �33https://motion.dev/docs/animateanimatejsanimationsExplore Motion's powerful animate() function for creating and controlling animations. Animate HTML, SVG, CSS variables, and SVG paths with mini (2.3kb) or hybrid (18kb) versions. Utilize tween, spring, or inertia animations, build complex sequences, and take advantage of comprehensive playback controls.The `animate()` function is a powerful tool for creating and controlling animations. ``` animate("li", { opacity: 0 }) ``` It comes in two sizes, **mini (2.3kb)** and **hybrid (18kb)**. The **mini** version can animate HTML and SVG styles using native browser APIs for incredible performance. The **hybrid** version can additionally animate: * Independent transforms (`x`/`y`/`rotateZ` etc) * More styles, like `mask-image` and gradients * CSS variables * SVG paths * Animation sequences * Colors/strings/numbers * JavaScript objects and WebGL Usage ----- `animate` can be imported from the `"motion"` package: ``` // Hybrid import { animate } from "motion" // Mini import { animate } from "motion/mini" ``` ### HTML & SVG Both versions of `animate` are capable of animating HTML and SVG styles either by passing elements directly, or via CSS selectors. ``` // Element(s) const box = document.getElementById("box") animate(box, { opacity: 0 }, { duration: 0.5 }) // CSS selectors animate("div", { opacity: 0 }, { duration: 0.5 }) ``` ### Transforms The **hybrid** version of `animate` can animate every transform axis independently: * Translate: `x`, `y`, `z` * Scale: `scale`, `scaleX`, `scaleY` * Rotate: `rotate`, `rotateX`, `rotateY`, `rotateZ` * Skew: `skew`, `skewX`, `skewY` * Perspective: `transformPerspective` ``` animate("div", { rotate: 360 }) ``` ### CSS variables H**ybrid** `animate` can animate CSS variables in every browser: ``` animate(element, { "--rotate": "360deg" }) ``` **Mini** `animate` can only animate [registered CSS properties](https://developer.mozilla.org/en-US/docs/Web/API/CSS/registerProperty_static) in modern browsers. ### SVG paths The **hybrid** `animate` function can perform line drawing animations with most SVG elements using three special properties: `pathLength`, `pathSpacing` and `pathOffset`. ``` animate("circle", { pathLength: \[0, 1\] }) ``` All three are set as a progress value between `0` and `1`, `1` representing the total length of the path. Path animations are compatible with `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline` and `rect` elements. ### Single values By passing a `to` and `from` value, the hybrid `animate` will output the latest values to the provided `onUpdate` callback. ``` // Numbers animate(0, 100, { onUpdate: latest \=> console.log(latest) }) // Colors animate("#fff", "#000", { duration: 2 onUpdate: latest \=> console.log(latest) }) ``` ### Motion values By passing hybrid `animate` a [React motion value](./react-motion-value), it'll be automatically updated with the latest values. ``` const x = motionValue(0) animate(x, 200, { duration: 0.5 }) ``` ### Objects Objects can be animated ) ����VȀ��QȀ����&`002B�@H S@H S@H d�J49+T�$49+T�$49+T:�OV�*�V�*�V�*�|7Eu �KI�4Q�@m]R �}b9IeM H  s7�s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$B��HR ��d9In V  v?W� �'W�p�� =]jvM4-�|7E�m������^j00U@H 00U1U�00U@H)28U 50U�.80U`200U �0360USq5U �) 0U HJ720U�IaU <6ScceptU�ssU�ZlsoU,waysUe nU C�dUIEiimateU�vnumberU�totherU yU�sU �kbeU@ othUbyUBcalledUYnU**lampU �2odeU�^lorsU �mplexU"�onentsU�onstU@J untingUvreatedUAursorU �qdevU�jiscoverUownUzeitherUuverU�axamplesU�KfalseU �3eaturingU�ffUorU4romU unctionU>| sU�ygainsU�XrowingU�bhookU3wUttpsU�gifU�1mportU ncludeU�finitelyU�;putU 5"sU �4tUjsUlearnUngthUiibraryU�cfetimeU�UkeU�p nearUqmapU�8 embershipU�VotionU #�ustUd nonU�teU(;wUWumberU �gsUttocolorU ofU jNneU  �KpacityU � rU!xutputU63passingUCymentU�TremiumU �e ovidedU�5rangeU @"sUE -eactU) �*turnedU�7gbaUotationU�FsUameUheriesUrourceU�]plitU�|textU�{tringsU#� textU�}hatU�WeU.(.(imeU�SoU  �PransformU$VD ationU= erUN F woUDypesUupUwsageUeU-�rsU* transformU/tilitiesUvalueU 6$sU  .^riousUelocityU�OwellU�lillU�9thU6&xU �youU�Y                           �s������j�0400T�WaT$&�llT �howsTsoT�nT j� dT  K+) 6piT 0reT!|)-gumentTXtT�tachedT�dbatchedT�DeT CtDstT�0orderT � xT� yTE%callbackTI edT�anTB0hangeTP.sT 4+ >leanupT&�YompleteT!onentT-nsoleT MtT�ftainingTYrrectlyT�CssTmdesignsT.tectTqedT D.veloperT)ocsT.mT�>rawerT � CynamicT)eachT�syT# fficientlyTlementT$f (#sT_nT,suresT�=ventTforT(n*rameT �;loopT�:omT 5�BunctionT`gettersT]+handlersT ingT eightT\# 7tmlT  tpsT(idealT'mportT3nT cludingT�(sT T.jsTustTGlayoutT�GsT*iT_stenersT �e ogTN[mathT�UxT�VonitorT reT �otionT6�zillaT*noT �nwT�ofT �%nT s�ptimalTrT _gT+passingTF%erTformanceT � tTedT�6reventT�FovideTdTU/reactT dsT�?moveT�bdT�xnderT�QsT�3sizeT2 CobserverT' �L pondingT�+siveT,turnedT�sT�[sT�electorTnharedT&ouldT�4ingleT%4zeT � pecificT  _topT �gpedT� yleT �I  ubsequentT�2vgT thatT�^eT&  5F - reT �lisT~@rashingT�JoT 8 drackingT;,iggeredT"usT-ageT2eT%sTtilitiesTviaT#ewportT  )webT/henT �` ichT�!idthTZ" 8llT �_thT�7ritesT�AyouT                         !           KZK�IU/�E�;� � �)33https://motion.dev/docs/vue-gesturesGesture animationvuegesturesPower your UI with Motion for Vue's gestures: hover, tap, pan, drag & inView. Use while- props for animations & event listeners for interactive experiences.Motion extends Vue's basic set of event listeners with a simple yet powerful set of UI gestures. The `motion` component currently has support for **hover**, **press**, **pan**, **drag** and **inView**. Each gesture has both a set of event listeners and a `while-` animation prop. Animation props --------------- `motion` components provide multiple gesture animation props: `whileHover`, `whilePress`, `whileFocus`, `whileDrag` and `[whileInView](./vue-scroll-animations)`. These can define animation targets to temporarily animate to while a gesture is active. ``` <motion.button :whileHover\="{ scale: 1.2, transition: { duration: 1 }, }" :whilePress\="{ scale: 0.9 }" /> ``` All props can be set either as a target of values to animate to, or the name of any variants defined via the `variants` prop. Variants will flow down through children as normal. ``` <motion.button whilePress\="press" whileHover\="hover" :variants\="buttonVariants" \> <svg\> <motion.path :variants\="iconVariants" /> </svg\> </motiong�HI�A� �;� �33https://motion.dev/docs/springspringjsspringsExplore Motion's spring() function for creating realistic spring animations. Learn how to use it with animate() or directly for advanced scenarios like visualizers and CSS spring generation. Understand key options including keyframes, duration, bounce, damping, mass, and stiffness.The `spring` function is most often used to provide spring functionality to the mini `[animate()](./animate)` [function](./animate). ``` import { animate } from "motion/mini" import { spring } from "motion" animate( element, { transform: "translateX(100px)" }, { type: spring, bounce: 0.3, duration: 0.8 } ) ``` However, `spring` can also be used directly for low-level, advanced use cases. For instance, creating a spring visualiser. Usage ----- Import `spring` from Motion. ``` import { spring } from "motion" ``` `spring` is a function that returns a [generator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator). ``` const generator = spring({ keyframes: \[0, 100\] }) ``` This generator can be used to sample to spring at specific times (defined in milliseconds). As a generator, `next()` returns two values, `value` and `done`. ``` const { value, done } = generator.next(10) // Spring state at 10 milliseconds ``` The spring can be sampled in a non-linear fashion, meaning you can sample the spring at any time. ``` generator.next(100) generator.next(10) ``` ### Sampling a spring For most use-cases, like `linear()` easing generation or visualisation, you will probably want to run the generator in time order. You can do this with a normal loop that continues until the spring is done. ``` const generator = spring({ keyframes: \[25, 75\], stiffness: 400 }) const output = \[\] let isDone = false let time = 0 const sampleDuration = 20 // ms while (!isDone) { const { value, done } = generator.next(time) output.push(value) time += sampleDuration if (done) isDone = true } ``` **Warning:** Springs with `damping: 0` will run forever, so you'll need to put some kind of constraint on how many times the spring will be sampled, or what the minimum `damping` can be, etc. Visualiser ---------- TimePhysics Duration Bounce Use visual duration CSS generation -------------- It's possible to use `spring()` to generate CSS transitions. ``` element.style.transition = "all " + spring(0.5) ``` Read the [CSS generation guide](.B7, times: \[0, 0.2, 1\] }} }" /> ``` Gesture animations ------------------ Motion for Vue has shortcut props for animating to/from a target when a gesture starts/ends. ``` <motion.button :initial\="{ opacity: 0 }" :whileHover\="{ backgroundColor: 'rgba(220, 220, 220, 1)' }" :whilePress\="{ backgroundColor: 'rgba(255, 255, 255, 1)' }" :whileInView\="{ opacity: 1 }" /> ``` It supports `hover`, `press`, `drag`, `focus` and `inView`. Variants -------- Setting `animate` as a target is useful for simple, single-element animations. But sometimes we want to orchestrate animations that propagate throughout the DOM. We can do so with variants. Variants are a set of named targets. ``` const variants = { visible: { opacity: 1 }, hidden: { opacity: 0 }, } ``` They're passed to `motion` components via the `variants` prop: ``` <motion.div :variants\="variants" /> ``` These variants can now be referred to by a label, wherever you can define an animation target: ``` <motion.div :variants\="variants" initial\="hidden" animate\="visible" /> ``` You can also define multiple variants via an array: ``` :animate\="\['visible', 'danger'\]" ``` ### Propagation This is already useful for reusing and combining animation targets. But it becomes powerful for orchestrating animations throughout trees. Variants will flow down through `motion` components. So in this example when the `ul` enters the viewport, all of its children with a "visible" variant will also animate in: ``` const list = { visible: { opacity: 1 }, hidden: { opacity: 0 }, } const item = { visible: { opacity: 1, x: 0 }, hidden: { opacity: 0, x: -100 }, } return ( <motion.ul initial\="hidden" whileInView\="visible" :variants\="list" \> <motion.li :variants="item" /> <motion.li :variants="item" /> <motion.li :variants="item" /> </motion.ul\> ) ``` ### Orchestration By default, this children animations will start simultaneously with the parent. But with variants we gain access to new `transition` props like `[when](./vue-transitions#orchestration)`[,](./vue-transitions#orchestration) `[delayChildren](./vue-transitions#orchestration)`[,](./vue-transitions#orchestration) `[staggerChildren](./vue-transitions#orchestration)` [and](./vue-transitions#orchestration) `[staggerDirection](./vue-transitions#orchestration)`. ``` const list = { visible: { opacity: 1, transition: { when: "beforeChildren", staggerChildren: 0.3, // Stagger children by .3 seconds }, }, hidden: { opacity: 0, transition: { when: "afterChildren", }, }, } ``` ### Dynamic variants Each variant can be defined as a function that resolves when a variant is made active. ``` const variants = { hidden: { opacity: 0 }, visible: (index) \=> ({ opacity: 1, transition: { delay: index \* 0.3 } }) } ``` These functions are provided a single argument, which is passed via the `custom` prop: ``` <motion.div v-for\="(item,index) in items" :custom\="index" :variants\="variants" /> ``` This way, variants can be resolved differently for each animating element. Animation controls ------------------ Declarative animations are ideal for most UI interactions. But sometimes we need to take manual control over animation playback. The `[useAnimate](./vue-use-animate)` [hook](./vue-use-animate) can be used for: * Animating any HTML/SVG element (not just `motion` components). * Complex animation sequences. * Controlling animations with `time`, `speed`, `play()`, `pause()` and other playback controls. ``` <script setup\> const \[scope, animate\] = useAnimate() watch(scope, () \=> { const controls = animate(\[ \[scope.current, { x: "100%" }\], \["li", { opacity: 1 }\] \]) controls.speed = 0.8 return () \=> controls.stop() }) </script\> <template\> <ul ref\="scope"\> <li /> <li /> <li /> </ul\> </template\> ``` Animate content --------------- By passing [a](./vue-motion-value) `[MotionValue](./vue-motion-value)` as va8lue prop to a `RowValue` component, it will render its latest value in the HTML. ``` <script setup\> import { useMotionValue, motion, animate, RowValue } from "motion-v" import { onMount, onUnmount } from "vue" const count = useMotionValue(0) let controls onMount(()\=>{ controls = animate(count, 100, { duration: 5 }) }) onUnmount(()\=>{ controls.stop() }) </script\> <template\> <motion.pre\><RowValue :value\="count"/></motion.pre\> </template\> ``` This is more performant than setting Vue state as the `RowValue` component will set `innerHTML` directly.[{"title":"Code Example 1","description":"","code":"import { motion } from \"motion-v\"","language":"vue","difficulty":"beginner","tags":["vue"]},{"title":"Code Example 2","description":"","code":"<motion.div :animate=\"{ opacity: 1 }\" />","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 3","description":"","code":"<motion.div\n :initial='{ x: \"100%\" }'\n :animate='{ x: \"calc(100vw - 50%)\" }'\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 4","description":"","code":"<motion.div\n :initial='{ height: \"0px\" }'\n :animate='{ height: \"auto\" }'\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 5","description":"","code":"<motion.section :style=\"{ x: -20 }\" />","language":"vue","difficulty":"intermediate","tags":["vue"]},{"title":"Code Example 6","description":"","code":"<motion.button :whileHover=\"{ scale: 1.1 }\" whilePress=\"{ scale: 0.9 }\" />","language":"vue","difficulty":"intermediate","tags":["vue","gesture"]},{"title":"Code Example 7","description":"","code":"<motion.li\n :initial='{ transform: \"translateX(-100px)\" }'\n :animate='{ transform: \"translateX(0px)\" }'\n :transition='{ type: \"spring\" }'\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","spring"]},{"title":"Code Example 8","description":"","code":"<motion.div :style='{ originX: 0.5 }' />","language":"vue","difficulty":"intermediate","tags":["vue"]},{"title":"Code Example 9","description":"","code":"<motion.ul\n :initial=\"{ '--rotate': '0deg' }\"\n :animate=\"{ '--rotate': '360deg' }\"\n :transition=\"{ duration: 2, repeat: Infinity }\"\n>\n <li :style=\"{ transform: 'rotate(var(--rotate))' }\" />\n <li :style=\"{ transform: 'rotate(var(--rotate))' }\" />\n <li :style=\"{ transform: 'rotate(var(--rotate))' }\" />\n</motion.ul>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 10","description":"","code":"<motion.li :animate=\"{ backgroundColor: 'var(--action-bg)' }\" />","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 11","description":"","code":"<motion.path :initial=\"{ pathLength: 0 }\" :animate=\"{ pathLength: 1 }\" />","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 12","description":"","code":"<motion.div\n :animate=\"{ x: 100 }\"\n :transition=\"{ ease: 'easeOut', duration: 2 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 13","description":"","code":"<motion.li\n :initial=\"{ opacity: 0, scale: 0 }\"\n :animate=\"{ opacity: 1, scale: 1 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 14","description":"","code":"<motion.div :initial=\"false\" :animate=\"{ y: 100 }\" />","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 15","description":"","code":"<AnimatePresence>\n <motion.div\n v-if=\"isVisible\"\n key=\"modal\"\n :initial=\"{ opacity: 0 }\"\n :animate=\"{ opacity: 1 }\"\n :exit=\"{ opacity: 0 }\"\n />\n</AnimatePresence>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 16","description":"","code":"<motion.div :animate=\"{ x: [0, 100, 0] }\" />","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 17","description":"","code":"<motion.div :animate=\"{ x: [null, 100, 0] }\" />","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 18","description":"","code":"<motion.circle\n :cx=\"500\"\n :animate=\"{\n cx: [null, 100, 200],\n transition={{ duration: 3, times: [0, 0.2, 1] }}\n }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 19","description":"","code":"<motion.button\n :initial=\"{ opacity: 0 }\"\n :whileHover=\"{ backgroundColor: 'rgba(220, 220, 220, 1)' }\"\n :whilePress=\"{ backgroundColor: 'rgba(255, 255, 255, 1)' }\"\n :whileInView=\"{ opacity: 1 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","gesture"]},{"title":"Code Example 21","description":"","code":"<motion.div :variants=\"variants\" />","language":"vue","difficulty":"intermediate","tags":["vue"]},{"title":"Code Example 22","description":"","code":"<motion.div\n :variants=\"variants\"\n initial=\"hidden\"\n animate=\"visible\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 23","description":"","code":":animate=\"['visible', 'danger']\"","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 24","description":"","code":"const list = {\n visible: { opacity: 1 },\n hidden: { opacity: 0 },\n}\n\nconst item = {\n visible: { opacity: 1, x: 0 },\n hidden: { opacity: 0, x: -100 },\n}\n\nreturn (\n <motion.ul\n initial=\"hidden\"\n whileInView=\"visible\"\n :variants=\"list\"\n >\n <motion.li :variants=\"item\" />\n <motion.li :variants=\"item\" />\n <motion.li :variants=\"item\" />\n </motion.ul>\n)","language":"vue","difficulty":"intermediate","tags":["vue"]},{"title":"Code Example 25","description":"","code":"const list = {\n visible: {\n opacity: 1,\n transition: {\n when: \"beforeChildren\",\n staggerChildren: 0.3, // Stagger children by .3 seconds\n },\n },\n hidden: {\n opacity: 0,\n transition: {\n when: \"afterChildren\",\n },\n },\n}","language":"vue","difficulty":"advanced","tags":["vue","animation","stagger"]},{"title":"Code Example 26","description":"","code":"const variants = {\n hidden: { opacity: 0 },\n visible: (index) => ({\n opacity: 1,\n transition: { delay: index * 0.3 }\n })\n}","language":"vue","difficulty":"intermediate","tags":["vue","animation","stagger"]},{"title":"Code Example 27","description":"","code":"<motion.div v-for=\"(item,index) in items\" :custom=\"index\" :variants=\"variants\" />","language":"vue","difficulty":"intermediate","tags":["vue"]},{"title":"Code Example 28","description":"","code":"<script setup>\n const [scope, animate] = useAnimate()\n watch(scope, () => {\n const controls = animate([\n [scope.current, { x: \"100%\" }],\n [\"li\", { opacity: 1 }]\n ])\n \n controls.speed = 0.8\n \n return () => controls.stop()\n })\n</script>\n\n<template>\n <ul ref=\"scope\">\n <li />\n <li />\n <li />\n </ul>\n</template>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 29","description":"","code":"<script setup>\n import { useMotionValue, motion, animate, RowValue } from \"motion-v\"\n import { onMount, onUnmount } from \"vue\"\n\n const count = useMotionValue(0)\n let controls\n \n onMount(()=>{\n controls = animate(count, 100, { duration: 5 })\n })\n\n onUnmount(()=>{\n controls.stop()\n })\n</script>\n\n<template>\n <motion.pre><RowValue :value=\"count\"/></motion.pre> \n</template>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]}]{"props":[],"methods":[{"name":"play","signature":"play()","description":"play method"},{"name":"pause","signature":"pause()","description":"pause method"}],"types":[]}["vue","animations","animation","gesture","spring","drag","keyframes","stagger","motion","transition"]2025-08-29 11:54:062025-08-29 11:54:06 ff�VȀ��QȀ����&`002B�@H S@H S@H d�J49+T�$49+T�$49+T:�OV�*�V�*�V�*�|7Eu �KI�4Q�@m]R �}b9IeM H  s7�s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$B��HR ��d9In V  v?W� �'W�p�� =]jvM4-�|7Eu �KI�4Q�@m]R �}b9IeM H  s7002��� �9�&1=�7f9�z�g19�Sdeg8�M�N�Mf04�{�a�a �fpx8 �0�4 �1<z �0�4vh8���12$�"�t�t��P3�.3�.3�6�a�a�Tb�mE�`2V�mW� `r! 5p G G/tn�t�3D#X4�)/P/q/1i D( ;,   #<>"~4W�mW�(�br! 5n V.wPk� � x�!` TZ�+�Tb�mE�`2V�mW� `r! 5p G G/t04��a�a� ��DI�Q�g� 02$�@H)U@H)U@H).�YnIW�(nIW�(nIW �T�a_N�B�\C0�0DGBCd?�1�{G-1>�  �T�RaaN�b�mL�2 �T�a_N�B�\Cpx8 �2�.� �3�.�l �2�.vw8�V�W�V242 �5 �N �Spx8����16 �n �n282���kb<�36�p �p502�2��73�m�_�_�K802�d���2�-�2�f0"kb9 px<�A23�F$ �$ �$  �M G'�h �b�S��������( �00V"F49+T1VL37V�i2V �B$ 4VI5V �F 3V K|'5V�h9VG4V�Gz# 5V�p75V�86V�kaV{)�H) ccelerationV�2ptsV �)djustedV�rvancedV&llVinV }{�dV  "z�` )imateV ?ionV  �B sV �:otherV�wticipateV�#reVtV �3�backV� inV�outV�outV�eVp�bcomeV �%)ginningV�5zierVCothVuiltV4ctV M�$yV=>�RcanV8"�bsesVghangeV �HdV�WircinV� outV �"�`outV�!ompliantV� onentV *nstV� ] R# 5%trolV �\urseVreateV� sV�~ssV�  ubicbezierV�@ rveV Di7defaultV �J&initionsV�tvV�VeloperV � ifferentV rectlyVWscoverVreteV� tributionV�hocsV �mVburationV �0easeVA�^#dV �progressV�minVB6outV�outV �ingVN /,J    )sVitherVXmilV�NnV �dV�PterV�-venlyV�xitV�/ploreVfastV�MeelVingV�:sVirstV�zollowingV1rV%$7 J�t)romV`nYt*unctionV$ A�9D sV$ = �y generatedV�wivesV�6haveV/owVttpsV�T:iV �&mportVQ&nYt*edVqnV5c�)stanceV �)sV �ftV��)sVjsVustV9keepV�JowalskiV�OlearnVikeV!nearV�$�JlV�ongerV�B mirroreasingV$�7 dV� sV�CodifiersV �tionV,#6 VDt*zillaV �nameV>dV?ewV�q�*)oV�AvelVeumberV�ofV \,)�nV�QeV �)rVcgV �utV�(*verV�]passingV z�aowerinV �/ #outV �\outV�4reciseV�[ogressV~ �o=(videVsV �JreactV %ceiveV�ferV:enceV sponsivenessV�<turnsV �)versedV� easingV"� sV�sV&HecondsV�HparatelyVSpacedV�ecV�edV   tartV �Z epV� sV$�%Y ! illVPraightVrudioV �zthanV�CtV �)eV".O  omV <seV�isV�TroughV�voutV inyV]oV 7.K�0 ransitionV sV�0usV �ageVheVUDdV �rV�8uallyV�'valueVeryV�ZwebV�SBillV �$)thVD� youV 77rV                   .                          city()`: ``` const velocity = x.getVelocity() ``` Velocity is available for any number-like value, for instance `100`, or unit types like `"50vh"` etc. Velocity is intelligently calculated by using the value rendered during the previous animation frame (rather than the last value passed via `set`). ### Render Motion values can be passed to effects like `[styleEffect](./style-effect)`, `[attrEffect](./attr-effect)` or `[propEffect](./prop-effect)` to render the latest values once per animation frame. ``` const x = motionValue(0) const opacity = motionValue(1) styleEffect("li", { x, opacity }) x.set(100) // Will apply to all <li> elements on the next frame animate(opacity, 0) // Will animate all <li> opacity ``` API --- ### `get()` Returns the latest state of the Motion Value. ### `getVelocity()` Returns the latest velocity of the motion value. Returns `0` if the value is non-numerical. ### `set()` Sets the Motion Value to a new state. ``` x.set("#f00") ``` ### `jump()` Jumps the Motion Value to a new state in a way that breaks continuity from previous values: * Resets `velocity` to `0`. * Ends active animations. ``` animate(x, 100) x.jump(10) x.getVelocity() // 0 ``` ### `isAnimating()` Returns `true` if the value is currently animating. ### `stop()` Stop the active animation. ### `on()` Subscribe to Motion Value events. Available events are: * `change` * `animationStart` * `animationCancel` * `animationComplete` ``` import { motionValue, frame } from "motion" const color = motionValue("#fff") color.on("change", latest \=> { frame.render(() \=> element.style.backgroundColor = latest) }) ``` It returns a function that, when called, will unsubscribe the listener. ``` const unsubscribe = x.on("change", latest \=> console.log(latest)) ``` ### `destroy()` Destroy and clean up subscribers to this Motion Value.[{"title":"Code Example 1","description":"","code":"const x = motionValue(0)\n\nx.on(\"change\", latest => console.log(latest))\n\nanimate(x, 100)","language":"javascript","difficulty":"beginner","tags":["js","animation"]},{"title":"Code Example 2","description":"","code":"const color = motionValue(\"#f00\")\n\nanimate(color, \"#0f0\")\n\nanimate(color, \"#333\") // Will automatically end the existing animation","language":"javascript","difficulty":"beginner","tags":["js","animation"]},{"title":"Code Example 3","description":"","code":"import { motionValue } from \"motion\"\n\nconst x = motionValue(0)","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 8","description":"","code":"const x = motionValue(0)\nconst opacity = motionValue(1)\n\nstyleEffect(\"li\", { x, opacity })\n\nx.set(100) // Will apply to all <li> elements on the next frame\nanimate(opacity, 0) // Will animate all <li> opacity","language":"javascript","difficulty":"beginner","tags":["js","animation"]},{"title":"Code Example 10","description":"","code":"animate(x, 100)\n\nx.jump(10)\nx.getVelocity() // 0","language":"javascript","difficulty":"beginner","tags":["js","animation"]},{"title":"Code Example 11","description":"","code":"import { motionValue, frame } from \"motion\"\n\nconst color = motionValue(\"#fff\")\n\ncolor.on(\"change\", latest => {\n frame.render(() => element.style.backgroundColor = latest)\n})","language":"javascript","difficulty":"beginner","tags":["js"]}]{"props":[],"methods":[{"name":"get","signature":"get()","description":"get method"},{"name":"getVelocity","signature":"getVelocity()","description":"getVelocity method"},{"name":"set","signature":"set()","description":"set method"},{"name":"jump","signature":"jump()","description":"jump method"},{"name":"isAnimating","signature":"isAnimating()","description":"isAnimating method"},{"name":"stop","signature":"stop()","description":"stop method"},{"name":"on","signature":"on()","description":"on method"},{"name":"destroy","signature":"destroy()","description":"destroy method"}],"types":[]}["js","reference","motion","value","animation"]2025-08-29 11:54:122025-08-29 11:54:12 ""�VȀ��� �0Xt�|�%9�j�Z� @�:��i Gg0=�!+'�Ia�R�W7�E}�=h: �._O��Ok��) G 0orchestrate8�O��O ing8��q� on8�D�r�'�Dg3��A�A�w �M�> �%��E�wigin8 �w�Y �x�m �wx8 �  �  � y8���z8 � � �scillate9�xther8� �CP�%�[��J��6�>� wise5�p �pur5��[�X�G��[�X�Gt3 �,*�7*�7*�  �c �d�D� �  �cput2(�63� 63� 63�$side;��H"ver3�a�_�_�h�[��hflow<��?lay<�Iridden9 �c�e8�T �,�`��Tview5�M�%�M�%wn8�R��Rpackage6d �Ud �dding< �\ge5�X��mk�]�g6 II�X��mint8�t�u�tn; �? rallax=�vent8�e�H �eT �Y�Z�es;�t65�5ss8 �&!�I�a*@ �&!ed4� �\ �\  �m�Q�c �0���A �m�Qing2�G��"�~�a�e�a�e�a�2q�+,� �b��(� �H]�2te5��l��ld6�n �nth6-�c� �s�8 �-�clength8 �g�l� �3  �goffset9�o�6s6�@C��@pacing9�m�4use6�<� �p�H�}�<� d9�Ns9�7yment2�X��S�B�Ger4�,�a�a �f�Wfect6���orm8�/�*�`�/�j�R�L�/�*ance2~�~�~�( �D,,�k�e�5( �D t4��a�a �z�t �{�t�h�  �z�ted<�Ying<�Fs<petual9�2spective8�!�,�"�!hysical8�5�v�$�5s8�? �>��?ink<�xels8���Q��+�lace8�2 �2y8� �?�&�> %�|� back8 �j%+�P�� b �]% �j%s9�Gugins7� �s2 �X �q �vng2 �1 �J �O �$ �' �h �$ �' �hoint9��Ser;�;OKB�[V�Pinfo;�{lygon9��\line9��]pular6k ksition5� �I� ��}�8� � �I� ed8�z�=�zsible4�G��J��J�� � ��[�Ffe�\ �m�+(yt� � ��[tential6 wer5CCful2�!�:�? ��[ �"�-�  �o ��[ �"�-� in3�3 #�7 #�7 #out3�`�]�]out3�8�_�_ractise6�b �be8 �e �c �ecise3�_�_�_mium2�i �y �y sence5�[� �` �!�%�r�[� �`s2)�)�)��)�{�)es; �T�ing;�Avent<�{iew2 � � �ous2�����b��b�`�H W ! �<�2 ly<1imary;�Jvate2��5�:oduction5  gress3F� �o=(� �o=(� �o=( ��[�{��4�k�� ��[ject5��o��omise9 �}p2 S� S�S��Q�a�a�2 s\�9$&tu(=�:�c�N>�@:�e�|�.E�?Xf= Dn`}(G�2 s\�9$&tu(=�:�c�Nagate8�R��R ing;�c on8�~�a�]�~effect2 R� R�R��Q�a�arties4�7�6 �I$ �2G�|�7�6y< '�Vs8�(�m�^�)�/�~0 %�G��(�m�^vide3��_�_�g��y3 �(�g��yd2�9���6�*�%��'�6s3�J�J�J�w�~ �7�' �8�g�w�~ �7�'ing9�]�5�-quality6��V��Veryselectorall6 �~ �~ick2 x  x  x ��}S N �4�r��}S N �4�rly<� te<� *t4rad6 � �ius< �^nge2.�@"�@"�@"s2"�I -�9 -�9 -te9 �\r55':4B!'  7& >O3)- 2L. "! '%, F =jVC0 : Y� #8 4@)@!U   ""�VȀ����0\ A�y 0combines5&&ing8��i�I�es5� ��b� ��bmitted9� panies57 7rison2h�h�h�tible7�8� �V�8lete5� �c �?� Z� �c �? ly5�B �B s9�tx2"� ���8 w�w$� x�i�8 w�wity<�iant3� �_�_onent3�.�[�[�1�]�]�  &�"�|'�W"$�h�^5(%�O#?�@ �E Z[S | �3 �]O/@ C"�  &�"�|'�W"$�h�^5 s2�s���2�a�a�PT �y�$H�*�`�*�j �%H�*�"J�z 2�77�z2�\�PT �y�$H�*�`�*�jsable4��a�a rehensive9*nference<�ig5�D�G C�G�D�G C�Guration=�O ed5�>�S�G�>�Ssidered=�ole4�Tc�%]c�%]c�%�4�9�3 �&hJ �4�9t20�@J L@J L@J F�] R# 5%�] R# 5%�] R# 5%B�L+-8I�[+-8I�[+-8I�� �Y�<�)�cXx G+n@@z�_D)Y � C*-/@\)9:M$�&n V*pH�0��`�6�! /2� �Y�<�)�cXx G+n@raints;�iH" ref; �3 tainer=� s<�*ing6�H �  � �H � s7�( �(ent8�0�& 8�i�0inuity4��a�arol3 �`�_�_%�g� �Z�gling8�   �w�s6�:�W9 7 ,�e�J9 > �:�W9 7 venient8�<�=�<rsion8� �!� ordinate9�Bpy5��m�k��m�kre4�� �� rect< �l0ed<�@ion7�[ �T�v�[ly7�N�  �(�Ns<�vunt8 �U  �Q  �U er8�S �Sing2�z��rse3��_�_�<�Q�<�Qs8�z��zreate3��_�_�I�a�a �I�o�%�_�f�j �I�o�%d2�E���%g�|g�|g�%�p�$ �)� ���%�ps3��_�_ing4�\�a�a   �or<�ossfade< �]�& s<�@ ing<�Yss2\�,\��2 �8 �8 \��B*�J,�G$n�� /s@8.  & o�� /�3�*�%W��B*�J,�G$n�� /sube6� �ic9�Fbezier3.�@ �@ �@ rrent8 �&�v��'$a �i�' �| �&�vly4� �a�a�" ���R �j��" ��speed9 �q sor2�u��& �3 �8 �1 �4 �u �1 �4 �uve3"�Hi7�0i7�0i7� �9��s8�L� �Lstom8 �?  �0  �? ised<� ing6� �x8 �} �@� �}damping9�K�,x�3nger8��`�te<�1 ecelerate9�sides9�ylarative8�X�K�Xfault3�N&�;&�;&X0���)�.�>�"p=��O�"%2/��U�+�5 �J{�>�X0���)�s5�7��L��H��7��L� transition9 �leats<�)ine8�P�8!�]�i���:@�P�8!config7� �d5�` �8�c �� �y�m�M�` �8�c nuxtconfig7Y Ys5�a�r�a�ring8�q��4�qtion9�;�_q s3�x�_�_�-gree<�Es6�, �,lay2.�.�.� �1Z�/�5 �6�|� �) �1Z�/children8 �x�[ �xta9�B�signed5�<�A�<�Atroy4�[�`�`tails< �x5ect<�ed;��Es;�:�[rmines9�\v2��Y����E�_�_ �� �`�]�S %� �`�]eloper3��A�A�x�u�K �#��C�x�ument5 �t��? �t��?ialog<�pd<�ff= �~erence<� s<�2 t3� �X �X �C�z�^ �K�4�}�L�b� �S� �C�z�^ �K�4 ly8�Q�D�Qs;�icult< �Wzrection;  -"M = �Z*":�w  &0 >(!  'WL   �6 !1=L+   p? 1: W   SD,  V @ <motion.path variants\={iconVariants} /> </svg\> </motion.button\> ``` Gestures -------- ### Hover The hover gesture detects when a pointer hovers over or leaves a component. It differs from `onMouseEnter` and `onMouseLeave` in that hover is guaranteed to only fire as a result of actual mouse events (as opposed to browser-generated mice events emulated from touch input). ``` <motion.a whileHover\={{ scale: 1.2 }} onHoverStart\={event \=> {}} onHoverEnd\={event \=> {}} /> ``` ### Tap The tap gesture detects when the **primary pointer** (like a left click or first touch point) presses down and releases on the same component. ``` <motion.button whileTap\={{ scale: 0.9, rotate: 3 }} /> ``` It will fire a `tap` event when the tap or click ends on the same component it started on, and a `tapCancel` event if the tap or click ends outside the component. If the tappable component is a child of a draggable component, it'll automatically cancel the tap gesture if the pointer moves further than 3 pixels during the gesture. #### Accessibility Elements with tap events are keyboard-accessible. Any element with a tap prop will be able to receive focus and `Enter` can be used to trigger tap events on focused elements. * Pressing `Enter` down will trigger `onTapStart` and `whileTap` * Releasing `Enter` will trigger `onTap` * If the element loses focus before `Enter` is released, `onTapCancel` will fire. ### Pan The pan gesture recognises when a pointer presses down on a component and moves further than 3 pixels. The pan gesture is ended when the pointer is released. ``` <motion.div onPan\={(e, pointInfo) \=> {}} /> ``` Pan doesn't currently have an associated `while-` prop. **Note:** For pan gestures to work correctly with touch input, the element needs touch scrolling to be disabled on either x/y or both axis with the `[touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action)` CSS rule. ### Drag The drag gesture applies pointer movement to the x and/or y axis of the component. ``` <motion.div drag whileDrag\={{ scale: 1.2, backgroundColor: "#f00" }} /> ``` By default, when the drag ends the element will perform an inertia animation with the ending velocity. This can be disabled by setting `dragMomentum` to `false`, or changed via the `dragTransition` prop. #### Constraints It's also possible to set `dragConstraints`, either as an object with `top`, `left`, `right`, and `bottom` values, measured in pixels. ``` <motion.div drag\="x" dragConstraints\={{ left: 0, right: 300 }} /> ``` Or, it can accept a `ref` to another component created with React's `useRef` hook. This `ref` should be passed both to the draggable component's `dragConstraints` prop, and the `ref` of the component you want to use as constraints. ``` const MyComponent = () \=> { const constraintsRef = useRef(null) return ( <motion.div ref\={constraintsRef}\> <motion.div drag dragConstraints\={constraintsRef} /> </motion.div\> ) } ``` By default, dragging the element outside the constraints will tug with some elasticity. This can be changed by setting `dragElastic` to a value between `0` and `1`, where `0` equals no motion and `1` equals full motion outside the constraints. #### Direction locking It's possible to lock an element to the first axis it's dragged on by setting `dragDirectionLock`. ``` <motion.div drag dragDirectionLock onDirectionLock\={callback} /> ``` Each time the drag gesture starts, the direction of pointer travel will be detected and the element will be draggable only on this axis. ### Focus The focus gesture detects when a component gains or loses focus by the same rules as the [CSS :focus-visible selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible). Typically, this is when an `input` receives focus by any means, and when other elements receive focus by accessible means (like via keyboard navigation). ``` <motion.a whileFocus\={{ scale: 1.2 }} href\="#" /> ``` Event propagation ----------------- Children can �fT � Y � / � * NO���^�?��b�s )7-3Code Example 1vuelayout<motion.div layout />["vue","layout"]beginner2025-08-29 11:54:08�F�r +�m/%3Code Example 12vuegestures<template> <motion.svg whileHover="hover"> <filter id="blur"> <motion.feGaussianBlur :stdDeviation="0" :variants="{ hover: { stdDeviation: 2 } }" /> </filter> </motion.svg> </template>["vue","gesture"]intermediate2025-08-29 11:54:08�=�q +�o%3Code Example 11vuegestures<motion.div :whilePress="{ scale: 2 }"> <button @pointerDownCapture="e => e.stopPropagation()" /> </motion.div>["vue"]intermediate2025-08-29 11:54:08}�p +q%3Code Example 10vuegestures<motion.a :whileFocus="{ scale: 1.2 }" href="#" />["vue"]intermediate2025-08-29 11:54:08��o )�/3Code Example 9vuegestures<motion.div drag dragDirectionLock @directionLock="callback" />["vue","gesture"]beginner2025-08-29 11:54:08�@�n )�c/%3Code Example 8vuegestures<script setup> import { useDomRef } from "motion-v" const constraintsRef = useDomRef() </script> <template> <motion.div ref="constraintsRef"> <motion.div drag :dragConstraints="constraintsRef" /> </motion.div> </template>["vue","gesture"]intermediate2025-08-29 11:54:08��m )�/%3Code Example 7vuegestures<motion.div drag="x" :dragConstraints="{ left: 0, right: 300 }" />["vue","gesture"]intermediate2025-08-29 11:54:08��l )�/%3Code Example 6vuegestures<motion.div drag :whileDrag="{ scale: 1.2, backgroundColor: '#f00' }" />["vue","gesture"]intermediate2025-08-29 11:54:08p�k )a3Code Example 5vuegestures<motion.div @pan="(e, pointInfo) => {}" />["vue"]beginner2025-08-29 11:54:08��j )%3Code Example 4vuegestures<motion.button :whilePress="{ scale: 0.9, rotate: 3 }" />["vue"]intermediate2025-08-29 11:54:08�3�i )�I/%3Code Example 3vuegestures<motion.a :whileHover="{ scale: 1.2 }" @hoverStart="event => {}" @hoverEnd="event => {}"["vue","gesture"]intermediate2025-08-29 11:54:08�{�h )�Y/%3Code Example 2vuegestures<motion.button whilePress="press" whileHover="hover" :variants="buttonVariants" > <svg> <motion.path :variants="iconVariants" /> </svg> </motion.button>["vue","gesture"]intermediate2025-08-29 11:54:08�X�g )�{G%3Code Example 1vuegestures<motion.button :whileHover="{ scale: 1.2, transition: { duration: 1 }, }" :whilePress="{ scale: 0.9 }" />["vue","animation","gesture"]intermediate2025-08-29 11:54:08w�f )KC3Code Example 8jsspringsspring({ keyframes: [0, 100] })["js","spring","keyframes"]advanced2025-08-29 11:54:07��e )kC3Code Example 7jsspringselement.style.transition = "all " + spring(0.5)["js","animation","spring"]beginner2025-08-29 11:54:07��d )�S[3Code Example 6jsspringsconst generator = spring({ keyframes: [25, 75], stiffness: 400 }) const output = [] let isDone = false let time = 0 const sampleDuration = 20 // ms while (!isDone) { const { value, done } = generator.next(time) output.push(value) time += sampleDuration if (done) isDone = true }["js","animation","spring","keyframes"]advanced2025-08-29 11:54:07��c )�'+3Code Example 4jsspringsconst { value, done } = generator.next(10) // Spring state at 10 milliseconds["js","spring"]beginner2025-08-29 11:54:07� �b )oC3Code Example 3jsspringsconst generator = spring({ keyframes: [0, 100] })["js","spring","keyframes"]advanced2025-08-29 11:54:07k�a )K+3Code Example 2jsspringsimport { spring } from "motion"["js","spring"]beginner2025-08-29 11:54:07��` )�oC%3Code Example 1jsspringsimport { animate } from "motion/mini" import { spring } from "motion" animate( element, { transform: "translateX(100px)" }, { type: spring, bounce: 0.3, duration: 0.8 } )["js","animation","spring"]intermediate2025-08-29 11:54:07��_ +�+%3Code Example 11jsscrollscroll( animation { target: document.getElementById("item") } )["js","scroll"]intermediate2025-08-29 11:54:07 4 � V �  � & x � Y��H� f��hI�4��& +!k3%3Code Example 17vueanimations<motion.div :animate="{ x: [null, 100, 0] }" />["vue","animation"]intermediate2025-08-29 11:54:06��% +!e3%3Code Example 16vueanimations<motion.div :animate="{ x: [0, 100, 0] }" />["vue","animation"]intermediate2025-08-29 11:54:06��$ +!�3%3Code Example 15vueanimations<AnimatePresence> <motion.div v-if="isVisible" key="modal" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" /> </AnimatePresence>["vue","animation"]intermediate2025-08-29 11:54:06��# +!w3%3Code Example 14vueanimations<motion.div :initial="false" :animate="{ y: 100 }" />["vue","animation"]intermediate2025-08-29 11:54:06�3�" +!�?3%3Code Example 13vueanimations<motion.li :initial="{ opacity: 0, scale: 0 }" :animate="{ opacity: 1, scale: 1 }" />["vue","animation"]intermediate2025-08-29 11:54:06�1�! +!�;3%3Code Example 12vueanimations<motion.div :animate="{ x: 100 }" :transition="{ ease: 'easeOut', duration: 2 }" />["vue","animation"]intermediate2025-08-29 11:54:06�#� +!�3%3Code Example 11vueanimations<motion.path :initial="{ pathLength: 0 }" :animate="{ pathLength: 1 }" />["vue","animation"]intermediate2025-08-29 11:54:06�� +!� 3%3Code Example 10vueanimations<motion.li :animate="{ backgroundColor: 'var(--action-bg)' }" />["vue","animation"]intermediate2025-08-29 11:54:06�� )!� 3%3Code Example 9vueanimations<motion.ul :initial="{ '--rotate': '0deg' }" :animate="{ '--rotate': '360deg' }" :transition="{ duration: 2, repeat: Infinity }" > <li :style="{ transform: 'rotate(var(--rotate))' }" /> <li :style="{ transform: 'rotate(var(--rotate))' }" /> <li :style="{ transform: 'rotate(var(--rotate))' }" /> </motion.ul>["vue","animation"]intermediate2025-08-29 11:54:06t� )!]%3Code Example 8vueanimations<motion.div :style='{ originX: 0.5 }' />["vue"]intermediate2025-08-29 11:54:06�q� )!�+E%3Code Example 7vueanimations<motion.li :initial='{ transform: "translateX(-100px)" }' :animate='{ transform: "translateX(0px)" }' :transition='{ type: "spring" }' />["vue","animation","spring"]intermediate2025-08-29 11:54:06�!� )!�!/%3Code Example 6vueanimations<motion.button :whileHover="{ scale: 1.1 }" whilePress="{ scale: 0.9 }" />["vue","gesture"]intermediate2025-08-29 11:54:06r� )!Y%3Code Example 5vueanimations<motion.section :style="{ x: -20 }" />["vue"]intermediate2025-08-29 11:54:06�&� )!�'3%3Code Example 4vueanimations<motion.div :initial='{ height: "0px" }' :animate='{ height: "auto" }' />["vue","animation"]intermediate2025-08-29 11:54:06�*� )!�/3%3Code Example 3vueanimations<motion.div :initial='{ x: "100%" }' :animate='{ x: "calc(100vw - 50%)" }' />["vue","animation"]intermediate2025-08-29 11:54:06�� )!]3%3Code Example 2vueanimations<motion.div :animate="{ opacity: 1 }" />["vue","animation"]intermediate2025-08-29 11:54:06i� )!O3Code Example 1vueanimationsimport { motion } from "motion-v"["vue"]beginner2025-08-29 11:54:06�� +!�1%3Code Example 55jsanimationsconst animation = animate(element, { opacity: 0 }) animation.stop()["js","animation"]intermediate2025-08-29 11:54:05�� +!�1%3Code Example 54jsanimationsconst animation = animate(element, { opacity: 0 }) animation.cancel()["js","animation"]intermediate2025-08-29 11:54:05�� +!�1%3Code Example 51jsanimationsconst animation = animate(element, { opacity: 0 }) animation.pause()["js","animation"]intermediate2025-08-29 11:54:05�� +!� 1%3Code Example 50jsanimationsconst animation = animate(element, { opacity: 0 }) // Async/await await animation console.log("Animation complete") // Promise animation.then(() => { console.log("Animation complete") })["js","animation"]intermediate2025-08-29 11:54:05�l� +!�51%3Code Example 49jsanimationsconst animation = animate(element, { opacity: 0 }) const currentSpeed = animation.speed // Double current speed animation.speed = currentSpeed * 2["js","animation"]intermediate2025-08-29 11:54:05stop pointer events propagating to parent `motion` components using the `Capture` React props. For instance, a child can stop drag and tap gestures and their related `while` animations from firing on parents by passing `e.stopPropagation()` to `onPointerDownCapture`. ``` <motion.div whileTap\={{ scale: 2 }}\> <button onPointerDownCapture\={e \=> e.stopPropagation()} /> </motion.div\> ``` Note: SVG filters ----------------- Gestures aren't recognised on SVG `filter` components, as these elements don't have a physical presence and therefore don't receive events. You can instead add `while-` props and event handlers to a parent and use variants to animate these elements. ``` const MyComponent = () \=> { return ( <motion.svg whileHover\="hover"\> <filter id\="blur"\> <motion.feGaussianBlur stdDeviation\={0} variants\={{ hover: { stdDeviation: 2 } }} /> </filter\> </motion.svg\> ) } ```[{"title":"Code Example 1","description":"","code":"<motion.button\n whileHover={{\n scale: 1.2,\n transition: { duration: 1 },\n }}\n whileTap={{ scale: 0.9 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","gesture"]},{"title":"Code Example 2","description":"","code":"<motion.button\n whileTap=\"tap\"\n whileHover=\"hover\"\n variants={buttonVariants}\n>\n <svg>\n <motion.path variants={iconVariants} />\n </svg>\n</motion.button>","language":"react","difficulty":"beginner","tags":["react","gesture"]},{"title":"Code Example 3","description":"","code":"<motion.a\n whileHover={{ scale: 1.2 }}\n onHoverStart={event => {}}\n onHoverEnd={event => {}}\n/>","language":"react","difficulty":"intermediate","tags":["react","gesture"]},{"title":"Code Example 4","description":"","code":"<motion.button whileTap={{ scale: 0.9, rotate: 3 }} />","language":"react","difficulty":"intermediate","tags":["react","gesture"]},{"title":"Code Example 5","description":"","code":"<motion.div onPan={(e, pointInfo) => {}} />","language":"react","difficulty":"beginner","tags":["react"]},{"title":"Code Example 6","description":"","code":"<motion.div drag whileDrag={{ scale: 1.2, backgroundColor: \"#f00\" }} />","language":"react","difficulty":"intermediate","tags":["react","gesture"]},{"title":"Code Example 7","description":"","code":"<motion.div\n drag=\"x\"\n dragConstraints={{ left: 0, right: 300 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","gesture"]},{"title":"Code Example 8","description":"","code":"const MyComponent = () => {\n const constraintsRef = useRef(null)\n\n return (\n <motion.div ref={constraintsRef}>\n <motion.div drag dragConstraints={constraintsRef} />\n </motion.div>\n )\n}","language":"react","difficulty":"beginner","tags":["react","gesture"]},{"title":"Code Example 9","description":"","code":"<motion.div\n drag\n dragDirectionLock\n onDirectionLock={callback}\n/>","language":"react","difficulty":"beginner","tags":["react","gesture"]},{"title":"Code Example 10","description":"","code":"<motion.a whileFocus={{ scale: 1.2 }} href=\"#\" />","language":"react","difficulty":"intermediate","tags":["react"]},{"title":"Code Example 11","description":"","code":"<motion.div whileTap={{ scale: 2 }}>\n <button onPointerDownCapture={e => e.stopPropagation()} />\n</motion.div>","language":"react","difficulty":"intermediate","tags":["react","gesture"]},{"title":"Code Example 12","description":"","code":"const MyComponent = () => {\n return (\n <motion.svg whileHover=\"hover\">\n <filter id=\"blur\">\n <motion.feGaussianBlur\n stdDeviation={0}\n variants={{ hover: { stdDeviation: 2 } }}\n />\n </filter>\n </motion.svg>\n )\n}","language":"react","difficulty":"intermediate","tags":["react","gesture"]}]{"props":[],"methods":[{"name":"stopPropagation","signature":"stopPropagation()","description":"stopPropagation method"}],"types":[]}["react","gestures","animation","gesture","scroll","drag","motion","transition"]2025-08-29 11:54:062025-08-29 11:54:06 &C � O � �  � "���_V��&�N�{ +!�y1%3Code Example 21jsanimationsanimate( element, { x: 100, rotate: 0 }, { duration: 1, rotate: { duration: 0.5, ease: "easeOut" } } )["js","animation"]intermediate2025-08-29 11:54:05��z +!� 1%3Code Example 20jsanimationsanimate( element, { x: 100, rotate: 0 }, { duration: 1 } )["js","animation"]intermediate2025-08-29 11:54:05�>�y +!�ME3Code Example 19jsanimationsimport { stagger, animate } from "motion" animate(".item", { x: 300 }, { delay: stagger(0.1) })["js","animation","stagger"]advanced2025-08-29 11:54:05��x +!�i/%3Code Example 18jsanimationsconst color = motionValue("rgba(255, 0, 0, 1)") const box = new THREE.BoxGeometry() const sequence = [ ["li", { x: 100 }], [box.position, { y: 10 }], [color, "#444"] ]["js","timeline"]intermediate2025-08-29 11:54:05� �w +!�G%3Code Example 17jsanimationsanimate(sequence, { defaultTransition: { duration: 0.2 } })["js","animation","timeline"]intermediate2025-08-29 11:54:05��v +!iG%3Code Example 16jsanimationsanimate(sequence, { duration: 10, repeat: 2 })["js","animation","timeline"]intermediate2025-08-29 11:54:05��u +!YG3Code Example 11jsanimationsconst sequence = [] animate(sequence)["js","animation","timeline"]beginner2025-08-29 11:54:05�1�t +!�?1%3Code Example 10jsanimationsconst camera = new THREE.Camera() animate(camera.rotation, { y: 360 }, { duration: 10 })["js","animation"]intermediate2025-08-29 11:54:05�/�s )!�=1%3Code Example 9jsanimationsconst values = { x: 100, color: "#f00" } animate(values, { x: 200, color: "#00f" })["js","animation"]intermediate2025-08-29 11:54:05��r )!�1%3Code Example 8jsanimationsconst x = motionValue(0) animate(x, 200, { duration: 0.5 })["js","animation"]intermediate2025-08-29 11:54:05��q )!�_1%3Code Example 7jsanimations// Numbers animate(0, 100, { onUpdate: latest => console.log(latest) }) // Colors animate("#fff", "#000", { duration: 2 onUpdate: latest => console.log(latest) })["js","animation"]intermediate2025-08-29 11:54:05{�p )!_13Code Example 6jsanimationsanimate("circle", { pathLength: [0, 1] })["js","animation"]beginner2025-08-29 11:54:05|�o )!a13Code Example 5jsanimationsanimate(element, { "--rotate": "360deg" })["js","animation"]beginner2025-08-29 11:54:05u�n )!K1%3Code Example 4jsanimationsanimate("div", { rotate: 360 })["js","animation"]intermediate2025-08-29 11:54:05��m )!�g1%3Code Example 3jsanimations// Element(s) const box = document.getElementById("box") animate(box, { opacity: 0 }, { duration: 0.5 }) // CSS selectors animate("div", { opacity: 0 }, { duration: 0.5 })["js","animation"]intermediate2025-08-29 11:54:05�,�l )!�?13Code Example 2jsanimations// Hybrid import { animate } from "motion" // Mini import { animate } from "motion/mini"["js","animation"]beginner2025-08-29 11:54:05s�k )!G1%3Code Example 1jsanimationsanimate("li", { opacity: 0 })["js","animation"]intermediate2025-08-29 11:54:05�z�j +!�E7%3Code Example 29reactanimationsimport { useMotionValue, motion, animate } from "motion/react" function Counter() { const count = useMotionValue(0) useEffect(() => { const controls = animate(count, 100, { duration: 5 }) return () => controls.stop() }, []) return <motion.pre>{count}</motion.pre> }["react","animation"]intermediate2025-08-29 11:54:05�9�i +!�C7%3Code Example 28reactanimationsfunction MyComponent() { const [scope, animate] = useAnimate() useEffect(() => { const controls = animate([ [scope.current, { x: "100%" }], ["li", { opacity: 1 }] ]) controls.speed = 0.8 return () => controls.stop() }, []) return ( <ul ref={scope}> <li /> <li /> <li /> </ul> ) }["react","animation"]intermediate2025-08-29 11:54:05 ���VȀ��QȀ����&`002B�@H S@H S@H d�J49+T�$49+T�$49+T:�OV�*�V�*�V�*�|7Eu �KI�4Q�@m]R �}b9IeM H  s7�s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$B��HR ��d9In V  v?W� �'W�p�� =]jvM4-�|7Eu �KI�4Q�@m]R �}b9IeM H  s7002��� �9�&1=�7f9�z�g19�Sdeg8�M�N�Mf04�{�a�a �fpx8 �0�4 �1<z �0�4vh8���12$�"�t�t��P3�.3�.3�6�a�a�Tb�mE�`2V�mW� `r! 5p G G/tn�t�3D#X4�)/P/q/1i D( ;,   #<>"~4W�mW�(�br! 5n V.wPk� � x�!` TZ�+�Tb�mE�`2V�mW� `r! 5p G G/t04��a�a� ��DI�Q�g� 02$�@H)U@H)U@H).�YnIW�(nIW�(nIW �T�a_N�B�\C0�0DGBCd?�1�{G-1>�  �T�RaaN�b�mL�2 �T�a_N�B�\Cpx8 �2�.� �3�.�l �2�.vw8�V�W�V242 �5 �N �Spx8����16 �n �n282���kb<�36�p �p502�2��73�m�_�_�K802�d���2�-�2�f0"kb9 px<�A23�F$ �$ �$  �M G'�h �b�S��%:�%���+"n/�:Z/��q������f �00WKV�*f0Ww1W�20W�0WUnIW333Wz50vhW�waW�"*�%JboutW;ctW�iveW � dvancedW #>llW �=soW�YndW Yh�imateW%-$�NFdW  ingW�onW ��&{ cancelW�. ompleteW�/ sW l� tartW�-yW�lpiW�LplyW�;reW �nW3sW�ttrW�effectW� utomaticallyW "IvailableW �j�AbackgroundcolorW�AeW�#GcauseWreaksW�utW<yW #5�) calculatedW�|ledW�InW\*#GsesW@hangeWNc�sWd>leanW�ZolorWr�?mponentW- sW.sableWnsoleW Pc�%tWH+-8I�tinuityW�rolW%reWreateW EdW!gingWXurrentlyW�destroyW �WuringW�effectW �sW)�lementW�?sW�?ndWjsW� tcW�xventsW �(xistingWkf00W t�ffW�8orW =�0rameW�&q loopWomW��j3unctionW 'e�> generallyW7tW_e svelocityW�cq?haveW8owWifW �a9mportW ��nW�|itialW�stanceW�q telligentlyW�{sW�il9 animatingW�tWA��nsW}jsWumpW �ssW�tlastW� testWO`T- eearnWiW �4 keW�` #stenerW�MogW Qc�%manuallyWGethodW hFotionW< ++ GF 2-valueWJ+ ��newW o�xtW�BonW�eumberW �aericalW�fofW �Bu nWMF�eceW�'pacityW�0timisedWrW )fh-passedW � erW�(formantWossibleW C�reviousW ��opW� effectW�rtiesWratherW�eactW+dW�OferenceWnderW��edW�ingW 'setsW�turnsW�N 90sW B�etW]Y P,1 sW�hignalWomethingW5tartingWnteW]8�< opW �ringW� yleW ��)effectW �ubscribeWb�D dW�' rsW�\ystemW tW4hanW�tW �oJeW@ !D ! ! & .irW`mWFyW (inkW:sW�^rottlesWoW* 9 !/ 5<2 :rackWingWueW�ypesW�u understandWitW�t subscribeW �KpW�[datedW�:sageW�eW?dW ingW�~uallyW valueW.�$ L  %;sW  >+6\`elocityW�? c.iaW e-wayW�~henW m�]illW{�*�thW(p$xW$I KH ;@youW6'                       '             %        ��  port them separately to use them directly, either for use with the tiny `animate` function from `"motion/dom"` or for novel use-cases. Usage ----- All of Motion's easing functions can be imported straight from `"motion"`: ``` import { easeIn } from "motion" ``` By passing a `0`\-`1` progress value to these functions, you'll receive an eased progress back. ``` const eased = easeIn(0.75) ``` Functions --------- Motion provides a number of built-in easing functions: * `cubicBezier` * `easeIn`/`easeOut`/`easeInOut` * `backIn`/`backOut`/`backInOut` * `circIn`/`circOut`/`circInOut` * `anticipate` * `linear` * `steps` > _I usually use the_ `_"easeOut"_` _curve for enter and exit transitions. The acceleration at the beginning gives the user a feeling of responsiveness. I use a duration no longer than_ `_0.3_`_/_`_0.4_` _seconds to keep the animation fast._~ Emil Kowalski, [Animations on the Web](https://animations.dev/) ### `cubicBezier` `cubicBezier` provides very precise control over the easing curve. ``` import { cubicBezier } from "motion" const easing = cubicBezier(.35,.17,.3,.86) const easedProgress = easing(0.5) ``` New easing curve definitions can be generated with [Motion Studio](../studio). ### `steps` `steps` creates an easing with evenly-spaced, discrete steps. It is spec-compliant with [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#step-easing-function) `[steps](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#step-easing-function)` [easing](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#step-easing-function). ``` import { steps } from "motion" const easing = steps(4) easing(0.2) // 0 easing(0.25) // 0.25 ``` By default, the "steps" change at the end of a step, this can be changed by passing `"start"` to `steps`: ``` const easing = steps(4, "start") easing(0.2) // 0.25 ``` The distribution of steps is linear by default but can be adjusted by passing `progress` through another easing function first. ``` const easing = steps(4) easing(circInOut(0.2)) ``` Modifiers --------- Easing modifiers can be used to create mirrored and reversed easing functions. ### `reverseEasing` `reverseEasing` accepts an easing function and returns a new one that reverses it. For instance, an ease in function will become an ease out function. ``` import { reverseEasing } from "motion" const powerIn = (progress) \=> progress \* progress const powerOut = reverseEasing(powerIn) ``` ### `mirrorEasing` `mirrorEasing` accepts an easing function and returns a new one that mirrors it. For instance, an ease in function will become an ease in-out function. ``` import { mirrorEasing } from "motion" const powerIn = (progress) \=> progress \* progress const powerInOut = mirrorEasing(powerInOut) ```[{"title":"Code Example 2","description":"","code":"import { easeIn } from \"motion\"","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 4","description":"","code":"import { cubicBezier } from \"motion\"\n\nconst easing = cubicBezier(.35,.17,.3,.86)\n\nconst easedProgress = easing(0.5)","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 5","description":"","code":"import { steps } from \"motion\"\n\nconst easing = steps(4)\n\neasing(0.2) // 0\neasing(0.25) // 0.25","language":"javascript","difficulty":"beginner","tags":["js","keyframes"]},{"title":"Code Example 8","description":"","code":"import { reverseEasing } from \"motion\"\n\nconst powerIn = (progress) => progress * progress\n\nconst powerOut = reverseEasing(powerIn)","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 9","description":"","code":"import { mirrorEasing } from \"motion\"\n\nconst powerIn = (progress) => progress * progress\n\nconst powerInOut = mirrorEasing(powerInOut)","language":"javascript","difficulty":"beginner","tags":["js"]}]["js","reference","easing","functions","animation","motion","transition"]2025-08-29 11:54:122025-08-29 11:54:12 ""�V������0�� �7�Y" � �7 � �7 �� �� �� � �7 � �7 �� 0convenient�&�y�y�_�z�z �G� � �`�X�X �&�y�y�_�z�z �G� � �`�X�Xrsion� �y�y�C�z�z� �y�y�C�z�zordinate�F�3�3�8�G�G����>�� �F�3�3�8�G�G����>��pilot �T �Ty�}���q�{�{� �p�p �e �x �7�}���q�{�{� �p�p �e �u �4re����.�p�p����.�p�pner�B���B��rect�V0�J0�J0� 0�00�00�V0�J0�J0� 0�00�00ed�*�x�x�H�^�^�*�x�x�H�^�^ion�}�p�p�>�v��v��v�r�`��`��`�}�p�p�>�v��v��v�r�`��`��`ly�p�p�p�u�T�T�p(�R(�R(�0�a�a�"(�8(�8( �G� � �p�p�p�u�T�T�p(�R(�R(�0�a�a�"(�8(�8( �G� � s�`�x�x�~�^�^�`�x�x�~�^�^uld �J� � �J� � nt�? �h �h �s �e �e �? �h �h �s �e �e down �L �Ler�=�y�y�=�y�ying�z��rse�&���s�p�p��_�_�&���s�p�ps�5�5��y�y�5�5�5�6���5�5 �5�5��y�y�5�5�5�6���5�5reate�2D�M�o��o��o$��y�y�@�c�3�3��z�z �:�T�x�x� ��a� � � �G�G�r�^�^ �!$�Z� �t� �t� ��� �|� �|� ��_�_�I�a�a�2D�M�o��o��o$��y�y�@�c�3�3��z�z �:�T�x�x� ��a� � � �G�G�r�^�^ �!$�Z� �t� �t� ��� �|� �|� d�)�{�{�Z�y�y�(�3�3�K� �r� �r� �{�T�T�y���(� � �3�c�c �E���%g�|g�|g�)�{�{�Z�y�y�(�3�3�K� �r� �r� �{�T�T�y���(� � �3�c�cs  � � � ��_�_  � � � ing ��3�3�x���=�G�G��c�c� �)�)�\�a�a ��3�3�x���=�G�G��c�c� �)�)on�j���j��or�~�x�x��^�^�~�x�x��^�^oss�`�)�)�`�)�)fade�G�&�T�&�T�&�u��J��J��x�G�&�T�&�T�&�u��J��J��x s�*�x�x�H�^�^�A�*�x�x�H�^�^�A ing�C�x�x�a�^�^�C�x�x�a�^�^ss�,��0\�Q�J,�o�J,�o�J,�i�p�p^�X�� /s�_�� /s�_�� /sB\�g8.  � 8.  � 8.  d ��� /�3� �� /�3� �� /�3(���D��D�0�W��W��W��\�2\��; �/ �/ (�O��F��F�(�IW�q�W�q�W�q���\��S\�\�oV�7V�7V\� \��V�V�V\��� � \�,\��2 �8 �8 \��,��0\�Q�J,�o�J,�o�J,�i�p�p^�X�� /s�_�� /s�_�� /sB\�g8.  � 8.  � 8.  d ��� /�3� �� /�3� �� /�3(���D��D�0�W��W��W��\�2\��; �/ �/ (�O��F��F�(�IW�q�W�q�W�q���\��S\�\�oV�7V�7V\� \��V�V�V\��� � ube��{�{��{�{ic�J�3�3 �W���%�{�{��� �J�3�3 �W���%�{�{���bezier.�@ �@ �@ rrent��v��v��v.�"�'$a�}�'$a�}�'$a� �'�U�'�U�'�f���'�c'�c'��G�G����/�L����v��v��v.�"�'$a�}�'$a�}�'$a� �'�U�'�U�'�f���'�c'�c'��G�G����/�L��ly� ���4��\��\��V�3�3��j�l�j�l�j�q�x�x�9�m�v�m�v�m��^�^�w��X�X� �a�a� ���4��\��\��V�3�3��j�l�j�l�j�q�x�x�9�m�v�m�v�m��^�^�w��X�Xspeed�u �+ �+ �u �+ �+ sor&P�6�� � �,�8�o�o�N&H��>�d�d�&P�6�f    �1H��N,P�6�     aP�6�CP�6�  �4 �jH��H��xH��P�6N\/Zo1:,Y�+D7���F',R7-�RT!��^! ""�V������0J��mW� `r! 5p G G/t�0�mW� `r! 5p G G/t�0�mW� `r! 5p G G/t�B�x�3D#X4�)/P/q/1i D( ;,   #<>"~�@�3D#X4�)/P/q/1i D( ;,   #<>"~�@�3D#X4�)/P/q/1i D( ;,   #<>"~��y�mW�(�br! 5n V.w�>�mW�(�br! 5n V.w�>�mW�(�br! 5n V.w@�:k� � x�Kk� � x�Kk� � x� �x�xL�J TZ�+� TZ�+� TZ�+.��1�n0�A�1�n0�A�1�n0"�P'�x'�x'@�uk� �$ x�Mk� �$ x�Mk� �$ x�)�^�^4�kZy�kZy�kZy"�]+�R+�R+�(�-%�)21�)�Z� H&c'& -%�)21�)�Z� H&c'& -%�)21�)�Z� H&c'&�}6� &I Z&I Z&I *��d�.�d�.�d�.��X�X�(�?-%�)21�)�Z� H&i)& -%�)21�)�Z� H&i)& -%�)21�)�Z� H&i)&010��{�{.��DI�Q�[�DI�Q�[�DI�Q�Q�x�x(��G�d�G�d�G.�A � � ��Z�'�Z�'�Z�U�Z�/�Z�/�Z��a�a��{�{.��DI�Q�[�DI�Q�[�DI�Q�Q�x�x(��G�d�G�d�G.�A � � ��Z�'�Z�'�Z�U�Z�/�Z�/�Z0X�jT�a_N�B�\C�T�a_N�B�\C�T�a_N�B�\C��4DGBCd?�1�{G-1>� �,DGBCd?�1�{G-1>� �,DGBCd?�1�{G-1>� X�#T�RaaN�b�mL�!T�RaaN�b�mL�!T�RaaN�b�mL����� � "�d<�8�W<�8�W<�8� �c�c4�o� 0�2� 0�2� 0^� m�d�5#"#�y m�d�5#"#�y m�d�5#"#^�G m�d�5#"#� m�d�5#"#� m�d�5#"#$�@H)U@H)U@H).�YnIW�(nIW�(nIWX�jT�a_N�B�\C�T�a_N�B�\C�T�a_N�B�\C��4DGBCd?�1�{G-1>� �,DGBCd?�1�{G-1>� �,DGBCd?�1�{G-1>� X�#T�RaaN�b�mL�!T�RaaN�b�mL�!T�RaaN�b�mL����� � "�d<�8�W<�8�W<�8� �c�c4�o� 0�2� 0�2� 0^� m�d�5#"#�y m�d�5#"#�y m�d�5#"#^�G m�d�5#"#� m�d�5#"#� m�d�5#"#px��.�M�.�M�.��3�3�U�.�N�.�N�.�V�x�x�k� � �%�G�G��^�^�s���B�)�) ��.�M�.�M�.��3�3�U�.�N�.�N�.�V�x�x�k� � �%�G�G��^�^�s���B�)�)vw�@�y�y�y�z�z�@�y�y�y�z�z24 � � � �C �L �B �U �b �( �O � �u �l �{ � �N �\ �  �R �* �7 �h �N �5 �N �S � � � �C �L �B �U �_ �% �O � �u �l �{ � �N �\ �  �R �* �7 �h �Npx�p�y�y��3�3�)�z�z�o�^�^�&���^���p�y�y��3�3�)�z�z�o�^�^�&���^��1�r�z�z �## �r�z�z24+ � ##5 � ##8���kb�{�x�x��^�^�{�x�x��^�^3�t�{�{�t�{�{50�2��7�O�3�3 �\������m�_�_�O�3�3 �\�����80�w�|�{�"&�j0"�N0"�N0"�|�!�4�A��.�d�T�K�Z�^D�.6A#%�y/$�6A#%�y/$�6A#%�y/$� �;��1� �D�f6A#%�y/$� 6A#%�y/$� 6A#%�y/$�\�-�d���2�-�2�w�|�{�"&�j0"�N0"�N0"�|�!�4�>��.�d�T�K�Z�^D�.6A#%�y/$�6A#%�y/$�6A#%�y/$� �;��1� �D�f6A#%�y/$� 6A#%�y/$� 6A#%�y/$�\�-kb� �3�3� �3�3kb � � � � � � px�+�x�x�I�^�^�+�x�x�I�^�^2�7��"�K'�h�p'�h�p'�h��m�m(�=��%�B��%�B��%� ��%���+"n/�:Z/��Q�%���+"n/�:Z/��Q�%���+"n/�:Z/�(�v�V�'��V�'��V�'6�;o� �2HUo� �2HUo� �2H�$�x�x6�vo� �!2FYo� �!2FYo� �!2F�B�^�^R�3�Z��#�1W� 3�Z��#�1W� 3�Z��#�1W�f�y�y�K� � �b�X�XR�>3�Z��#�1Y�&3�Z��#�1Y�&3�Z��#�1Y�F$ �$ �$ �7��"�K'�h�p'�h�p'�h��m�m(�=��%�B��%�B��%� ��%���+"n/�:Z/��Q�%���+"n/�:Z/��Q�%���+"n/�:Z/�(�v�V�'��V�'��V�'6�;o� �2HUo� �2HUo� �2H�$�x�x6�vo� �!2FYo� �!2FYo� �!2F�B�^�^R�3�Z��#�1W� 3�Z��#�1W� 3�Z��#�1W�f�y�y� ��T�P,� |% ,I�F, ""�V������0 ��K� � /�b�X�XR�>3�Z��#�1Y�&3�Z��#�1Y�&3�Z��#�1Y020��y�y�V�z�z�+�M�-�M�-�M�[�G�G�_�^�^��y�y�V�z�z�+�M�-�M�-�M�[�G�G�_�^�^0�m�y�y"�a�v�$�v�$�v�h�z�z .�k���_������0�T0�T0�m�y�y"�a�v�$�v�$�v�h�z�z .�k���_�����0����E�N�D�W�d�*�Q��w�n�}��P�^�"�T�,�9�j�P�7�P�U����E�N�D�W�a�'�Q��w�n�}��P�^�"�T�,�9�j�Ppx ��^�^��^�^20��w�w� �x�x��w�w� �x�x3�-�{�{�-�{�{4�M�_�_5�^*T�9*T�9*T�M�w�R�w�R�w�,V�,V�,V�T,V� ,V� ,V�J �? �? �^*T�9*T�9*T�M�w�R�w�R�w�,V�,V�,V �##�T,V� ,V� ,V5�_ � � �( �i �i ��w�w��3�3��x�x�_ � � �( �i �i ��w�w��3�3��x�x3(�p�)�M�)�M�)4��/�M�;��/�M�;��/�M�;(�k�1)� �1)� �1)�M;Q�L;Q�L;Q� %=�%=�%=�*�G�G�;Q�Y;Q�Y;Q�;%?�~%?�~%?.��#E�)�t�#E�)�t�#E�)�j�{�{.�V�#E�)�|�#E�)�|�#E�)�O|'�@|'�@|'(�p�)�M�)�M�)4��/�M�;��/�M�;��/�M�;(�k�1)� �1)� �1)�M;Q�L;Q�L;Q� %=�%=�%=�*�G�G�;Q�Y;Q�Y;Q�;%?�~%?�~%?.��#E�)�t�#E�)�t�#E�)�j�{�{.�V�#E�)�|�#E�)�|�#E�)0 ����"�c�c����"�c�c0�i�{�{"�Ba�f�pa�f�pa�f�q�T�T�,�a�a����3���k���i�{�{"�Ba�f�pa�f�pa�f�q�T�T�,�a�a����3���k��2�,�{�{�,�{�{4�#���@�{�{��p�p�#���@�{�{��p�p33�~�a�a48����-�{�{� �p�p����-�{�{� �p�p5�l�_�_60���.� ^� ^� ^�`�p�p�5�d�Q�d�Q�d�r� � �Wq�q�q���.� ^� ^� ^�`�p�p�5�d�Q�d�Q�d�r� � deg�:�y�y�E�3�3�s�z�z�:�y�y�E�3�3�s�z�z9�K�_�_d�5�{�{�a���5�{�{�a��kb�L�{�{��3�3�L�{�{��3�34�P�{�{��&�[�&�[�&�lD�9D�9D�U�&�c�&�c�&"�Kz# �(z# �(z# �P�{�{��&�[�&�[�&�lD�9D�9D�U�&�c�&�c�&00 �P�G�G �[� � �P�G�G �[� � 44�$�3�3�$�3�35� �@�;�@�;�@�&� �TW�A�_GX�zt 0 Q@ �Z �TW�A�_GX�zt 0 Q@ �Z �TW�A�_GX�zt 0 Q@ �D�<�@�<�@�<(�&�/6��/6��/6�M��$��H/�H/�H�*�G�G�V�W� �W� �W�U�c�c<��4{%�,j�4{%�,j�4{%�,<�8�4{%�2l�4{%�2l�4{%�2�- �{ �{ �t�_�_� �@�;�@�;�@�&� �TW�A�_GX�zt 0 Q@ �Z �TW�A�_GX�zt 0 Q@ �Z �TW�A�_GX�zt 0 Q@ �D�<�@�<�@�<(�&�/6��/6��/6�M��$��H/�H/�H�*�G�G�V�W� �W� �W�U�c�c<��4{%�,j�4{%�,j�4{%�,<�8�4{%�2l�4{%�2l�4{%�20�A�y�y�n�3�3�z�z�z �S��(�g� �Y� �Y� (�� �a� �a� �HJpHJpHJ�A�y�y�n�3�3�z�z�z �S��(�g� �Y� �Y� (�� �a� �a� 0(�h�V ��V ��V �c�z�z �S��� ��(�h�V ��V ��V �c�z�z �S��� ��px�W�x�x� �^�^�W�x�x� �^�^px �l� � �l� � vh�{�a�akb�g�)�)�g�)�)px �q�X�X�q�X�X67�P�1�1 �]�}�}��� �P�1�1 �]�}�}���700�J������J�����1����<������<��20�M��5 �N�G�G��_�_ �N�G�G8� �y�y��3�3�9�z�z�-�G�G(�}�&��E�&��E�&�(�5�&��M�&��M�&�� �y�y��3@t�8�D �� �/+�'?@ �A +2�,�6�<k,R-+! ""�V������0��3 �9�z�z�-�G�G(�}�&��E�&��E�&�(�5�&��M�&��M�&�0800 �e�G�G�e�G�Gvw�n�x�x��^�^�n�x�x��^�^2����/�h�h��]�]����/�h�h��]�]3�Q�3�3 �^����� �Q�3�3 �^�����6�o�_�_9�0� �q� �q� �i�z�z�B� �K� �K� �}� �X� �X� �/�{�{� �X�X �0� �q� �q� �i�z�z�B� �K� �K� �}� �X� �X� �/�{�{� �X�X0�e�{�{�Q�dQ�dQ �6(�Y(�Y(�@S�.S�.S�xS�6S�6S�e�{�{�Q�dQ�dQ �6(�Y(�Y(�@S�.S�.S�xS�6S�6Sdeg �6� � �6� � 5����Y�p�p����Y�p�paH�pSI8�$C�FSI8�$C�FSI8�$C�f�#*0 $(l]%�)t*0 $(l]%�)t*0 $(l]%�)T�(�z>� $[6F�z>� $[6F�z>� $[6��p�c3/~i=_(%1zu~@�c3/~i=_(%1zu~@�c3/~i=_(%1zu~C�h� �v#.a&� �Q1S N?2.�P� ,"$6@;Jn&��v#.a&� �Q1S N?2.�P� ,"$6@;Jn&��v#.a&� �Q1S N?2.�P� ,"$6@;Jn&�"�(�c3/Vji?_(%I��K�c3/Vji?_(%I��K�c3/Vji?_(%I����v3"6�)MM66*3"6�)MM66*3"6�)MM66�8�^1 T ��Q^> :UZJA6$� 1 T ��Q^> :UZJA6$� 1 T ��Q^> :UZJA6$:�u�kD*��kD*��kD*T�]� YH5�5n]� YH5�5n]� YH5�5L�>'~M.�='~M.�='~M.��."3"6�M66)"3"6�M66)"3"6�M66�:�<P1 X ��=^> :UZJA6$1P1 X ��=^> :UZJA6$1P1 X ��=^> :UZJA6$(�-�mD��mD��mD6� a�d=H< a�d=H< a�d=H�L�l0-G31] K2;4.-I{ +& �<�Sa 0-G31] K2;4.-I{ +& �<�Sa 0-G31] K2;4.-I{ +& �<�Sa �($�1S$^S$^S$4�=X�L=X�L=X6�b`W�Om`W�Om`W�O<�,l8!/VYl8!/VYl8!/V�F�$0-G31] K2;4.-I{ +& �<�We 0-G31] K2;4.-I{ +& �<�We 0-G31] K2;4.-I{ +& �<�We$�(&�R&�R&��@6Sm6Sm6S:�)�H)�)�H)�)�H)4�&*�%J�>*�%J�>*�%JH�pSI8�$C�FSI8�$C�FSI8�$C�f�#*0 $(l]%�)t*0 $(l]%�)t*0 $(l]%�)T�(�z>� $[6F�z>� $[6F�z>� $[6��p�c3/~i=_(%1zu~@�c3/~i=_(%1zu~@�c3/~i=_(%1zu~C�h� �v#.a&� �Q1S N?2.�P� ,"$6@;Jn&��v#.a&� �Q1S N?2.�P� ,"$6@;Jn&��v#.a&� �Q1S N?2.�P� ,"$6@;Jn&�"�(�c3/Vji?_(%I��K�c3/Vji?_(%I��K�c3/Vji?_(%I����v3"6�)MM66*3"6�)MM66*3"6�)MM66�8�^1 T ��Q^> :UZJA6$� 1 T ��Q^> :UZJA6$� 1 T ��Q^> :UZJA6$:�u�kD*��kD*��kD*T�]� YH5�5n]� YH5�5n]� YH5�5L�>'~M.�='~M.�='~M.��."3"6�M66)"3"6�M66)"3"6�M66�:�<P1 X ��=^> :UZJA6$1P1 X ��=^> :UZJA6$1P1 X ��=^> :UZJA6$(�-�mD��mD��mD6� a�d=H< a�d=H< a�d=H�L�l0-G31] K2;4.-I{ +& �<�Sa 0-G31] K2;4.-I{ +& �<�Sa 0-G31] K2;4.-I{ +& �<�Sa �($�1S$^S$^S$4�=X�L=X�L=X6�b`W�Om`W�Om`W�O<�,l8!/VYl8!/VYl8!/V�F�$0-G31] K2;4.-I{ +& �<�We 0-G31] K2;4.-I{ +& �<�We 0-G31] K2;4.-I{ +& �<�We$�(&�R&�R&�b��x�x�-�^�^��x�x�-�^�^le�)�y�y�b�z�z��T�T��x�x�V�a�a�8�^�^�)�y�y�b�z�z��T�T��x�x�V�a�a�8�^�^out�]���X�{�{(�ydB%1�|dB%1�|dB%1��x�x�w��� � � �0�^�^��c�c�6� � ��X�X�?�a�a�]���X�{�{(�ydB%1�|dB%1�|dB%1��x�x�w��� � � �0�^�^��c�c�6� � ��X�Xve �z����c�c�c���z����c�c�c��solute�n�O�f�O�f�O�#�G�G�.���f�� �n�O�f�O�f�O�#�G�G�.���f��cademy�m�x�x� �^�^�m�x�x� �^�^ celerated�d�{�{�;�p�p�z� � �d�{�{�;�p�p�z� � ion�>�y�y�w�z�z�J� � �,��F,Q? ��+�K+|�o@d0G ""�V������0 ��d���6�_�_�>�y�y�w�z�z�J� � �,���d��0accept�}�y�y�"b�Sb�Sb�6�z�z�u�T�T� �l �l �0�a�a�#���r�@�k�@�k�@����}�y�y�"b�Sb�Sb�6�z�z�u�T�T� �l �l �0�a�a�#���r�@�k�@�k�@ed � o�o�o�"�{�{� o�o�o�"�{�{s�;�� �H!�`!�`!�O�{�{�H� � �aY�Y�Y�!�h!�h!�)�8)�8)�;�� �H!�`!�`!�O�{�{�H� � �aY�Y�Y�!�h!�h!ss�?���(�p�p�U�y�y�p�z�z �##�@�W�{�{�g� � �4�X�X�^���?���(�p�p�U�y�y�p�z�z �##�@�W�{�{�g� � �4�X�Xibility�-�5�-�5�-�5�)�T�T�-�5�-�5�F�a�a�-�5�-�5"�9� �N� �N� �-�5�-�5�-�5�)�T�T�-�5�-�5�F�a�a�-�5�-�5"�9� �N� �N� le��)�-�)�-�)�M�4�/�4�/�4 �C�X�X ��)�-�)�-�)�M�4�/�4�/�4 �C�X�Xordion(�I11�11�11"�)3�+3�+3(�I11�11�11"�)3�+3�+3unt"�(�M�(�M�(�M"�9(�9�(�9�(�9"�(�M�(�M�(�M"�9(�9�(�9�(�9hieving�Y�{�{�Y�{�{ross�)�Q)�Q)�D+�5+�5+�;�r�r���{�{�{�z�z �)�Q)�Q)�D+�5+�5+�;�r�r���{�{�{�z�zt��a�aion��y�y�A�z�z� �I �I �F �V �V ��y�y�A�z�z� �I �I �F �V �V ve(�(�=��=��=�7�z�z�5�T�T�p�a�a�� � �_�X�X��J�J(�(�=��=��=�7�z�z�5�T�T�p�a�a�� � �_�X�Xs�H�x�x�f�^�^�H�x�x�f�^�^ual��T�T�a�x�x�P�a�a��^�^��T�T�a�x�x�P�a�a��^�^dd�����E_� _� _"�h��C��C� ���T�T��x�x�i�_�a�a�$�^�^����7�V�������E_� _� _"�h��C��C� ���T�T��x�x�i�_�a�a�$�^�^����7�V��ed��x�x�K�^�^��x�x�K�^�^ ventlistener�C� � ��X�X�C� � ��X�Xing��x�x�?�^�^��x�x�?�^�^tionally�(4�G4�G4�5�3�3�a4�H4�H4�C� � �[�������� �(4�G4�G4�5�3�3�a4�H4�H4�C� � �[��������just��3�3 �[����� ��3�3 �[�����ed�v�_�_ing�K������K�����vanced�^�p�p�G�x�x�8�G�G�s�^�^ &#�B�a�a�^�p�p�G�x�x�8�G�G�s�^�^tage(�P� � (�P� � ffect�T�3�3�p�x�x�#�^�^�^�)�) �T�3�3�p�x�x�#�^�^�^�)�)ing�W������W�����s�[$�]$�]$�$�e$�e$�[$�]$�]$�$�e$�e$ter:�E�v�i�P>�N�v�i�P>�N�v�i�P>�+�G�G"�y�P �'�P �'�P "�1�P �/�P �/�P :�E�v�i�P>�N�v�i�P>�N�v�i�P>�+�G�G"�y�P �'�P �'�P "�1�P �/�P �/�P children�|�y�y�%�z�z �L�n�n��t�t�|�y�y�%�z�z �L�n�n��t�tgain�9�3�3�9�3�3st�$�]$�]$�O$�e$�e$�$�]$�]$�O$�e$�e$i�v��(� �_� �_� �_�f�X�X�v��(� �_� �_� �_�f�X�Xms�`�`ll�f���t#�O#�O#"��p�t�p�t�p.�y� h�>�� h�>�� h�>(�A�"�I��"�I��"�I�C�T�T�{8� �2�A�2�A�2��H �2�'�G�G�~�a�a(�n�l�m�l�m�l�K���� � $�Y�;V�;V�;�^�X�X����"�h$�h$�h�m�_�_�A�U�U�f���t#�O#�O#"��p�t�p�t�p.�y� h�>�� h�>�� h�>(�A�"�I��"�I��"�I�C�T�T�{8� �2�A�2�A�2��E �/�'�G�G�~�a�a(�n�l�m�l�m�l�K���� � $�Y�;V�;V�;�^�X�X����"�h$�h$�how�G�x�x�e�^�^�G�x�x�e�^�^ing��y�y�L�z�z��y�y�L�z�zs�G������S���� � �G������S���� � most��y�y�@�z�z��y�y�@�z�zone�0���j�p�p�0���jG�J2� �.�[XZQ� a�!+U�,6-�B-p$W-7�#f8c�,-S. ""��V������0Ņp�p0along �p �? �p �?side� �y�y� �y�ypha0�y0�yready�k�y�y��z�z�`�x�x�~�^�^ �## �k�y�y��z�z�`�x�x�~�^�^ �##so�Q�IQ�IQ�<��_��_��U�U�UF�Dxa�x#�P��'xa�x#�P��'xa�x#�P�:�!��B �+��B �+��B @�}xa�8#�R:�Fxa�8#�R:�Fxa�8#�R:�V�T�T.�a��a���a���a�T���%K�AK�AK�1�G�G��a�a.��l�a�|�l�a�|�l�a��c�c.�J�M��8�M��8�M�"�- �s� �s� �s��A� � � #�#�#"�1+$=�R+$=�R+$="�e �s� �s� �s�� � �0���]�a�a�Q�IQ�IQ�<��_��_��U�U�UF�Dxa�x#�P��'xa�x#�P��'xa�x#�P�:�!��B �+��B �+��B @�}xa�8#�R:�Fxa�8#�R:�Fxa�8#�R:�V�T�T.�a��a���a���a�T���%K�AK�AK�1�G�G��a�a.��l�a�|�l�a�|�l�a��c�c.�J�M��8�M��8�M�"�- �s� �s� �s��A� � � #�#�#"�1+$=�R+$=�R+$="�e �s� �s� �s�� � ternates�T�3�3 �v���.�� �T�3�3 �v���.��ways�\�y�y��z�z �z���2���i �y �y �\�y�y��z�z �z���2��mazing�/���Z�{�{�/���Z�{�{ount �(� � �A�{�{,�p�%�%�(� � �A�{�{,�p�%�%n�D9�R9�R9��H�5�H�5�H� J�J�J(�\x�!�Rx�!�Rx�!p�))�P� :V�,�+-�^))�P� :V�,�+-�^))�P� :V�,�+-(�Uz�!�Qz�!�Qz�!.�kT"�R�T"�R�T"�RH�m�<+��;{H} �<+��;{H} �<+��;{H}*�{%4�#%4�#%4�NF�5� �)�Q�=� �)�Q�=� �)�Q.�&T"rR�T"rR�T"rR@�S-� �;{H}�8-� �;{H}�8-� �;{H}"�3%0�x%0�x%0�p��L�>�<� �]�+$��<� �]�+$��<� �]�+$�(� '-�$ '-�$ '-��a�,�a�,�a�������:�X�XL�v�<� �]�+$� �<� �]�+$� �<� �]�+$�n� �� �� 0 � C�'C�'C�B�}{�}{�}{��D9�R9�R9��H�5�H�5�H� J�J�J(�\x�!�Rx�!�Rx�!p�))�P� :V�,�+-�^))�P� :V�,�+-�^))�P� :V�,�+-(�Uz�!�Qz�!�Qz�!.�kT"�R�T"�R�T"�RH�m�<+��;{H} �<+��;{H} �<+��;{H}*�{%4�#%4�#%4�NF�5� �)�Q�=� �)�Q�=� �)�Q.�&T"rR�T"rR�T"rR@�S-� �;{H}�8-� �;{H}�8-� �;{H}"�3%0�x%0�x%0�p��L�>�<� �]�+$��<� �]�+$��<� �]�+$�(� '-�$ '-�$ '-��a�,�a�,�a�������:�X�XL�v�<� �]�+$� �<� �]�+$� �<� �]�+$�n� �� �� dd �!�T0�<�'!�T0�<�'!�T0�<�>   !F�K�h`"i4"K�h`"i4"K�h`"i4-: �H)n�t=�0)n�t=�0)n�t=�#�$�{ # �  �CNr\q�� # �  �CNr\q�� # �  �CNr\q�}@   (�~ � #� �od�%rT= B�y �~"7'�n #� �od�%rT= B�y �~"7'�n #� �od�%rT= B�y �~"7'��&�4 # �  ��VNl��� # �  ��VNl��� # �  ��VNl����� c;#@"TB-9 28.1; c;#@"TB-9 28.1; c;#@"TB-9 28.1( k�,�q1��(h48H�4X9B-Y"1��(h48H�4X9B-Y"1��(h48H�4X9B-Y'   AfF�b  �B�  �B�  �B�pZ �w&�Y�s($'x&�Y�s($'x&�Y�s($'!@�|�*- Y��*- Y��*- Y'��A f;#@"TB' ? 28.1: f;#@"TB' ? 28.1: f;#@"TB' ? 28.1:��R� �*�8H�4X9B-YK� �*�8H�4X9B-YK� �*�8H�4X9B-Y:>�  ��  ��  �7R�'�\ �94'�\ �94'�\ �9*C"�8�$�~BG9 DK'/>� �#�~BG9 DK'/>� �#�~BG9 DK'/>� �x $�/ a �p�v�v$>���I��I��I&> � :J�| :J�| :J�|8 �F;S�L;S�L;S�$� �\�~BG9 DK'/>� �+�~BG9 DK'/>� �+�~BG9 DK'/>� �D � K+) 6 K+) 6 K+) 6)(�MEiSEiSEi$>  �&z�` )Dz�` )Dz�` )>2 � Yh�Yh�Yh�#d �!�T0�<�'!�T0�<�'!�T0�<�>   !F�K�h`"i4"K�h`"i4"K�h`"i4-: �H)n�t=�0)n�t=�0)n�t=�#�$�{ # �  �CNr\q�� # �  �CNr\q�� # �  �CNr\q�}@   (�~ � #� �od�%rT= B�y �~"7'�n #� �od�%rT= B�y 'g� Fc0N�^ ""��V������03͂~"7'�n #� �od�%rT= B�y �~"7'� �&�4 # �  ��VNl��� # �  ��VNl��� # �  ��VNl����� c;#@"TB-9 28.1; c;#@"TB-9 28.1; c;#@"TB-9 28.1( k�,�q1��(h48H�4X9B-Y"1��(h48H�4X9B-Y"1��(h48H�4X9B-Y'   AeF�b  �B�  �B�  �B�oZ �w&�Y�s($'x&�Y�s($'x&�Y�s($'!@�|�*- Y��*- Y��*- Y'��A f;#@"TB' ? 28.1: f;#@"TB' ? 28.1: f;#@"TB' ? 28.1:��R� �*�8H�4X9B-YK� �*�8H�4X9B-YK� �*�8H�4X9B-Y:>�  ��  ��  �7R�'�\ �94'�\ �94'�\ �9*C"�8�$�~BG9 DK'/>� �#�~BG9 DK'/>� �#�~BG9 DK'/>� �x $�/ a �p�v�v$>���I��I��I&> � :J�| :J�| :J�|8 �F;S�L;S�L;S�$� �\�~BG9 DK'/>� �+�~BG9 DK'/>� �+�~BG9 DK'/>� �D � K+) 6 K+) 6 K+) 6) 0animatable�R�y�y� �z�z �s�R�y�y� �z�z �sex 75m5�^ X]�` X]�` X]�x7�,� C1*�( 7 H/(fC1*�( 7 H/(fC1*�( 7 H/(C^ 06I6�Qav2�av2�av2�N75m5A0 _ "VK OG'  NB^l�D"!)0 _ "VK OG'  NB^l�D"!)0 _ "VK OG'  NB^l�D"!$ �h j     4  + G  B d(]1KQ"#8-�X )9:M$     4  + G  B d(]1KQ"#8-�X )9:M$     4  + G  B d(]1KQ"#8-�X )9:M$�> 06I6$? _ "VK O"g'  NBS 4�T"#-? _ "VK O"g'  NBS 4�T"#-? _ "VK O"g'  NBS 4�T"#(75m5{"�Y]"�Y]"�Y�75m58$);5( JP(�m��G%(7$);5( JP(�m��G%(7$);5( JP(�m��G%(� 75m5�?��6����`Dw �)� �)� �)(06I6a"�d_"�d_"�d�06I6%);5* LR(�Y��G%(A);5* LR(�Y��G%(A);5* LR(�Y��G%(06I6��c�cp75m5M<  � 0l X<  � 0l X<  � 0l G�>75m5Y@"� 0adGSA#%�A:/$D<g@"� 0adGSA#%�A:/$D<g@"� 0adGSA#%�A:/$D<J�T@n�0�0�0$�R�w�w�&v�d�G�d�G�d.�h�G� �G� �G�206I6<@"� 0adGSA#%�A:/$G@h@"� 0adGSA#%�A:/$G@h@"� 0adGSA#%�A:/$G@�]��2�?�?�?�N� -$�NFz-$�NFz-$�NFx 75m5�^ X]�` X]�` X]�x7�,� C1*�( 7 H/(fC1*�( 7 H/(fC1*�( 7 H/(C^ 06I6�Qav2�av2�av2�N75m5A0 _ "VK OG'  NB^l�D"!)0 _ "VK OG'  NB^l�D"!)0 _ "VK OG'  NB^l�D"!$ �h j     4  + G  B d(]1KQ"#8-�X )9:M$     4  + G  B d(]1KQ"#8-�X )9:M$     4  + G  B d(]1KQ"#8-�X )9:M$�> 06I6$? _ "VK O"g'  NBS 4�T"#-? _ "VK O"g'  NBS 4�T"#-? _ "VK O"g'  NBS 4�T"#(75m5{"�Y]"�Y]"�Y�75m58$);5( JP(�m��G%(7$);5( JP(�m��G%(7$);5( JP(�m��G%(� 75m5�?��6����`Dw �)� �)� �)(06I6a"�d_"�d_"�d�06I6%);5* LR(�Y��G%(A);5* LR(�Y��G%(A);5* LR(�Y��G%(06I6��c�cp75m5M<  � 0l X<  � 0l X<  � 0l G�>75m5Y@"� 0adGSA#%�A:/$D<g@"� 0adGSA#%�A:/$D<g@"� 0adGSA#%�A:/$D<J�T@n�0�0�0$�R�w�w�&v�d�G�d�G�d.�h�G� �G� �G�206I6<@"� 0adGSA#%�A:/$G@h@"� 0adGSA#%�A:/$G@h@"� 0adGSA#%�A:/$G@d�4�{�{@�`3�N�\D� ""�V������0ǁ1 �(3�N�1 �(3�N�1 .�i�~���~���~�@�3�N�q �i3�N�q �i3�N�q �g�^��^��^��P��P��P�C���{����a�a�4�{�{@�`3�N�1 �(3�N�1 �(3�N�1 .�i�~���~���~�@�3�N�q �i3�N�q �i3�N�q �g�^��^��^��P��P��P�C���{��0animatenumber L�7 D� L�7 D� L�7L�7�G L�7 D� D� D� L�7 L�7�q�{�{�� � �N�X�X D��x�� L�7 D� L�7 D� L�7L�7�G L�7 D� D� D� L�7 L�7�q�{�{�� � �N�X�X D�presence*5�7�T �w �w �V(.��h �V �V *5�7�c�V�V�,".���U�U 5�765�7�qg�gg�gg�> 5�7 .�..��J g�I g�I g .� 5�7 5�7 .�*5�7�T �w �w �V(.��h �V �V *5�7�c�V�V�,".���U�U 5�765�7�qg�gg�gg�> 5�7 .�..��J g�I g�I g .� 5�7 5�7 .�s� ��i��i��+��O��O�� ��i��i��+��O��O�view � � � ���OK5 � � � � � � � � � � � ���OK5 � � � � �ing����m�{�{�N� �R� �R� F�[E�7�,�A&�rE�7�,�A&�rE�7�,�A&4�n�;1�!��;1�!��;1�!F�E�7�n�q&�E�7�n�q&�E�7�n�q&j��<1(�=Md>K`�=D��<1(�=Md>K`�=D��<1(�=Md>K`�=D^�l3(�?MN>K`�=D�93(�?MN>K`�=D�93(�?MN>K`�=D�K��(�uI�GT�!I�GT�!I�GT��{�{�#�)�)(�-I�GT�)I�GT�)I�GT�!�a�a����m�{�{�N� �R� �R� F�[E�7�,�A&�rE�7�,�A&�rE�7�,�A&4�n�;1�!��;1�!��;1�!F�E�7�n�q&�E�7�n�q&�E�7�n�q&j��<1(�=Md>K`�=D��<1(�=Md>K`�=D��<1(�=Md>K`�=D^�l3(�?MN>K`�=D�93(�?MN>K`�=D�93(�?MN>K`�=D�K��(�uI�GT�!I�GT�!I�GT��{�{�#�)�)(�-I�GT�)I�GT�)I�GTon�\K\:�046D ^� �046D ^� �046D ^�   7N�rV�t�Z{XV�t�Z{XV�t�Z{pXg+g�C'b\�4�C'b\�4�C'b\�.� \K\�fX�MK&�1R�Q�+X�MK&�1R�Q�+X�MK&�1R�Q�b?���1�^txwz�47� "  V 9          F�^txwz�47� "  V 9          F�^txwz�47� "  V 9          &�g+g�JX�WMM&�!�a�:X�WMM&�!�a�:X�WMM&�!�a�T\K\_ ��, ��, ��|�\K\`li1�WY �K=ili1�WY �K=ili1�WY �K=JkN\K\?+�@�+�@�+�@�Z�| n e�[Q�L n e�[Q�L n e�[Q�_6��v?Y�?Y�?Y'Jg+gB ��6 ��6 �� ~g+g�!k3�!AY �K=�Gk3�!AY �K=�Gk3�!AY �K=?4g+g"+�!+�!+�#P\K\8�A�]�A�]�A�?   "� \K\:2 ���09�:$ z%Z  $�'2 ���09�:$ z%Z  $�'2 ���09�:$ z%Z  $�+   !'��4 ��-�{�{�[&��W���=&��]���I���rg+g2 ���09�:$ z%Z  $�/2 ���09�:$ z%Z  $�/2 ���09�:$ z%Z  $�+$��&�� 0 �y�B��B��B�5> ��m�&{�?�&{�?�&{`�\K\:�046D ^� �046D ^� �046D ^�   7N�rV�t�Z{XV�t�Z{XV�t�Z{pXg+g�C'b\�4�C'b\�4�C'b\�.� \K\�fX�MK&�1R�Q�+X�MK&�1R�Q�+X�MK&�1R�Q�b?���1�^txwz�47� "  V 9          F�^txwz�47� "  V 9          F�^txwz�47� "  V 9          &�g+g�JX�WMM&�!�a�:X�WMM&�!�a�:X�WMM&�!�a�T\K\_ ��, ��, ��|�\K\`li1�WY �K=ili1�WY �K=ili1�WY �K=JLN\K\?+�@�+�@�+�3��C�7� ""�VȀ��� �0w+ GF 2-D5f!5   1 (*   # JT  .  % &!NHB,> t$   ( $ "%0'  �# f%E '! =#&"$LR9" / o<8  6T�d � %�;W�E �$ f%E '! /=#&"'LR// yB; D0 3%�KA:#Y" 4 ` #"!N<#' &TO�/E >;�;D 7< "f!5   1 (*   # JT  .  % &!NHB,> t$   ( $ "%0'  �# f%E '! =#&"$LR9" / o<8  0motionresolver7 � �value2 B� B�VB�� + ��t+ ��t+ ����  �}�< �Y�4 �~�1�_��  �}�<urnezubngsctz2ivwlqopus5�#�&�g�#�&�gunted<�Tse;�,vement9 �b1�5s; �Qing9�zilla3��A�A�v�L �$��D�vuch6�-�f�-ltiple6�j ��  �~ ��K4�)�j �� st2�h �y �y �=�y6��("#�( � component8� �1��name3�B�_�_�B�E� �:�Ei�B�E�d3�C�_�_�a�^�$�as9�an<�da<�|tive5*'*ural6 �[�G�Z� �% �[�Gly8�N��Nv9�b-/!igation;�Teat=�ced7��c�V � (��cs;��fgative9� sted<�%t6 �8 �8w3"�u�*)��*)��*)"�s��V��V� f� � � � g�k�+ '�g f� xt2� �"�F�a�a�$ �G� ��> �G� �o3�E�_�_F�#�e�`� F�#n2����i�a�ae8 �a  �a  �a rmal5��!�[y %��!t7�O�}�m�p��"�c�r�O�}e2�,;�I;�I;t�^ ��n{��l��g�L�o{� ���t�^ ��n{�vel3�i�_�_w2�[��i �|2�?i �|2pm5cgA/4cgA/4ull5�r �0N �sN�5�9�r �0Nmber2�g�g�g��_�_�a�a�a�A�h�3�!s2�x�q�q�K~�}H�g��}�K~�}tocolor2� �z �z erical4�j�a�axt79  9 object6 �x  �|��t �x 3d9�s6�GJ��$�Gtaining6� �ccur9�*f2*�jN)jN)jN:�\,)��\,)��\,)�6� �Bu ��Bu ��Bu ) ,c�� $�L;5w&X-�.8E��G(�$<�7E(�b]x�F�^)e,u�'k�jYG*:" I5 �U5 :*#!Q ($�%<�7EH"�d]xf = Bc�4lg0v"�1$�7�= D ]�C� ) ,c�� $�L;5w&X-�.8E��G(�$<�7E(�b]x�F�fers7= �O �P �Z<= �Oset6�t �#( �)�J�tten<�/ld9�0 �G n3�U�_�_<�QF�e]F�e]F�e�\�m  $�l�d��g !$�,�XJ(5�e!g��_ M�^�M�\�m  $�lce4�+�a�a |lick< �[� directionlock;�e2  � �K9�K9�KS�)�8)�8)C�E�i�@�h�w��0#^a�ihoverend;�Astart5�3�?�3ly7 �C�%�E�F�& �%�u�+ �C�%mount: �L seenter;�leave;�pan;�yointerdowncapture; � tap;�Mcancel;�Wstart;�Funmount: �Mpdate9�+ � pacity2� �y �y "�4�F�F �w s�9+�3� �2U�pY_�"5�KBt:s �)D)�w�z <35" #<)M:M$0V�0Ya�"5kQw�: \g �w s�9+�3� �2U�pY_�"5�KBten< �j�ed6�p �ps<�{posed;�/ing9�ptimised4��a�aon8�` �^p#�#�`ally9�rs6�)�Hx �Nqa�)r2!�|�s�s�g�_�_"�-fh-�lfh-�lfh-�E}�=h: �._O��Ok��) G0 �H�=  7>A% 2 ) TJ5/8i+.5IC$  �O1 �N;   �Y   "  ���XUO��e�/ [33https://motion.dev/docs/transformtransformjsutilitiesDiscover Motion's transform function to map an input value from one range to another. Learn how to use it with linear input ranges and various output types like numbers, colors, or complex strings.`transform` can map an input value from one range of values to another. ``` const numberToColor = transform( \[0, 100\], // Input \["#000", "#fff"\] // Output ) numberToColor(50) // rgba(128, 128, 128, 1) ``` Usage ----- Import `transform` from Motion. ``` import { transform } from "motion" ``` **Note:** React users can also use the [useTransform](./react-use-transform) hook for use with [motion values](./react-motion-value). A transformation function can be created by passing two ranges, an **input** range and an **output** range: ``` const transformer = transform(\[0, 100\], \[0, 360\]) ``` The transformer can now be called with an input value: ``` transformer(50) // 180 ``` Note: * Both ranges **must always be the same length**. * The **input range** must always be a linear series of numbers, either counting up or counting down. * The **output range** can be a non-linear series of numbers, colors, or complex strings. The input and output ranges can accept any number of values: ``` const x = \[\-100, 0, 100, 200\] const opacity = \[0, 1, 1, 0\] const transformer = transform(x, opacity) transformer(\-50) // 0.5 transformer(50) // 1 transformer(150) // 0.5 ``` If `clamp: false` is provided, the returned function will map infinitely: ``` const transformer = transform(\[0, 100\], \[0, 360\], { clamp: false }) const rotation = transformer(200) // 720 ``` Motion+ examples ---------------- [Motion+](./react-use-velocity) is a one-time payment, lifetime membership that gains you access to the source code of an ever-growing library of [premium examples](https://examples.motion.dev), as well as premium components like `[Cursor](./cursor)` and `[AnimateNumber](./react-animate-number)` and functions like [splitText](./split-text). Examples featuring `transform` include:[{"title":"Code Example 1","description":"","code":"const numberToColor = transform(\n [0, 100], // Input\n [\"#000\", \"#fff\"] // Output\n)\n\nnumberToColor(50) // rgba(128, 128, 128, 1)","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 2","description":"","code":"import { transform } from \"motion\"","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 3","description":"","code":"const transformer = transform([0, 100], [0, 360])","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 4","description":"","code":"transformer(50) // 180","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 5","description":"","code":"const x = [-100, 0, 100, 200]\nconst opacity = [0, 1, 1, 0]\nconst transformer = transform(x, opacity)\n\ntransformer(-50) // 0.5\ntransformer(50) // 1\ntransformer(150) // 0.5","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 6","description":"","code":"const transformer = transform([0, 100], [0, 360], { clamp: false })\n\nconst rotation = transformer(200) // 720","language":"javascript","difficulty":"intermediate","tags":["js"]}]["js","utilities","transform","motion"]2025-08-29 11:54:112025-08-29 11:54:11 ����.��������M�V̟SȀ���������� 00� 3�code�nst�example�from�import�js�motion�value�x�   �n������`�00f0�2�333� animate�ion�  utomatically� code�lor� nst�end�xample�isting�f00�js� motionvalue�the�will�      �Q������&�00�1�00�animate� ion�change�ode�nsole� t�example�js�latest� og�  motionvalue�on�x�        �e������N �00�_       00�y1�k     00�g  px�i28�y 4�_5�`0�}6�a7�b 8�c0�`9�d2�a   0�e0�e1�f2�g4�h6�i7�j8�k9�l3�i  0�m1�n2�o3�p5� 60�{4�t00�w5�_    0�`    6�v7�w20�~8�x6�  afterchildren�m lways�fnimate�_ ion�_ basefrequency�_lur�iouncestiffness�h  calculated�f hange�slamp�~ ode�_nsole�st�m    tainer�n ubicbezier�delay�ichildren�n tected�s iv�arag�d transition�dwer�vuration�j   easedprogress�in�ing� lement�i s�qxample�_false�~  eturbulence�_ff�y ilter�irame�wom�pgesture�dheight�t  idden�m   import�rnertia�ffinity�j  itial�nput�ys�v tem�m   js�qlast�p i�m#st�mog�smass�_ th�f x�g in�g odifytarget�ftion�_   nearest�fow�v  umbertocolor�y opacity�m    utput�y pixels�fower�d render�wpeat�jdelay�l type�k size�qtdelta�c speed�b verse�k gba�y otate�`ion�~ und�fscript�moll�qtipt�nection�`tup�mhow�n  nap�f pecific�qring�_          tagger�i  iffness�` op�xyle�w target�f emplate�m imeconstant�eo�fransform�y er�{  ition�_  ype�_ ul�mvariants�m   elocity�a iewport�que�_when�m idth�t x�}c .%   ,&  (    @`  l< <' o  # U   l   0 +   4(  $E$_  ""�V����� �0Ă@�$Z�| n e�[Q�L n e�[Q�L n e�[Q�_6��v?Y�?Y�?Y'Jg+gB ��6 ��6 �� ~g+g�!k3�!AY �K=�Gk3�!AY �K=�Gk3�!AY �K=?4g+g"+�!+�!+�#P\K\8�A�]�A�]�A�?   "� \K\:2 ���09�:$ z%Z  $�'2 ���09�:$ z%Z  $�'2 ���09�:$ z%Z  $�+   !'��4 ��-�{�{�[&��W���=&��]���I���rg+g2 ���09�:$ z%Z  $�/2 ���09�:$ z%Z  $�/2 ���09�:$ z%Z  $�+$��&0animationcancel�2�a�a omplete�3�a�a s~#�3� sg3W'�P sg3W'�P sg3W'�t    bn~?�e @ E  [�e @ E  [�e @ E  4d �� �6� W;� �6� W;� �6� W;}�#�3�$ �o+\�L> �AR|.� �o+\�L> �AR|.� �o+\�L> �AR|.� 7�, n~�X)�%n  1��J�K�E �X)�%n  1��J�K�E �X)�%n  1��J�K�E � �� �j0+\�N> aR� .� �j0+\�N> aR� .� �j0+\�N> aR� .�&#�3� �T�T�$�N#�3�2>S`�D} �  �r\/n2H-G>S`�D} �  �r\/n2H-G>S`�D} �  �r\/n2H-nQ`#�3�#5�)� #5�)� #5�)� �6 6 n~n."�Rn."�Rn."�N" n~�J�G�G�0 ��/�K��K��Kd�( �vMSd�F � �r\/n2H-,MSd�F � �r\/n2H-,MSd�F � �r\/n2H-1V �w#5�+�\#5�+�\#5�+�[ X#�3�# `�v�* `�v�* `�v�(h �2#�3�]  ;��?w �6 2�2  ;��?w �6 2�2  ;��?w �6 2v o$n~� s<&n~�{�{�wn~u� � �3 !n~:�)�)� n~� �X�X�f�( ��<  ;��?w �6 6�6  ;��?w �6 6�6  ;��?w �6 6p n~�4n~�.n~(�:�"�:�"�:� *n~|��B��B�b~#�3� sg3W'�P sg3W'�P sg3W'�t    bn~?�e @ E  [�e @ E  [�e @ E  4d �� �6� W;� �6� W;� �6� W;}�#�3�$ �o+\�L> �AR|.� �o+\�L> �AR|.� �o+\�L> �AR|.� 7�, n~�X)�%n  1��J�K�E �X)�%n  1��J�K�E �X)�%n  1��J�K�E � �� �j0+\�N> aR� .� �j0+\�N> aR� .� �j0+\�N> aR� .�&#�3� �T�T�$�N#�3�2>S`�D} �  �r\/n2H-G>S`�D} �  �r\/n2H-G>S`�D} �  �r\/n2H-nP`#�3�#5�)� #5�)� #5�)� �3 6 n~n."�Rn."�Rn."�N" n~�J�G�G�0 ��/�K��K��Kd�( �vMSd�F � �r\/n2H-,MSd�F � �r\/n2H-,MSd�F � �r\/n2H-1V �w#5�+�\#5�+�\#5�+�[ X#�3�# `�v�* `�v�* `�v�(h �2#�3�]  ;��?w �6 2�2  ;��?w �6 2�2  ;��?w �6 2v o$n~� s<&n~�{�{�wn~u� � �3 !n~:�)�)� n~� �X�X�f�( ��<  ;��?w �6 6�6  ;��?w �6 6�6  ;��?w �6 6p n~�4 tart�1�a�aother�*�y�y�%�z�z�y�T�T����G� � �O�c�c ����{�_�_�*�y�y�%�z�z�y�T�T����G� � �O�c�ctfu��p�p��p�picipate�p�3�3 ����7���'�_�_�p�3�3 ����7��y�T�'�V�'�V�'"�B��X��X�@��Q,�b�]h��Q,�b�]h��Q,�b�]h"�{��g��g�(�U�@��y�@��y�@�"�z`�[�A`�[�A`�[�Z�k�)�k�)�k"��5��5��5(��@�*�{�@�*�{�@�*"�0V�c�)V�c�)V�c��7�.�7�.�7�!�<�E�<�E�<��{�{�y�X�X�Y�<�M�<�M�<����p�a�a�T�'�V�'�V�'"�B��X��X�@��Q,�b�]h��Q,�b�]h��Q,�b�]h"�{��g��g�(�U�@��y�@��y�@�"�z`�[�A`�[�A`�[�Z�k�)�k�)�k"��5��5��5(��@�*�{�@�*�{�@�*"�0V�c�)V�c�)V�c��7�.�7�.�7�!�<�E�<�E�<��{�{�y�X�X�Y�<�M�<�M�<thing�+��m��m��P9�A9�A9�|9�'9�'9�_� � �+��m��m��P9�A9�A9�|9�'9�'9�_� � pi���o~� �{�{ �Z0o~�a�/� �h�/� �h�/� X�! <a �K�8 <a �K�8 <�r��R�9o ''�Q������&b�-!0hover�Ij  +  end�i start�I � ref�;5ybrid�l iconvariants�35d�= 5f�NV@#mg�Lport�C      n�dKactive�d  dex�gFfinity�W3o�[itial�G3 "stall�Asdone�d  on�?.pen�A  -selected�B5visible�\Htem�e  3  s�hG js�k@ ustifycontent�?5key�NHframes�b   latest�q  yout�L q         &     group�J  id�Ms/root�H5scroll�G5eft�85t�13 i�U         5near�E  # st�eFog�I(   Dmap�hss�  illiseconds�c ni�ldodal�\H    2    ules�Btion�A  !  "   !                       resolver�C value�rs�dy� component�iPnew�t xt�cone�Wpm�Aull�^Gmbers�qxt�Bonce�O lick�F directionlock�:hoverend�4 start�4mount�1 pan�6ointerdowncapture�<unmount�1pdate�q pacity�J            *en�F5s�F&5(riginx�VGur�dtput�d verflow�G  ,padding�Mn�kss�dth�d,# 5 length�d 0  #use� lugins�Cointerdowncapture�qinfo�65sition�xP5re�jG$ss�hogress�Vmise�ush�dreact�O   H f�iG   peat�W  delay� type� solver�C s�Ctdelta� K speed� turn�eB     #  " M � !9�6!�I4g 4 + �&  $   �?    �O%   ���>Jg-�I��!� �/33https://motion.dev/docs/vue-layout-animationsLayout animationvuelayoutAnimate layouts effortlessly in Vue with Motion's layout prop. Smoothly transition CSS, even between different elements using layoutId. Performant & flexible.Motion's industry-leading layout animations makes it easy to animate between any two layouts, even between different elements. It's as simple as a `layout` prop. ``` <motion.div layout /> ``` This little prop can animate previously unanimatable CSS values, like switching `justify-content` between `flex-start` and `flex-end`. ``` <motion.div layout :style\="{ justifyContent: isOn ? 'flex-start' : 'flex-end' }" /> ``` Or by using the `layoutId` prop, it's possible to match two elements and animate between them for some truly advanced animations. ``` <motion.li layoutId\="item" /> ``` It can handle anything from microinteractions to full page transitions. Usage ----- Any layout change that happens as a result of a Vue re-render can be animated. ``` <motion.div layout :style\="{ width: isOpen ? '80vw' : 0 }" /> ``` Note that CSS changes should happen immediately via `style`, not `animate`, as `layout` will take care of the animation. Layout changes can be anything, changing `width`/`height`, number of grid columns, reordering a list, or adding/removing new items: ### Shared layout animations When a new component is added that has a `layoutId` prop that matches an existing component, it will automatically animate out from the old component. ``` <motion.div v-if\="isSelected" layoutId\="underline" /> ``` If the old component is still mounted when the new component enters, they will automatically crossfade from the old to the new. When removing an element to animate back to its origin layout, `[AnimatePresence](./vue-animate-presence)` can be used to keep it in the DOM until its exit animation has finished. ``` <AnimatePresence\> <motion.div v-if\="isOpen" layoutId\="modal" /> </AnimatePresence\> ``` ### Setting a transition Layout animations can be customised using [the](./vue-transitions) `[transition](./vue-transitions)` [prop](./vue-transitions). ``` <motion.div layout :transition\="{ duration: 0.3 }" /> ``` If you want to set a transition specifically for **only** the layout animation, you can specify a specific `layout` transition. ``` <motion.div layout :animate\="{ opacity: 0.5 }" :transition\="{ default: { ease: 'linear' }, layout: { duration: 0.3 } }" /> ``` When performing a shared layout animation, the transition defined for element we're animating **to** will be used. ``` <motion.button i ���sTI�]��m g33https://motion.dev/docs/resizeresizejsutilitiesEfficiently monitor and react to size changes of the viewport, or HTML and SVG elements, with resize. This function uses the ResizeObserver API to provide performant, per-element resize event handling, complete with easy-to-use cleanup. Ideal for dynamic layouts and responsive component designs.`resize` allows you to monitor and react to size changes in the viewport, or specific HTML and SVG elements. ``` // Viewport resize(() \=> {}) // Specific elements resize("li", () \=> {}) ``` For optimal performance, all resize handlers are triggered via a single, shared `[ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)`. Usage ----- Import `resize` from `"motion"`. ``` import { resize } from "motion" ``` ### Tracking viewport changes Changes to the viewport can be detected by passing just a callback to `resize`: ``` resize(() \=> console.log("viewport change detected")) ``` The callback is provided a single argument, containing `width` and `height` getters. ``` resize(({ width, height }) \=> console.log(width, height)) ``` ### Tracking element changes By passing an element or CSS selector, `resize` can detect changes on specific elements. ``` resize("li", (element) \=> console.log(element, "change detected")) ``` This function is also provided `width` and `height` getters for each `element`: ``` resize(".drawer", (element, { width, height }) \=> { console.log(element, " is now ", width, height) }) ``` The returned `width` and `height` are the element's **border box**, which is the size of the element including the border. ### Responding to size changes For best performance, subsequent renders should be performed with the [Motion frameloop](./frame). This ensures DOM reads and writes are correctly batched to prevent layout and style thrashing. ``` resize(".drawer", (element, { width, height }) \=> { frame.render(() \=> { element.style.height = Math.max(400, height) }) }) ``` ### Cleanup `resize` returns a function that will, when called, remove the attached listeners. ``` const stop = resize(log) stop() ``` When there are no more listeners on an element, the element will be removed from the `ResizeObserver`, and when there are no more listeners at all, the `ResizeObserver` will be stopped.[{"title":"Code Example 1","description":"","code":"// Viewport\nresize(() => {})\n\n// Specific elements\nresize(\"li\", () => {})","language":"javascript","difficulty":"beginner","tags":["js","scroll"]},{"title":"Code Example 2","description":"","code":"import { resize } from \"motion\"","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 3","description":"","code":"resize(() => console.log(\"viewport change detected\"))","language":"javascript","difficulty":"beginner","tags":["js","scroll"]},{"title":"Code Example 4","description":"","code":"resize(({ width, height }) => console.log(width, height))","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 5","description":"","code":"resize(\"li\", (element) => console.log(element, \"change detected\"))","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 6","description":"","code":"resize(\".drawer\", (element, { width, height }) => {\n console.log(element, \" is now \", width, height)\n})","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 7","description":"","code":"resize(\".drawer\", (element, { width, height }) => {\n frame.render(() => {\n element.style.height = Math.max(400, height)\n })\n})","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 8","description":"","code":"const stop = resize(log)\nstop()","language":"javascript","difficulty":"beginner","tags":["js"]}]["js","utilities","resize","layout","motion"]2025-08-29 11:54:112025-08-29 11:54:11  �'1 � C � ��SȀ����*C00�,        1�R1�0        0�[0�,  & px�.1�\2�]3�^80�/-2�/    2�,3�;4�-5�\ 6�.7�/8�09�13�.     0�20�^ 1�32�43�560�? 4�:   5�3    6�< 7�=  1�R 8�E 9�;   0�\a�B  fterchildren�2 nimate�.  view�6ion�,pp�W t�C blur�.ounce�\   stiffness�- x�Sutton�> callback�E ncel�P hover�Epress�Qrousel�Fhild�C lientx�C y�C ode�,mponent�Snsole�>    t�2   tainer�3rossfade�6damping�^ efault�U lay�.  children�3 iv�, ocument�A rag�, transition�,uration�/    ease�;  in�Z out�Wout�< lement�.    nd�>  ed�Ivent�D  ter�6info�Hxample�,filter�.re�Hrom�5unction�S gesture�, telementbyid�A hidden�2   over�>    ed�A id�A mport�7nfinity�/  � �������011� backgroundcolor� change�  ode� lor� nst� element� xample� fff�  rame�  om� import� js� latest� motion� value� on�  render� style�     �������,�00� 10�0�animate�ion�code�example� getvelocity� js�ump�x�    �P������$300�1� 00�8�all�nimate�ion�pply�code�nst�elements�xample�frame�js�li�   motionvalue�next�on�pacity� set� tyleeffect� the�o�will�x�         ������� 00� 3�code�nst�example�from�import�js�motion�value�x�   �n������`�00f0�2�333� animate�ion�  utomatically� code�lor� nst�end�xample�isting�f00�js� motionvalue�the�will�      �Q������&�00�1�00�animate� ion�change�ode�nsole� t�example�js�latest� og�  motionvalue�on�x�        �@ < � � _ � q�d��~�I�r~�\���0� )�I13Code Example 5jsreferenceimport { steps } from "motion" const easing = steps(4) easing(0.2) // 0 easing(0.25) // 0.25["js","keyframes"]beginner2025-08-29 11:54:12�9� )�s3Code Example 4jsreferenceimport { cubicBezier } from "motion" const easing = cubicBezier(.35,.17,.3,.86) const easedProgress = easing(0.5)["js"]beginner2025-08-29 11:54:12d� )K3Code Example 2jsreferenceimport { easeIn } from "motion"["js"]beginner2025-08-29 11:54:12�7�~ )�g%3Code Example 6jsutilitiesconst transformer = transform([0, 100], [0, 360], { clamp: false }) const rotation = transformer(200) // 720["js"]intermediate2025-08-29 11:54:11�p�} )�a3Code Example 5jsutilitiesconst x = [-100, 0, 100, 200] const opacity = [0, 1, 1, 0] const transformer = transform(x, opacity) transformer(-50) // 0.5 transformer(50) // 1 transformer(150) // 0.5["js"]beginner2025-08-29 11:54:11[�| )93Code Example 4jsutilitiestransformer(50) // 180["js"]beginner2025-08-29 11:54:11v�{ )o3Code Example 3jsutilitiesconst transformer = transform([0, 100], [0, 360])["js"]beginner2025-08-29 11:54:11g�z )Q3Code Example 2jsutilitiesimport { transform } from "motion"["js"]beginner2025-08-29 11:54:11�G�y )�3Code Example 1jsutilitiesconst numberToColor = transform( [0, 100], // Input ["#000", "#fff"] // Output ) numberToColor(50) // rgba(128, 128, 128, 1)["js"]beginner2025-08-29 11:54:11d�x )K3Code Example 8jsutilitiesconst stop = resize(log) stop()["js"]beginner2025-08-29 11:54:11�I�w )�3Code Example 7jsutilitiesresize(".drawer", (element, { width, height }) => { frame.render(() => { element.style.height = Math.max(400, height) }) })["js"]beginner2025-08-29 11:54:11�.�v )�]3Code Example 6jsutilitiesresize(".drawer", (element, { width, height }) => { console.log(element, " is now ", width, height) })["js"]beginner2025-08-29 11:54:11��u )�3Code Example 5jsutilitiesresize("li", (element) => console.log(element, "change detected"))["js"]beginner2025-08-29 11:54:11~�t )3Code Example 4jsutilitiesresize(({ width, height }) => console.log(width, height))["js"]beginner2025-08-29 11:54:11��s )w+3Code Example 3jsutilitiesresize(() => console.log("viewport change detected"))["js","scroll"]beginner2025-08-29 11:54:11d�r )K3Code Example 2jsutilitiesimport { resize } from "motion"["js"]beginner2025-08-29 11:54:11��q )�+3Code Example 1jsutilities// Viewport resize(() => {}) // Specific elements resize("li", () => {})["js","scroll"]beginner2025-08-29 11:54:11�&�p +!�G3Code Example 33vueanimationsconst transition = { delayChildren: stagger(0.1, { from: "last" }) }["vue","animation","stagger"]advanced2025-08-29 11:54:11��o +!uG3Code Example 32vueanimationsconst transition = { delayChildren: stagger(0.1) }["vue","animation","stagger"]advanced2025-08-29 11:54:11��n +!�EG%3Code Example 31vueanimations<sctipt setup> const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { delayChildren: 0.5 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } </sctipt> <template> <motion.ul :variants="container" initial="hidden" animate="show" > <motion.li :variants="item" /> <motion.li :variants="item"/> </motion.ul> </template>["vue","animation","stagger"]intermediate2025-08-29 11:54:11�<�m +!�Q3%3Code Example 30vueanimations<script setup> const list = { hidden: { opacity: 0, transition: { when: "afterChildren" } } } const item = { hidden: { opacity: 0, transition: { duration: 2 } } } </script> <template> <motion.ul :variants="list" animate="hidden"> <motion.li :variants="item" /> <motion.li :variants="item" /> </motion.ul> </template>["vue","animation"]intermediate2025-08-29 11:54:11 _���������������ypg^ULC:1( ��������������}tkbYPG>5,# � � � � � � � � � � � � � � � x o f ] T K B 9 0 '    � � � � � � � � � � � � � � | s j a X O F = 4 + "    � � � � � � � � � � � � � �  u k a W M C 9 / %    � � � � � � � � � � � � � { q g ] S I ? 5 + !   � � � � � � � � � � � � � w m c Y O E ; 1 '   �������������}si_UKA7-#�������������yoe[QG=3) ������������ukaWMC9/%�������������{qg]SI?5+! �������������wmcYOE;1' �������������}si_UKA7-#�������_�^�] �\�[�Z�Y�X�W �V�U�T�S�R�Q �P�O �N�M�L�K�J �I�H�G�F*�E�D�C�B�A�@�? �>�=�< �;�:�9�8 �7 �6�5�4 �3�2 �1)�0#�/ �.�-�,+�+�*�)�(�'�&�%�$�#�" �! � ��!�� � ��� ��������� � �  � �  � � � � � � ��� � � � �~�}�|�{�z�y �x�w�v�u�t �s �r �q�p�o�n�m�l �k�j�i �h �g�f�e+�d8�c�b�a�`�_�^�]�\�[�Z �Y �X�W!�V�U �T �S�R�Q �P�O�N �M�L�K �J�I�H�G�F�E�D�C�B�A�@�?�> �=�<�;�:�9�8�7�6 �5�4�3 �2�1�0�/�.�-�,�+�*�)�(�' �&�% �$�#�"�!�  ����*������� ��� ���� �  � � �  � � �)�#� ���+��~}|{zyx w vut!sr q pon mlkjihgfe d c ba `_^ ] \ [ ZYX W V U TSRQPO NMLKJ I H GFEDCB A@? > =<;+:89876543210 / .-!,+ * )(' &%$ #"!           ""�V������0y� ^0box�N    geometry�xutton�G  ;   ! variants�3 5 y�fGcalc�Q G lback�:mera�t ncel� Hrousel�] hange�R  eckmarkpath�d-ildren�fGircle�_7lick�{oses�F5ode�Alor�d  s�q mplete�d . onent�P s�C nsole�I (   Dt�K             raintsref�9  5  tainer�Yrols�i   F    unt�j  G  er�j ss�murrent�i ( "   speed� stom�hG x�_Hdamping�O nger�cHefault�B� 5  transition�w ineconfig�C nuxtconfig�Blay�g  % children�f ialog�F5ff�R rectionlock�ov�D  0)          ocument�mlne�c uble� wn�R rag�72 constraints�84 directionlock�:5ts�Curation�F             ( *e�6 / ase�Y""$  # in� out�Y " " lement�m  K nd�? 5 vent�4 5 xample�Ait�N Hport�Bf00�sD   alse�HH& egaussianblur�= 5  turbulence�ff�q ilter� 4 5 xed�H5lex�?5or�/rom�C      unction�i _ generator�bsture�I  ;  *t� elementbyid�ml previous�Rray�dheight�RG0idden�b  C  a!  �=  7�\" # �# ." �2) |�@  L#{ '  ��xx|������|o04�tcode�tnsole�texample�theight�tjs�tlog�tresi�JĀ�����00�} 1�}  00�}50�}200�}5�}  0�}code�}nst�} example�}js�}opacity�}  transform�} er�} x�}  f���BT0180�|4�|50�|code�|example�|js�| transformer�|  �H������ �0reverse�  gb�J a�` 0 ight�8 5 oot�Ptate�E   "x�ion�t wvalue�1s�m ampleduration�dcale�F   7 + x�K � ope�i  G ript�Ke!= oll�K|                direction�Rer�Yref�P y�R  progress�K � econds�f*tion�S.2lectors�mquence�ut� isopen�Fopen�Iscrolldirection�Rtatus�dup�Ke=how�Npeed�i(  ring�U '          *           tagger�f  !  children�- rt�? 5 ed�Ite�d us�d  ddeviation�=5 iffness�|P op�i$    propagation�< 5 yle�K  C !   vg�d+O  +  tap�3rget�Zemplate�De " = he�F5n�is�F 5 ree�t ime�   T line�us�_!'o� ransform�U %  9  ition�F    5            latex�U' Due�C�  &ween�} ype�U ' *ul�E! !nderline�Mu5plugin�Cp�R seanimate�iGd�F 5 omref�neffect�i motionvalue�j Gevent�R ref�9scroll�K�pring�State�de  transform�Tv�A H  = alue�1&2 s�sr�W   : iants�a  A   + elocity� iewport�Osible�b   C   ! ualduration�te�Cue�AH 6watch�0hen�fG5ile�ddrag�75focus�;5hover�I  ;   * inview�J C"press�IR ? tap�T R idth�A5ll�F 5 x�Q   y�[ +  \  z� #+    �.7  #~" .  4~ Q3   @ #bC �Q  I6+$� %%R�V̟SȀ����*C00�,        1�R1�0        0�[0�,  & px�.1�\2�]3�^80�/-2�/    2�,3�;4�-5�\ 6�.7�/8�09�13�.     0�20�^ 1�32�43�560�? 4�:   5�3    6�< 7�=  1�R 8�E 9�;   0�\a�B  fterchildren�2 nimate�.  view�6ion�,pp�W t�C blur�.ounce�\   stiffness�- x�Sutton�> callback�E ncel�P hover�Epress�Qrousel�Fhild�C lientx�C y�C ode�,mponent�Snsole�>    t�2   tainer�3rossfade�6damping�^ efault�U lay�.  children�3 iv�, ocument�A rag�, transition�,uration�/    ease�;  in�Z out�Wout�< lement�.    nd�>  ed�Ivent�D  ter�6info�Hxample�,filter�.re�Hrom�5unction�S gesture�, telementbyid�A hidden�2   over�>    ed�A id�A mport�7nfinity�/  o�Pitial�3view�Ftem�2   js�6last�5 eaveinfo�Hs�Hi�2 near�Uk�B st�2og�>    math�=x�,in�,otion�,   config�W y�A nth�C on�>   pacity�2        p�=ath�Xlength�Xress�I    ed�L  react�,peat�/delay�1 type�0 turn�2      verse�0 otate�/ x�\scale�J roll�Hhow�3  in�=pring�-(        tagger�.         rt�D  � }% A     � �)    �E3K2+ V  �" $A4! �  /  B ~= 9: 9 ! 6f  � ��;Ȁ����z! 0startdelay�:ed�> vent�C    iffness�V op�? uccess�P the�His�H imes�[  ransition�/        ween�X ype�U  ul�2&pdate�6variants�2   iewport�H sualduration�] ue�Rwhen�2ilehover�Till�H x�S  n % F  � �xWU#��S�E�1 k33https://motion.dev/docs/motion-valuemotionValuejsreferenceUnderstand Motion Values, the core of Motion's animation system, used for tracking the state and velocity of animated properties. Learn how to manually create, set, get, and subscribe to motion values for advanced animation control and rendering with effects.Motion Values track the state and velocity of animated values. They are composable, signal-like values that are performant because Motion throttles rendering with its optimised frameloop. Motion Values are usually created automatically by the `[animate](./animate)` [function](./animate) or `[motion](./react-motion-component)` [components](./react-motion-component). They aren't something you generally have to think about. But, for advanced use cases, it's possible to create them manually. ``` const x = motionValue(0) x.on("change", latest \=> console.log(latest)) animate(x, 100) ``` By manually creating motion values you can: * Set and get their state. * Subscribe to changes via the `on` method. * Automatically end existing animations when starting new animations. ``` const color = motionValue("#f00") animate(color, "#0f0") animate(color, "#333") // Will automatically end the existing animation ``` Usage ----- Motion Values can be created with the `motionValue` function. The string or number passed to `motionValue` will act as its initial state. ``` import { motionValue } from "motion" const x = motionValue(0) ``` Changes to a Motion Value can be subscribed to with the `.on` method. ``` x.on("change", latest \=> console.log(latest)) ``` ### Set value Motion Values can be updated with the `set` method. ``` x.set(100) ``` ### Get value and velocity The latest value of a Motion Value can be read with `.get()`: ``` const latest = x.get() // 100 ``` It's also possible to get the velocity of the value via `.getVelo:�eV]-��y�S �33https://motion.dev/docs/easing-functionsEasing functionsjsreferenceExplore Motion's built-in easing functions to control animation speed and feel. Learn how to use cubicBezier, steps, easeIn/Out, backIn/Out, circIn/Out, anticipate, and linear easings. Discover modifiers like reverseEasing and mirrorEasing for advanced control.Easing functions are used to change the speed of an animation throughout the course of its duration. Different easing functions provide your animations with different "feelings". Both the `[animate](./animate)` [function](./animate) and Motion for React's `[motion](./react-motion-component)` [component](./react-motion-component) have the following easing functions built-in and you can just refer to them by name. ``` // Named easing ease: "easeIn" // Bezier curve ease: \[0.39, 0.24, 0.3, 1\] ``` But you can still imD ""R�V̀����0;00�         01�f� 1�f0�  1�      0�   0�    px�~px�1� 2�~ 3� 4�%5�%6�%7�%8�%0�#9�)2�    0�*0� px�1�+5�! 3�  0�0�  4� 5�      0�    0px�~px� 6�  7� 1� 8�9� 0�a�#ccordion� lways�+nimate�      ion� pp� ttrx�backgroundcolor�  sefrequency�$ orderradius� unce�!  x�  calculated�+ ircle� lick�~ode�~mponent�nst�~ x�   d� amping�  efault� lay�iv�~     rag�) transition�)uration� ease�  in� out�out� xample�~f00�   alse�~ eturbulence�$ill� rom�unction� gesture�height�~idden�img�port�nertia�+itial� viewoptions�sopen�~l�  ayout�~     group� i�near�m� ass�$ th�+ odifytarget�+tion�~       config� nearest�+ull� once� pacity�    en�~ ut�verflow�padding�th�length�ixels�+ower�) react� ct� f�~ stdelta�  speed�' turn� ight� oot�tate�x�!und�+scale�x�ript�~   oll� ref�   yprogress� ection�$tup�~nap�+ pring�                  tagger�iffness�   yle�~  vg� target�+ emplate�~    he�  imeconstant�*s�  o�  ransformbox�ition�      �  C9 &   ,    ��  �+ �# �    7 �g (  �2 / +  ^H.   0.2 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","gesture"]},{"title":"Code Example 20","description":"","code":"<motion.div\n drag\n :dragTransition=\"{ timeConstant: 200 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","gesture"]},{"title":"Code Example 21","description":"","code":"<motion.div\n drag\n // dragTransition always type: inertia\n :dragTransition=\"{\n power: 0,\n // Snap calculated target to nearest 50 pixels\n modifyTarget: target => Math.round(target / 50) * 50\n }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","gesture"]},{"title":"Code Example 22","description":"","code":"<motion.div\n drag\n :dragTransition=\"{ min: 0, max: 100 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","gesture"]},{"title":"Code Example 24","description":"","code":"<motion.div\n drag\n :dragTransition=\"{\n min: 0,\n max: 100,\n bounceStiffness: 100\n }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","gesture","spring"]},{"title":"Code Example 26","description":"","code":"animate(element, { filter: \"blur(10px)\" }, { delay: 0.3 })","language":"vue","difficulty":"intermediate","tags":["vue","animation","stagger"]},{"title":"Code Example 27","description":"","code":"<motion.div\n :animate=\"{ rotate: 180 }\"\n :transition=\"{ repeat: Infinity, duration: 2 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 28","description":"","code":"<motion.div\n :animate=\"{ rotate: 180 }\"\n :transition=\"{\n repeat: 1,\n repeatType: 'reverse',\n duration: 2\n }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 29","description":"","code":"<motion.div\n :animate=\"{ rotate: 180 }\"\n :transition=\"{ repeat: Infinity, repeatDelay: 1 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","stagger"]},{"title":"Code Example 30","description":"","code":"<script setup>\nconst list = {\n hidden: {\n opacity: 0,\n transition: { when: \"afterChildren\" }\n }\n}\n\nconst item = {\n hidden: {\n opacity: 0,\n transition: { duration: 2 }\n }\n}\n</script>\n\n<template>\n <motion.ul :variants=\"list\" animate=\"hidden\">\n <motion.li :variants=\"item\" />\n <motion.li :variants=\"item\" />\n </motion.ul>\n</template>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 31","description":"","code":"<sctipt setup> \nconst container = {\n hidden: { opacity: 0 },\n show: {\n opacity: 1,\n transition: {\n delayChildren: 0.5\n }\n }\n}\n\nconst item = {\n hidden: { opacity: 0 },\n show: { opacity: 1 }\n}\n</sctipt>\n\n<template> \n <motion.ul\n :variants=\"container\"\n initial=\"hidden\"\n animate=\"show\"\n >\n <motion.li :variants=\"item\" />\n <motion.li :variants=\"item\"/>\n </motion.ul>\n</template>","language":"vue","difficulty":"intermediate","tags":["vue","animation","stagger"]},{"title":"Code Example 32","description":"","code":"const transition = {\n delayChildren: stagger(0.1)\n}","language":"vue","difficulty":"advanced","tags":["vue","animation","stagger"]},{"title":"Code Example 33","description":"","code":"const transition = {\n delayChildren: stagger(0.1, { from: \"last\" })\n}","language":"vue","difficulty":"advanced","tags":["vue","animation","stagger"]}]["vue","animations","transitions","animation","gesture","scroll","spring","drag","keyframes","stagger","motion","transition"]2025-08-29 11:54:112025-08-29 11:54:11/vue-motion-component#viewport-1) `[motion](./vue-motion-component#viewport-1)` [component](./vue-motion-component#viewport-1) API reference. ### Setting state It's also possible to set state when any element (not just a `motion` component) enters and leaves the viewport with the `[useInView](./vue-use-in-view)` [hook](./vue-use-in-view). Scroll-linked animations ------------------------ Scroll-linked animations are created using [motion values](./vue-motion-value) and the `[useScroll](./vue-use-scroll)` [hook](./vue-use-scroll). `useScroll` returns four motion values, two that store scroll offset in pixels (`scrollX` and `scrollY`) and two that store scroll progress as a value between `0` and `1`. These motion values can be passed directly to specific styles. For instance, passing `scrollYProgress` to `scaleX` works great as a progress bar. ``` <script\> import { useScroll } from "motion-v" const { scrollYProgress } = useScroll(); </script\> <template\> <motion.div :style\="{ scaleX: scrollYProgress }" /> </template\> ``` ### Value smoothing This value can be smoothed by passing it through `[useSpring](./vue-use-spring)`. ``` <script setup\> const { scrollYProgress } = useScroll(); const scaleX = useSpring(scrollYProgress, { stiffness: 100, damping: 30, restDelta: 0.001 }) </script\> <template\> <motion.div :style\="{ scaleX }" /> </template\> ``` ### Transform other values With [the](./vue-use-transform) `[useTransform](./vue-use-transform)` [hook](./vue-use-transform), it's easy to use the progress motion values to mix between any value, like colors: ``` <script setup\> const backgroundColor = useTransform( scrollYProgress, \[0, 0.5, 1\], \["#f00", "#0f0", "#00f"\] ) </script\> <template\> <motion.div :style\="{ backgroundColor }" /> </template\> ``` ### Examples #### Track element scroll offset #### Track element within viewport #### Parallax #### Scroll velocity and direction Read the [full](./vue-use-scroll) `[useScroll](./vue-use-scroll)` [docs](./vue-use-scroll) to discover more about creating the above effects.[{"title":"Code Example 1","description":"","code":"<motion.div\n :initial=\"{ opacity: 0 }\"\n :whileInView=\"{ opacity: 1 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue"]},{"title":"Code Example 2","description":"","code":"<motion.div\n initial=\"hidden\"\n whileInView=\"visible\"\n :inViewOptions=\"{ once: true }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue"]},{"title":"Code Example 3","description":"","code":"<script setup>\n import { ref } from \"vue\"\n const scrollRef = ref(null)\n</script>\n\n<template>\n <div ref=\"scrollRef\" :style=\"{ overflow: 'scroll' }\">\n <motion.div\n :initial=\"{ opacity: 0 }\"\n :whileInView=\"{ opacity: 1 }\"\n :inViewOptions=\"{ root: scrollRef }\"\n />\n </div>\n</template>","language":"vue","difficulty":"intermediate","tags":["vue","scroll"]},{"title":"Code Example 4","description":"","code":"<script>\nimport { useScroll } from \"motion-v\"\nconst { scrollYProgress } = useScroll();\n</script>\n\n<template>\n <motion.div :style=\"{ scaleX: scrollYProgress }\" /> \n</template>","language":"vue","difficulty":"intermediate","tags":["vue","scroll"]},{"title":"Code Example 5","description":"","code":"<script setup> \nconst { scrollYProgress } = useScroll();\nconst scaleX = useSpring(scrollYProgress, {\n stiffness: 100,\n damping: 30,\n restDelta: 0.001\n})\n</script>\n\n<template>\n <motion.div :style=\"{ scaleX }\" />\n</template>","language":"vue","difficulty":"advanced","tags":["vue","scroll","spring"]},{"title":"Code Example 6","description":"","code":"<script setup> \nconst backgroundColor = useTransform(\n scrollYProgress,\n [0, 0.5, 1],\n [\"#f00\", \"#0f0\", \"#00f\"]\n)\n</script>\n\n<template>\n <motion.div :style=\"{ backgroundColor }\" />\n</template>","language":"vue","difficulty":"intermediate","tags":["vue","scroll"]}]["vue","scroll","animations","animation","spring","motion"]2025-08-29 11:54:082025-08-29 11:54:08aSS** * **SVG** (like path drawing animations) * **WebGL** (3D graphics) The best part? It's also tiny, with a mini HTML/SVG version of the `animate()` function that's just 2.3kb! By the end of this quick guide, you'll have installed Motion and made your first animation. Install ------- You can install Motion in two ways: 1. A package manager like npm or Yarn (**most popular)** 2. HTML `script` tag ### Package manager Motion can be installed via the `"motion"` package. ``` npm install motion ``` Then imported in your JavaScript: ``` import { animate, scroll } from "motion" ``` ### `script` tag It's possible to import Motion directly using a `script` tag. This is perfect if you're working with a basic HTML page, or using a no-code tool like Webflow. Import using the modern `import` syntax: ``` <script type\="module"\> import { animate, scroll } from "https://cdn.jsdelivr.net/npm/motion@latest/+esm" </script\> ``` Or you can add `Motion` as a global variable using the legacy include: ``` <script src\="https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js"\></script\> <script\> const { animate, scroll } = Motion </script\> ``` **Note:** It's best practise to replace "latest" in these URLs with a specific version, like `11.11.13`. You can find the latest version at [JSDelivr](https://www.jsdelivr.com/package/npm/motion). ### Development tools With Motion for AI, you can load the Motion docs straight into your AI code editor to improve the quality of its suggestions. [Learn more](./ai-llm-documentation). [![Add to VS Code](https://framerusercontent.com/images/mOTurneZubngSCtZ2IvwlqoPUs.png?width=348&height=82)](vscode:extension/Motion.motion-vscode-extension)[![Add to Cursor](https://framerusercontent.com/images/G3FXTpYrPji6khdFKeGo8YrbS08.png?width=324&height=82)](https://cursor.com/en/install-mcp?name=motion&config=eyJjb21tYW5kIjoibnB4IC15IG1vdGlvbi1haSJ9) Create an animation ------------------- The "Hello world!" of any animation library is a simple transform animation. Let's start by importing the `[animate](./animate)` [function](./animate). ``` import { animate } from "motion" ``` `animate` can animate one or more elements. You can either use a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll#obtaining_a_list_of_matches) (like `".my-class"`) or provide the elements directly: ``` // CSS selector animate(".box", { rotate: 360 }) // Elements const boxes = document.querySelectorAll(".box") animate(boxes, { rotate: 360 }) ``` You can see here we're setting `rotate` to `360`. This will rotate the element 360 degrees: What can be animated? --------------------- Motion lets you animate anything: * **CSS properties** (like `opacity`, `transform` and `filter`) * **SVG attributes and paths** * **Independent transforms** (`x`, `rotateY` etc) * **JavaScript objects** (containing strings/colors/numbers) With Motion, you don't have to worry about achieving the best performance available. When a value can be hardware accelerated, like `opacity`, `filter` or `transform`, it will be. `animate` isn't limited to HTML. It can animate single values or any kind of object. For example, the rotation of a Three.js object: ``` animate( cube.rotation, { y: rad(360), z: rad(360) }, { duration: 10, repeat: Infinity, ease: "linear" } ) ``` Customising animations ---------------------- Motion comes with smart defaults, so your animations should look and feel great out of the box. But you can further tweak options like: * **Duration** (how long the animation lasts) * **Delay** (how long it waits before starting) * **Easing** (how it speeds up and slows down) * **Repeat** (how it repeats, how many times, etc) ``` animate( element, { scale: \[0.4, 1\] }, { ease: "circInOut", duration: 1.2 } ); ``` Motion also has amazing [spring animations](./spring) for natural, kinetic animations: ``` animate( element, { rotate: 90 }, { type: "spring", stiffness: 300 } ); ``` Stagger animations ------------------ When animating multiple elements, it can feel more natural or lively to offset the animations of each. This is called **staggering**. Motion provides a `stagger` function that can be used to dynamically set `delay`: ``` import { animate, stagger } from "motion" animate( "li", { y: 0, opacity: 1 }, { delay: stagger(0.1) } ) ``` What's next? ------------ You've just learned the basics of Motion and created a simple animation. But there's so much more to discover, like: * [**Keyframes and sequences**](./animate): Create more complex animations * [**Controls**](./animate): Pause, resume or change animations * [**Scroll-linked animations**](./scroll)**:** Link values to scroll position * [**Scroll-triggered animations**](./inview): Trigger animations when elements enter the viewport Or you can dive straight into our [examples](https://examples.motion.dev), which are clear, simple, and feature source code that can be easily copy/pasted, or opened straight into the [v0](https://v0.dev/) AI code editor.[{"title":"Code Example 1","description":"","code":"npm install motion","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 2","description":"","code":"import { animate, scroll } from \"motion\"","language":"javascript","difficulty":"beginner","tags":["js","animation","scroll"]},{"title":"Code Example 3","description":"","code":"<script type=\"module\">\n import { animate, scroll } from \"https://cdn.jsdelivr.net/npm/motion@latest/+esm\"\n</script>","language":"javascript","difficulty":"beginner","tags":["js","animation","scroll"]},{"title":"Code Example 4","description":"","code":"<script src=\"https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js\"></script>\n<script>\n const { animate, scroll } = Motion\n</script>","language":"javascript","difficulty":"beginner","tags":["js","animation","scroll"]},{"title":"Code Example 5","description":"","code":"import { animate } from \"motion\"","language":"javascript","difficulty":"beginner","tags":["js","animation"]},{"title":"Code Example 6","description":"","code":"// CSS selector\nanimate(\".box\", { rotate: 360 })\n\n// Elements\nconst boxes = document.querySelectorAll(\".box\")\n\nanimate(boxes, { rotate: 360 })","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 7","description":"","code":"animate(\n cube.rotation,\n { y: rad(360), z: rad(360) },\n { duration: 10, repeat: Infinity, ease: \"linear\" }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 8","description":"","code":"animate(\n element,\n { scale: [0.4, 1] },\n { ease: \"circInOut\", duration: 1.2 }\n);","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 9","description":"","code":"animate(\n element,\n { rotate: 90 },\n { type: \"spring\", stiffness: 300 }\n);","language":"javascript","difficulty":"intermediate","tags":["js","animation","spring"]},{"title":"Code Example 10","description":"","code":"import { animate, stagger } from \"motion\"\n\nanimate(\n \"li\",\n { y: 0, opacity: 1 },\n { delay: stagger(0.1) }\n)","language":"javascript","difficulty":"advanced","tags":["js","animation","stagger"]}]{"props":[],"methods":[{"name":"animate","signature":"animate()","description":"animate method"}],"types":[]}["js","getting-started","quick","start","animation","scroll","spring","keyframes","stagger","motion"]2025-08-29 11:54:042025-08-29 11:54:04 ''�QȀ����&j0have3�3�_�_�<�a�a R��%�& ��$ �v� R��%eader=� ight2 �8 �Q �V �' �* �k�B �C � �L�D��G �' �* �k�B llo6�M �Mre6� �x8 � 2 � 2 � 2idden8�b�n)�' H�b�0)G V��b�n)�' Hgher9 �\0st<*ook2�7���p�c���/�pver2%�%��}%� � �(�7�z f�&  � �(�7s;�tart7�8 �8w2Q�, !�?Q�, !ever8�M���Mref;�[sla8 � 3 � 3 � 3tml5 )23�R ��lR"A ����^U )23�R ��lRtps2��Y��C0��F:� :� :�_��8:�b I�5.+ 7�ki| �\�w�J�?L % �"��'�?�:�b I�5.+ 7�ki| �\�wybrid5$�N*=MG&V��O$�Ni3�*�H�H �.�r�/ �.�r convariants;�d;�Geal8�[�N�[s<�Zf2�5���e9�*9�*9���o��t�B��dpF"�Q'�p��4�E�{ :�NV� �C)���o��t�Bmage8{=| �8{s2 �/ �H �M �" �% �f�L �" �% �fg<�E mediately9�s� plement9�~�~ ation<�*ort2�$�~�~*�U&nYt*^&nYt*^&nYt*���I��I�o� �3�*r  6�W�\X 7� �5o� �3�*r  6�ed3�u�_�_k~Qk~ing6�\ �\s7Q Qssible<�Trove6��T�w��Tments2 k k kn30�9c�)Ec�)Ec�)��a�aKO6�Ohl _"i(��� (ZIB�C^�UV�2�)�� �"�}uo-E"U`0[IB�GC^�I�)� ��`(�y�7�t=D�c �&KO6�Ohl _"i(��� (ZIB�C^�UV�active8�=  �= clude2����J �Jd< �fs5x xorporate9 �Prectly<�redible9+� definitely9�ypendent6�A�G3�H�A�G ly8 �)� �) �)x8�+��+ividual8�-�.�- ly8��1��ustry5�!�C�!�Certia9!�.E�Tl9�finitely2�?��y6��U �0 �V��Uitial4��a�a�n f�~ o$�Pur�F @1yo�:�y�+�g$�Quro� B1yoZ [57�n f�~ o$�Pur�F @1yo�:ly8��A�line<�Pnerhtml8�w�x�wput22 � 5"}5"}5" �8�X�6stall5S �]Z �J# �PS �]Z �J# �Ped6S$ S$nce3�#)�8)�8)�u�a�a�J�4 ���u�n�G�J�4tly8�Z��Zead;�. tegrations2 [� [� [� lligently4��a�araction<�E s8�_�R�_ ve;�ested<�t ing<�kruptible<�. ng8�?��/�?o5 �b5� �OJ��n5� �b5� �OJ��n5uitive5�6 �6view2'�'�'��M�<�  �M�<s2�8�f�f� f�{f�{f"�ml9�/l9�/l9 ]6��@�).�]!".�Bhl^�?�$�16�%�~�D �6�N�d@F' /�hn^_�2�AJZhO�L*� �fHF88\$�L �? ]6��@�).�]!".�Bhl^�?�$�1 animating4��a�an6�j �E�+�jon< D�,pen<���` selected<�Ivisible8�v�;�vt2"� �)�!�)�!�)$�E��n_��n_��n2l?Jk*6UX� G , DV~R9xC |^�d>}gZ� �W�:&�>xef� �Z�6 }^�d>�=g\� w�M�M�]!e ,O_:���>"C�""wG�>+2l?Jk*6UX� G , DV~R9xC |^�d>}gZ� �W�:em8�8n�<�~b�8ns8�A�f�9�,�Aration9 �^�6s3��_�_�}�f}�f} [� � ,�.�v[�L�"�x�)�6\�.�5�l�_I� [� � ,�.�v[�L�"janky<�CJ q< 0d @ \�2H&  }!K  �' $�l , (�  *ON ! =G�h �s-!y !!�WȀ����2 `��!5��\�Y��m��\�Y0except9�lusive2��0�5ist<�(ing4�o�M�M�U�>t3�3�_�_ �K �| �B )� )�~ �K �| �B )pect<�brience5� � s;laining<�ore3ort7W0 W0tends5����sion5 � �- �n � �- �nvely<�remely8�j'yjjb21tyw5kijoibnb4ic15ig1vdglvbi1hasj95�E�H� �E�H� f004�x��c��c��t�H�ealse2�7�q�q �  � �. �o�b�d �  � �.qs2e�e�e�st3�Q�_�_eature2g�g�g��f�0�f�0s5] �W$ .�$�j] �W$ .�$ing2���edback9�[l3�> �R�C�E��T�> �R�C�Eing3�>�_�_�K �Ks3��_�_s<�A gaussianblur;�J turbulence9�w<�%ff2����<�a�a�8�-(�Vigma5> >lesize<�oter6 �<)� �-  �<)s;�nd6�s �sished9�Z�s9 �re9�4 �&Bu2ing;�}st3�~�_�_�X�o�0 �Q�&�p�X�ot<�cxed<�) �vlex< : ibility5/�9�:/�9ip< ow8��wt�ocus5�&�*�:�}�4 �L  �&�*�:ed;�?llowing3�5�_�_r2�8��6%�(7 J�t)>7 J�t)>7 J�t)* �A�0�.�0�.�0 n&�8��wc&TF G�<�a2 :�/?� �^3�1 �G & #�X�0�-H�y�$2 ;�/?�E �`3` �G �n�i$(4�R&R(R�e)�/OyW �M{D  n&�8��wc&TF G�<�a2 :�/?� �^3�1 �G ce9�qward9�Rur9�A�"rame20�0�20��Y&q �*&q �*&q loop4� �a�ar59�{ �{�9�{ates<�a usercontent2 �- �F �K �  �# �d �  �# �deely8�6�7�6om2& z��d�d4z�jnYt*knYt*knYt*(z��$�j3�H�j3�H�j3q| t��1�2�+u 2�C�+�H��:(R �Bh�7W�;� �j ,���p��Hg`�[N�q| t��1�2�+u 2�C�+�H��:ull5�  �Y��e j��~�  �Y�n6  ction2�B|�|�|f�$A�9D .A�9D .A�9D �+e�>Be�>Be�>C��# �uE&�\�?�� �k�  �^/1�4C��# �uE s2"��[��N"�e = �yS = �yS = �y "��4�z�%�4 damentals5 � � rther5�a�'�9 �Q�a�'�9ture<�iyi<�g9 �<3fxtpyrpji6khdfkego8yrbs085�6�9�z�6�9�zain5�T��j�M�T��js2�\�� �$eneral8�"�#�"ly4�;�a�ated3�{�_�_�2sture2��#� �O&"G:Q ?E�X��#� s2 #� #� #� J�X��<�V�= y��p! J�X��<t2 ��I ��bB ��Ve s�se s�se s�g�E�, elementbyid9}previous=�s9 �*'ting5velocity4"�gq?�1q?�1q?ithub2��8�=j jven<�ys3�:�_�_lobal6�E �Eot8�/ �/rade5 ients9?phics62 2y8�Q �Qeat6��J �8 �9�M��J �8id<�#oup< �Mied<�Hwing2�f�� sap2w�w�w� uaranteed;�#ide2������ M O  M O s2 d� d� d�h9�4alf9�`ndle<ers;�4s<�6ppen9�4� s< r�rdware6�_�S�T�_�Ss5 �5�l�U �I�z �z� � �; �{�[ �7K�^�M� �5�l�U �I�z �z�U N $2 M'P;-F  $!   D  % ? �. 3( O�]4 �(X2 @/tnZ $#  8  S  0 ����,A[+!� ���Q�] �]33https://motion.dev/docs/react-animationReact animationreactanimationsCreate React animations with Motion. Animate CSS, transforms, & SVGs. Use variants for orchestration, gestures, and keyframes.Motion for React offers a number of ways to animate your UI. Scaling from extremely simple prop-based animations, to more complex orchestration. Animate ------- You'll perform almost all animations on [a](./react-motion-component) `[<motion />](./react-motion-component)` [component](./react-motion-component). This is basically a DOM element with motion superpowers. ``` import { motion } from "motion/react" ``` For basic animations, you can update values on [the](./react-motion-component#animate) `[animate](./react-motion-component#animate)` [prop](./react-motion-component#animate): ``` <motion.div animate\={{ opacity: 1 }} /> ``` When any value in its animate prop changes, the component will automatically animate to the new target. Animatable values ----------------- Motion can animate any CSS value, even those that can't be animated by browsers, like `mask-image`. It supports: * Numbers: `0`, `100` etc. * Strings containing numbers: `"0vh"`, `"10px"` etc. * Colors: Hex, RGBA, HSLA. * Complex strings containing multiple numbers and/or colors (like `box-shadow`). * `display: "none"/"block"` and `visibility: "hidden"/"visible"`. ### Value type conversion In general, values can only be animated between two of the same type (i.e `"0px"` to `"100px"`). Colors can be freely animated between hex, RGBA and HSLA types. Additionally, `x`, `y`, `width`, `height`, `top`, `left`, `right` and `bottom` can animate between different value types. ``` <motion.div initial\={{ x: "100%" }} animate\={{ x: "calc(100vw - 50%)" }} /> ``` It's also possible to animate `width` and `height` in to/out of `"auto"`. ``` <motion.div initial\={{ height: 0 }} animate\={{ height: "auto" }} /> ``` **Note:** If additionally animating `display` in to/out of `"none"`, replace this with `visibility` `"hidden"` as elements with `display: none` can't be measured. ### Transforms Unlike CSS, Motion can animate every transform axis independently: * Translate: `x`, `y`, `z` * Scale: `scale`, `scaleX`, `scaleY` * Rotate: `rotate`, `rotateX`, `rotateY`, `rotateZ` * Skew: `skew`, `skewX`, `skewY` * Perspective: `transformPerspective` `motion` components have enhanced `style` props, allowing you to set individual transforms: ``` <motion.section style\={{ x: -20 }} /> ``` Animating transforms independently provides great flexibility, especially around gestures. ``` <motion.button whileHover\={{ scale: 1.1 }} whileTap\={{ scale: 0.9 }} /> ``` Independent transforms perform great, but Motion's hybrid engine also uniquely offers hardware acceleration by setting `transform` directly. ``` <motion.li initial\={{ transform: "translateX(-100px)" }} animate\={{ transform: "translateX(0px)" }} transition\={{ type: "spring" }} /> ``` **SVG note:** For SVG components, `x` and `y` **attributes** can be set using `attrX` and `attrY`. ### Transform origin `transform-origin` has three shortcut values that can be set and animated individually: * `originX` * `originY` * `originZ` If set as numbers, `originX` and `Y` default to a progress value between `0` and `1`. `originZ` defaults to pixels. ``` <motion.div style\={{ originX: 0.5 }} /> ``` ### CSS variables Motion for React can animate the value of CSS variables, and also use CSS variables as animation targets. #### Animating CSS variables Sometimes it's convenient to be able to animate a CSS variable to animate many children: ``` <motion.ul initial\={{ '--rotate': '0deg' }} animate\={{ '--rotate': '360deg' }} transition\={{ duration: 2, repeat: Infinity }} \> <li style\={{ transfor& ��� Lc'!�G�O�E o33https://motion.dev/docs/react-svg-animationSVG animationreactanimationsSVG animations in React with Motion. Line drawing via pathLength, transforms, attribute animation (attrX/attrY), scroll-linked animations, morphing and more.Motion makes React SVG animation straightforward. In this guide, we'll learn how to make line drawing animations, path morphing animations, animate `viewBox` and more. Overview -------- SVG animations are generally performed as usual, via the `[motion](./react-motion-component)` [component](./react-motion-component). There's a `motion` component for every SVG element (e.g. `<motion.svg>`, `<motion.path>`, `<motion.circle>`, and even filters like `<motion.feTurbulence>` and `<motion.feDisplacementMap>`). ``` <motion.svg\> <motion.circle /> </motion.svg\> ``` A `motion` component can animate `style`, as normal: ``` <motion.circle style\={{ fill: "#00f" }} animate\={{ fill: "#f00" }} /> ``` But it can also animate attributes: ``` <motion.circle cx\={0} animate\={{ cx: 50 }} /> ``` ### Animate `viewBox` The `motion.svg` component can additionally animate `viewBox`. This is especially useful for easy panning animations: ``` <motion.svg viewBox\="0 0 200 200" animate\={{ viewBox: "100 0 200 200" }} // 100px to the right /> ``` Or zoom in/out animations: ``` <motion.svg viewBox\="0 0 200 200" animate\={{ viewBox: "-100 -100 300 300" }} // Zoom out /> ``` ### Transforms SVG transforms work differently to CSS transforms. When we define a CSS transform, the default origin is **relative to the element itself.** So for instance, this `div` will rotate around its center point, as you'd intuitively expect: ``` <motion.div style\={{ rotate: 90 }} /> ``` With SVGs, the transform point is relative to the top/left corner of the `viewBox`, which is less intuitive. Motion changes this behaviour so SVGs work the same as normal elements. Therefore, this: ``` <motion.rect style\={{ rotate: 90 }} /> ``` Will also rotate the `rect` element around its center point. The default behaviour can be restored by explicitly setting an element's `transformBox` style: ``` <motion.rect style\={{ rotate: 90, transformBox: "view-box" }} /> ``` ### `x`/`y`/`scale` attributes `motion` components provide shorthands for `x`, `y`, and `scale` transforms: ``` <motion.div animate\={{ x: 100 }} /> ``` With SVG components, these will still render via the `style` tag. This is usually fine, but some SVG components accept `x`, `y`, and `scale` attributes also. You can target these via animation p^","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 3","description":"","code":"<motion.div\n :whileHover=\"{\n scale: 1.1,\n transition: { duration: 0.2 }\n }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","gesture"]},{"title":"Code Example 4","description":"","code":"// Motion component\n<motion.li\n :animate=\"{\n x: 0,\n opacity: 1,\n transition: {\n default: { type: 'spring' },\n opacity: { ease: 'linear' }\n }\n }\"\n/>\n\n// animate() function\nanimate(\"li\", { x: 0, opacity: 1 }, {\n default: { type: \"spring\" },\n opacity: { ease: \"linear\" }\n})","language":"vue","difficulty":"intermediate","tags":["vue","animation","spring"]},{"title":"Code Example 5","description":"","code":"<motion.div\n :animate=\"{ x: 100 }\"\n :transition=\"{ type: 'spring', stiffness: 100 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","spring"]},{"title":"Code Example 6","description":"","code":"<MotionConfig :transition=\"{ duration: 0.4, ease: 'easeInOut' }\">\n <App />\n</MotionConfig>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 7","description":"","code":"<motion.path\n :animate=\"{ pathLength: 1 }\"\n :transition=\"{ duration: 2, type: 'tween' }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 8","description":"","code":"animate(\"ul > li\", { opacity: 1 }, { duration: 1 })","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 9","description":"","code":"<motion.div\n :animate=\"{\n x: [0, 100, 0],\n transition: { ease: ['easeIn', 'easeOut'] }\n }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 10","description":"","code":"<motion.div\n :animate=\"{\n x: [0, 100, 0],\n transition: { times: [0, 0.3, 1] }\n }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 11","description":"","code":"<motion.div\n :animate=\"{ rotateX: 90 }\"\n :transition=\"{ type: 'spring', bounce: 0.25 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","spring"]},{"title":"Code Example 12","description":"","code":"<motion.div\n :animate=\"{ rotateX: 90 }\"\n :transition=\"{\n type: 'spring',\n visualDuration: 0.5,\n bounce: 0.25\n }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","spring"]},{"title":"Code Example 13","description":"","code":"<motion.a\n :animate=\"{ rotate: 180 }\"\n :transition=\"{ type: 'spring', damping: 300 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","spring"]},{"title":"Code Example 14","description":"","code":"<motion.feTurbulence\n :animate=\"{ baseFrequency: 0.5 }\"\n :transition=\"{ type: 'spring', mass: 0.5 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","spring"]},{"title":"Code Example 15","description":"","code":"<motion.section\n animate={{ rotate: 180 }}\n transition={{ type: 'spring', stiffness: 50 }}\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","spring"]},{"title":"Code Example 16","description":"","code":"<motion.div\n :animate=\"{ rotate: 180 }\"\n :transition=\"{ type: 'spring', velocity: 2 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","spring"]},{"title":"Code Example 17","description":"","code":"<motion.div\n :animate=\"{ rotate: 180 }\"\n :transition=\"{ type: 'spring', restSpeed: 0.5 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","spring"]},{"title":"Code Example 18","description":"","code":"<motion.div\n :animate=\"{ rotate: 180 }\"\n :transition=\"{ type: 'spring', restDelta: 0.5 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","spring"]},{"title":"Code Example 19","description":"","code":"<motion.div\n drag\n :dragTransition=\"{ power:h.button\> ``` Gestures -------- ### Hover The hover gesture detects when a pointer hovers over or leaves a component. It differs from `onMouseEnter` and `onMouseLeave` in that hover is guaranteed to only fire as a result of actual mouse events (as opposed to browser-generated mice events emulated from touch input). ``` <motion.a :whileHover\="{ scale: 1.2 }" @hoverStart\="event => {}" @hoverEnd\="event => {}" ``` ### Press The press gesture detects when the **primary pointer** (like a left click or first touch point) presses down and releases on the same component. ``` <motion.button :whilePress\="{ scale: 0.9, rotate: 3 }" /> ``` It will fire a `press` event when the tap or click ends on the same component it started on, and a `pressCancel` event if the press or click ends outside the component. If the pressable component is a child of a draggable component, it'll automatically cancel the press gesture if the pointer moves further than 3 pixels during the gesture. #### Accessibility Elements with press events are keyboard-accessible. Any element with a press prop will be able to receive focus and `Enter` can be used to trigger press events on focused elements. * Pressing `Enter` down will trigger `onPressStart` and `whilePress` * Releasing `Enter` will trigger `onPress` * If the element loses focus before `Enter` is released, `onPressCancel` will fire. ### Pan The pan gesture recognises when a pointer presses down on a component and moves further than 3 pixels. The pan gesture is ended when the pointer is released. ``` <motion.div @pan\="(e, pointInfo) => {}" /> ``` Pan doesn't currently have an associated `while-` prop. **Note:** For pan gestures to work correctly with touch input, the element needs touch scrolling to be disabled on either x/y or both axis with the `[touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action)` CSS rule. ### Drag The drag gesture applies pointer movement to the x and/or y axis of the component. ``` <motion.div drag :whileDrag\="{ scale: 1.2, backgroundColor: '#f00' }" /> ``` By default, when the drag ends the element will perform an inertia animation with the ending velocity. This can be disabled by setting `dragMomentum` to `false`, or changed via the `dragTransition` prop. #### Constraints It's also possible to set `dragConstraints`, either as an object with `top`, `left`, `right`, and `bottom` values, measured in pixels. ``` <motion.div drag\="x" :dragConstraints\="{ left: 0, right: 300 }" /> ``` Or, it can accept an HTMLElement `ref` value. You can get the component's DOM ref value using `useDomRef` from `motion-v`, and pass it both to the draggable component's `dragConstraints` prop and the ref of the component you want to use as constraints. ``` <script setup\> import { useDomRef } from "motion-v" const constraintsRef = useDomRef() </script\> <template\> <motion.div ref\="constraintsRef"\> <motion.div drag :dragConstraints\="constraintsRef" /> </motion.div\> </template\> ``` By default, dragging the element outside the constraints will tug with some elasticity. This can be changed by setting `dragElastic` to a value between `0` and `1`, where `0` equals no motion and `1` equals full motion outside the constraints. #### Direction locking It's possible to lock an element to the first axis it's dragged on by setting `dragDirectionLock`. ``` <motion.div drag dragDirectionLock @directionLock\="callback" /> ``` Each time the drag gesture starts, the direction of pointer travel will be detected and the element will be draggable only on this axis. ### Focus The focus gesture detects when a component gains or loses focus by the same rules as the [CSS :focus-visible selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible). Typically, this is when an `input` receives focus by any means, and when other elements receive focus by accessible means (like via keyboard navigation). ``` <motion.a :whileFocus\="{ scale: 1.2 }" href\="#" /> ``` Event propagation ----------------- Children can stop pointer events propagating to parent `motion` components using the `Capture` Vue props. For instance, a child can stop drag and tap gestures and their related `while` animations from firing on parents by passing `e.stopPropagation()` to `onPointerDownCapture`. ``` <motion.div :whilePress\="{ scale: 2 }"\> <button @pointerDownCapture\="e \=> e.stopPropagation()" /> </motion.div\> ``` Note: SVG filters ----------------- Gestures aren't recognised on SVG `filter` components, as these elements don't have a physical presence and therefore don't receive events. You can instead add `while-` props and event handlers to a parent and use variants to animate these elements. ``` <template\> <motion.svg whileHover\="hover"\> <filter id\="blur"\> <motion.feGaussianBlur :stdDeviation="0" :variants="{ hover: { stdDeviation: 2 } }" /> </filter\> </motion.svg\> </template\> ```[{"title":"Code Example 1","description":"","code":"<motion.button\n :whileHover=\"{\n scale: 1.2,\n transition: { duration: 1 },\n }\"\n :whilePress=\"{ scale: 0.9 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","gesture"]},{"title":"Code Example 2","description":"","code":"<motion.button\n whilePress=\"press\"\n whileHover=\"hover\"\n :variants=\"buttonVariants\"\n>\n <svg>\n <motion.path :variants=\"iconVariants\" />\n </svg>\n</motion.button>","language":"vue","difficulty":"intermediate","tags":["vue","gesture"]},{"title":"Code Example 3","description":"","code":"<motion.a\n :whileHover=\"{ scale: 1.2 }\"\n @hoverStart=\"event => {}\"\n @hoverEnd=\"event => {}\"","language":"vue","difficulty":"intermediate","tags":["vue","gesture"]},{"title":"Code Example 4","description":"","code":"<motion.button :whilePress=\"{ scale: 0.9, rotate: 3 }\" />","language":"vue","difficulty":"intermediate","tags":["vue"]},{"title":"Code Example 5","description":"","code":"<motion.div @pan=\"(e, pointInfo) => {}\" />","language":"vue","difficulty":"beginner","tags":["vue"]},{"title":"Code Example 6","description":"","code":"<motion.div drag :whileDrag=\"{ scale: 1.2, backgroundColor: '#f00' }\" />","language":"vue","difficulty":"intermediate","tags":["vue","gesture"]},{"title":"Code Example 7","description":"","code":"<motion.div\n drag=\"x\"\n :dragConstraints=\"{ left: 0, right: 300 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","gesture"]},{"title":"Code Example 8","description":"","code":"<script setup>\n import { useDomRef } from \"motion-v\"\n const constraintsRef = useDomRef()\n</script>\n<template>\n <motion.div ref=\"constraintsRef\">\n <motion.div drag :dragConstraints=\"constraintsRef\" />\n </motion.div>\n</template>","language":"vue","difficulty":"intermediate","tags":["vue","gesture"]},{"title":"Code Example 9","description":"","code":"<motion.div\n drag\n dragDirectionLock\n @directionLock=\"callback\"\n/>","language":"vue","difficulty":"beginner","tags":["vue","gesture"]},{"title":"Code Example 10","description":"","code":"<motion.a :whileFocus=\"{ scale: 1.2 }\" href=\"#\" />","language":"vue","difficulty":"intermediate","tags":["vue"]},{"title":"Code Example 11","description":"","code":"<motion.div :whilePress=\"{ scale: 2 }\">\n <button @pointerDownCapture=\"e => e.stopPropagation()\" />\n</motion.div>","language":"vue","difficulty":"intermediate","tags":["vue"]},{"title":"Code Example 12","description":"","code":"<template>\n <motion.svg whileHover=\"hover\">\n <filter id=\"blur\">\n <motion.feGaussianBlur\n :stdDeviation=\"0\"\n :variants=\"{ hover: { stdDeviation: 2 } }\"\n />\n </filter>\n </motion.svg>\n</template>","language":"vue","difficulty":"intermediate","tags":["vue","gesture"]}]{"props":[],"methods":[{"name":"stopPropagation","signature":"stopPropagation()","description":"stopPropagation method"}],"types":[]}["vue","gestures","animation","gesture","scroll","drag","motion","transition"]2025-08-29 11:54:082025-08-29 11:54:08j layoutId\="modal" @click\="() \=> isOn\=true" // This transition will be used when the modal closes :transition="{ type: 'spring' }" > Open </motion.button\> <AnimatePresence\> <motion.dialog v-if\="isOn" layoutId\="modal" // This transition will be used when the modal opens :transition="{ duration: 0.3 }" /> </AnimatePresence\> ``` ### Animating within scrollable element To correctly animate layout within scrollable elements, we need to provide them the `layoutScroll` prop. ``` <motion.div layoutScroll :style\="{ overflow: 'scroll' }" /> ``` This lets Motion account for the element's scroll offset when measuring children. ### Animating within fixed containers To correctly animate layout within fixed elements, we need to provide them the `layoutRoot` prop. ``` <motion.div layoutRoot :style\="{ position: 'fixed' }" /> ``` This lets Motion account for the page's scroll offset when measuring children. ### Group layout animations Layout animations are triggered when a component re-renders and its layout has changed. ``` <script setup\> const open = ref(false) </script\> <template\> <motion.div layout :style\="{ height: isOpen ? "100px" : "500px" }" @click="() => open=!open" /> </template\> ``` But what happens when we have two or more components that don't re-render at the same time, but **do** affect each other's layout? ``` <template\> <Accordion /> <Accordion /> </template\> ``` When one re-renders, for performance reasons the other won't be able to detect changes to its layout. We can synchronise layout changes across multiple components by wrapping them in the `[LayoutGroup component](./vue-layout-group)`. ``` <script setup\> import { LayoutGroup } from "motion-v" </script\> <template\> <LayoutGroup\> <Accordion /> <Accordion /> </LayoutGroup\> </template\> ``` When layout changes are detected in any grouped `motion` component, layout animations will trigger across all of them. ### Scale correction All layout animations are performed using the `transform` style, resulting in smooth framerates. Animating layout using transforms can sometimes visually distort children. To correct this distortion, the first child elements of the element can also be given `layout` property. Open this sandbox and try removing `layout` from the pink dot to see the difference this will make: Transforms can also distort `boxShadow` and `borderRadius`. The `motion` component will automatically correct this distortion on both props, as long as they're set as motion values. If you're not animating these values, the easiest way to do this is to set them via `style`. ``` <motion.div layout :style\="{ borderRadius: 20 }" /> ``` Troubleshooting --------------- ### The component isn't animating Ensure the component is **not** set to `display: inline`, as browsers don't apply `transform` to these elements. Ensure the component is re-rendering when you expect the layout animation to start. ### SVG layout animations are broken SVG components aren't currently supported with layout animations. SVGs don't have layout systems so it's recommended to directly animate their attributes like `cx` etc. ### The content stretches undesirably This is a natural side-effect of animating `width` and `height` with `scale`. Often, this can be fixed by providing these elements a `layout` animation and they'll be scale-corrected. ``` <motion.section layout\> <motion.img layout /> </motion.section\> ``` Some elements, like images or text that are changing between different aspect ratios, might be better animated with `layout="position"`. ### Border radius or box shadows are behaving strangely Animating `scale` is performant but can distort some styles like `border-radius` and `box-shadow`. Motion automatically corrects for scale distortion on these properties, but they must be set on the element via `style`. ``` <motion.div layout :style\="{ borderRadius: '20px' }" /> ``` ### Border looks stretchked during animation Elements with a `border` may look stretched during the animation. This is for two reasons: 1. Because changing `border` triggers layout recalculations, it defeats the performance benefits of animating via `transform`. You might as well animate `width` and `height` classically. 2. `border` can't render smaller than `1px`, which limits the degree of scale correction that Motion can perform on this style. A work around is to replace `border` with a parent element with padding that acts as a `border`. ``` <motion.div layout :style\="{ borderRadius: '10px', padding: '5px' }"\> <motion.div layout "style="{ borderRadius: '5px' }" /> </motion.div\> ``` Technical reading ----------------- Interested in the technical details behind layout animations? Nanda does an incredible job of [explaining the challenges](https://www.nan.fyi/magic-motion) of animating layout with transforms using interactive examples. Matt, creator of Motion, did a [talk at Vercel conference](https://www.youtube.com/watch?v=5-JIu0u42Jc&ab_channel=Vercel) about the implementation details that is largely up to date. Differences with the View Transitions API ----------------------------------------- More browsers are starting to support the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API), which is similar to Motion's layout animations. ### Benefits of View Transitions API The main two benefits of View Transitions is that **it's included in browsers** and **features a unique rendering system**. #### Filesize Because the View Transitions API is already included in browsers, it's cheap to implement very simple crossfade animations. However, the CSS complexity can scale quite quickly. Motion's layout animations are around 12kb but from there it's very cheap to change transitions, add springs, mark matching #### Rendering Whereas Motion animates the elements as they exist on the page, View Transitions API does something quite unique in that it takes an image snapshot of the previous page state, and crossfades it with a live view of the new page state. For shared elements, it does the same thing, taking little image snapshots and then crossfading those with a live view of the element's new state. This can be leveraged to create interesting effects like full-screen wipes that aren't really in the scope of layout animations. [Framer's Page Effects](https://www.framer.com/academy/lessons/page-effects) were built with the View Transitions API and it also extensively uses layout animations. The right tool for the right job. ### Drawbacks to View Transitions API There are quite a few drawbacks to the API vs layout animations: * **Not interruptible**: Interrupting an animation mid-way will snap the animation to the end before starting the next one. This feels very janky. * **Blocks interaction**: The animating elements overlay the "real" page underneath and block pointer events. Makes things feel quite sticky. * **Difficult to manage IDs**: Layout animations allow more than one element with a `layoutId` whereas View Transitions will break if the previous element isn't removed. * **Less performant:** View Transitions take an actual screenshot and animate via `width`/`height` vs layout animation's `transform`. This is measurably less performant when animating many elements. * **Doesn't account for scroll**: If the page scroll changes during a view transition, elements will incorrectly animate this delta. * **No relative animations:** If a nested element has a `delay` it will get "left behind" when its parent animates away, whereas Motion handles this kind of relative animation. * **One animation at a time**: View Transitions animate the whole screen, which means combining it with other animations is difficult and other view animations impossible. All-in-all, each system offers something different and each might be a better fit for your needs. In the future it might be that Motion also offers an API based on View Transitions API.[{"title":"Code Example 1","description":"","code":"<motion.div layout />","language":"vue","difficulty":"beginner","tags":["vue","layout"]},{"title":"Code Example 2","description":"","code":"<motion.div\n layout\n :style=\"{ justifyContent: isOn ? 'flex-start' : 'flex-end' }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","layout"]},{"title":"Code Example 3","description":"","code":"<motion.li layoutId=\"item\" />","language":"vue","difficulty":"beginner","tags":["vue","layout"]},{"title":"Code Example 4","description":"","code":"<motion.div layout :style=\"{ width: isOpen ? '80vw' : 0 }\" />","language":"vue","difficulty":"intermediate","tags":["vue","layout"]},{"title":"Code Example 5","description":"","code":"<motion.div v-if=\"isSelected\" layoutId=\"underline\" />","language":"vue","difficulty":"beginner","tags":["vue","layout"]},{"title":"Code Example 6","description":"","code":"<AnimatePresence>\n <motion.div v-if=\"isOpen\" layoutId=\"modal\" />\n</AnimatePresence>","language":"vue","difficulty":"beginner","tags":["vue","animation","layout"]},{"title":"Code Example 7","description":"","code":"<motion.div layout :transition=\"{ duration: 0.3 }\" />","language":"vue","difficulty":"intermediate","tags":["vue","animation","layout"]},{"title":"Code Example 8","description":"","code":"<motion.div\n layout\n :animate=\"{ opacity: 0.5 }\"\n :transition=\"{\n default: { ease: 'linear' },\n layout: { duration: 0.3 }\n }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation","layout"]},{"title":"Code Example 9","description":"","code":"<motion.button\n layoutId=\"modal\"\n @click=\"() => isOn=true\"\n // This transition will be used when the modal closes\n :transition=\"{ type: 'spring' }\"\n >\n Open\n </motion.button>\n <AnimatePresence>\n <motion.dialog\n v-if=\"isOn\"\n layoutId=\"modal\"\n // This transition will be used when the modal opens\n :transition=\"{ duration: 0.3 }\"\n />\n </AnimatePresence>","language":"vue","difficulty":"intermediate","tags":["vue","animation","spring","layout"]},{"title":"Code Example 10","description":"","code":"<motion.div layoutScroll :style=\"{ overflow: 'scroll' }\" />","language":"vue","difficulty":"intermediate","tags":["vue","scroll","layout"]},{"title":"Code Example 11","description":"","code":"<motion.div layoutRoot :style=\"{ position: 'fixed' }\" />","language":"vue","difficulty":"intermediate","tags":["vue","layout"]},{"title":"Code Example 12","description":"","code":"<script setup>\n const open = ref(false)\n</script>\n\n<template> \n <motion.div\n layout\n :style=\"{ height: isOpen ? \"100px\" : \"500px\" }\"\n @click=\"() => open=!open\"\n />\n</template>","language":"vue","difficulty":"intermediate","tags":["vue","layout"]},{"title":"Code Example 14","description":"","code":"<script setup>\nimport { LayoutGroup } from \"motion-v\"\n</script>\n\n<template>\n <LayoutGroup>\n <Accordion />\n <Accordion />\n </LayoutGroup> \n</template>","language":"vue","difficulty":"beginner","tags":["vue","layout"]},{"title":"Code Example 15","description":"","code":"<motion.div layout :style=\"{ borderRadius: 20 }\" />","language":"vue","difficulty":"intermediate","tags":["vue","layout"]},{"title":"Code Example 16","description":"","code":"<motion.section layout>\n <motion.img layout />\n</motion.section>","language":"vue","difficulty":"beginner","tags":["vue","layout"]},{"title":"Code Example 17","description":"","code":"<motion.div layout :style=\"{ borderRadius: '20px' }\" />","language":"vue","difficulty":"intermediate","tags":["vue","layout"]},{"title":"Code Example 18","description":"","code":"<motion.div layout :style=\"{ borderRadius: '10px', padding: '5px' }\">\n <motion.div layout \"style=\"{ borderRadius: '5px' }\" />\n</motion.div>","language":"vue","difficulty":"intermediate","tags":["vue","layout"]}]["vue","layout","animations","animation","scroll","spring","motion","transition"]2025-08-29 11:54:082025-08-29 11:54:08 ��� � � � � � � � � | l \ L < ,  � � � � � � � � | l \ L < ,  � � � � � � � � | l \ L < ,  � � � � � � � � | l \ L < ,  ��������|l\L<, ��������|l\L<, ���ueUE5%����tdTD4$��������tdTD4$��������tdTD4$��������tdTD4$��������������������ui]QE9-! �����h\PD8, �����������������uh[NA!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations� scroll� !animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations� gestures5 gestures4 gestures3 gestures2!animations1!animations0!animations/!animations.!animations-!animations,!animations+!animations*!animations)!animations(!animations'!animations&!animations%!animations$!animations#!animations"!animations!!animations !animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations!animations !animations !animations !animations !animations !animations!animations!animations!animations!animations!animations!animations!animations!animations!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations�tgetting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started!animations�!animations�!animations�!animations�!animations�!animations�!animations�!animations� �r���������tfXJ<. ���������YK=/!�������xcN9$ � � � � � � | g R = (  � � � � � � � k V A ,   � � � � � � � � � � ~ r f Z N B 6 *    � � � � � � � � � � � v���������r j ^ R F : . "  � � � � � � � � � � � z n b Vsg I < / "  ��������qbSD5&reference referencereferencereferencereferencereferencereferencereferencereferencereferencereference�utilities�utilities�utilities�utilities�utilities�utilities�utilities�utilities�utilities�utilities�utilities�utilities�utilities�utilities� gestures� gestures� gestures� gestures� gestures� gestures� gestures� gestures� gestures� scroll� scroll� scroll� gestures� gestures� gestures� gestures� gestures� gestures� gestures� gestures� springsf springse springsd springsc springsb springsa springs` scroll� scroll� scroll� scroll� scroll� scroll� scroll_ scroll^ scroll] scroll\ scroll[ scrollZ scrollY scrollX scrollW scrollV scrollU scrollT scrollS scrollR scrollQ scrollP scrollO scrollN layout� layout� layout� layout� layout layout~ layout} layout| layout{ layoutz layouty layoutx layoutw layoutv layoutu layoutt layouts layoutM layoutL layoutK layoutJ layoutI layoutH layoutG layoutF layoutE layoutD layoutC layoutB layoutA layout@ layout? layout>+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started�+getting-started� gesturesr gesturesq gesturesp gestureso gesturesn gesturesm gesturesl gesturesk gesturesj gesturesi gesturesh gesturesg gestures= gestures< gestures; gestures: gestures9 gestures8 gestures7f immediately snap to it, if the initial animation value exceeds this value). ``` <motion.div drag :dragTransition\="{ min: 0, max: 100 }" /> ``` #### `bounceStiffness` **Default:** `500` If `min` or `max` is set, this affects the stiffness of the bounce spring. Higher values will create more sudden movement. ``` <motion.div drag :dragTransition\="{ min: 0, max: 100, bounceStiffness: 100 }" /> ``` #### `bounceDamping` **Default:** `10` If `min` or `max` is set, this affects the damping of the bounce spring. If set to `0`, spring will oscillate indefinitely. ``` <motion.div drag :dragTransition\="{ min: 0, max: 100, bounceStiffness: 100 }" /> ``` ### Orchestration #### `delay` **Default:** `0` Delay the animation by this duration (in seconds). ``` animate(element, { filter: "blur(10px)" }, { delay: 0.3 }) ``` By setting `delay` to a negative value, the animation will start that long into the animation. For instance to start 1 second in, `delay` can be set to -`1`. #### `repeat` **Default:** `0` The number of times to repeat the transition. Set to `Infinity` for perpetual animation. ``` <motion.div :animate\="{ rotate: 180 }" :transition\="{ repeat: Infinity, duration: 2 }" /> ``` #### `repeatType` **Default:** `"loop"` How to repeat the animation. This can be either: * `loop`: Repeats the animation from the start. * `reverse`: Alternates between forward and backwards playback. * `mirror`: Switches animation origin and target on each iteration. ``` <motion.div :animate\="{ rotate: 180 }" :transition\="{ repeat: 1, repeatType: 'reverse', duration: 2 }" /> ``` #### `repeatDelay` **Default:** `0` When repeating an animation, `repeatDelay` will set the duration of the time to wait, in seconds, between each repetition. ``` <motion.div :animate\="{ rotate: 180 }" :transition\="{ repeat: Infinity, repeatDelay: 1 }" /> ``` #### `when` **Default:** `false` With variants, describes when an animation should trigger, relative to that of its children. * `"beforeChildren"`: Children animations will play after the parent animation finishes. * `"afterChildren"`: Parent animations will play after the children animations finish. ``` <script setup\> const list = { hidden: { opacity: 0, transition: { when: "afterChildren" } } } const item = { hidden: { opacity: 0, transition: { duration: 2 } } } </script\> <template\> <motion.ul :variants\="list" animate\="hidden"\> <motion.li :variants\="item" /> <motion.li :variants\="item" /> </motion.ul\> </template\> ``` #### `delayChildren` **Default:** `0` With variants, setting `delayChildren` on a parent will delay child animations by this duration (in seconds). ``` <sctipt setup\> const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { delayChildren: 0.5 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } </sctipt\> <template\> <motion.ul :variants\="container" initial\="hidden" animate\="show" \> <motion.li :variants\="item" /> <motion.li :variants\="item"/> </motion.ul\> </template\> ``` Using the `[stagger](./stagger)` function, we can stagger the delay across children. ``` const transition = { delayChildren: stagger(0.1) } ``` By default, delay will stagger across children from first to last. By using `stagger`'s `from` option, we can stagger from the last child, the center, or a specific index. ``` const transition = { delayChildren: stagger(0.1, { from: "last" }) } ```[{"title":"Code Example 1","description":"","code":"const transition = {\n duration: 0.8,\n delay: 0.5,\n ease: [0, 0.71, 0.2, 1.01],\n}","language":"vue","difficulty":"intermediate","tags":["vue","animation","stagger"]},{"title":"Code Example 2","description":"","code":"// Motion component\n<motion.div\n :animate=\"{ x: 100 }\"\n :transition=\"transition\"\n/>\n\n// animate() function\nanimate(\".box\", { x: 100 }, transition)","language":"vue **�j�PЀ����$ R00�,    1�0   �WЀ����2 �00�_       00�y1�k     00�g  px�i28�y 4�_5�`0�}6�a7�b8�c0�`9�d2�a   0�e0�e1�f2�g4�h6�i7�j8�k9�l3�i 0�m1�n2�o3�p60�{4�t00�w5�_    0�`    6�v7�w8�x afterchildren�m lways�fnimate�_ ion�_ basefrequency�_lur�iouncestiffness�h  calculated�f hange�sode�_nsole�st�m  tainer�ndelay�ichildren�n tected�s iv�arag�d transition�dwer�vuration�j  element�i s�qxample�_ feturbulence�_ff�y ilter�irame�wom�pgesture�dheight�t  idden�m   import�rnertia�ffinity�j  itial�nput�ys�v tem�m   js�qlast�p i�m#st�mog�smass�_ th�f x�g in�g odifytarget�ftion�_   nearest�fow�v  umbertocolor�y opacity�m    utput�y pixels�fower�d render�wpeat�jdelay�l type�k size�qtdelta�c speed�b verse�k gba�y otate�`und�fscript�moll�qtipt�nection�`tup�mhow�n  nap�f pecific�qring�_          tagger�i  iffness�` op�xyle�w target�f emplate�m imeconstant�eo�fransform�y er�{ ition�_  ype�_ ul�mvariants�m   elocity�a iewport�que�_when�m idth�t x�}X .  ,# #  @` c0 <'! f # F   b   0 +   4(  E$_ �Ǹ���� ��'0true� ween� ype�   ul� semotionvalue�scroll�pring�  transform� v�elocity�& iew�box� sible� ualduration�" ue�~  whilehover�inview�x� zoom� C    D$nines the "bounciness" of a spring animation. `0` is no bounce, and `1` is extremely bouncy. **Note:** `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set. ``` <motion.div :animate\="{ rotateX: 90 }" :transition\="{ type: 'spring', bounce: 0.25 }" /> ``` #### `visualDuration` If `visualDuration` is set, this will override `duration`. The visual duration is a time, **set in seconds**, that the animation will take to visually appear to reach its target. In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after. This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations. ``` <motion.div :animate\="{ rotateX: 90 }" :transition\="{ type: 'spring', visualDuration: 0.5, bounce: 0.25 }" /> ``` #### `damping` **Default:** `10` Strength of opposing force. If set to 0, spring will oscillate indefinitely. ``` <motion.a :animate\="{ rotate: 180 }" :transition\="{ type: 'spring', damping: 300 }" /> ``` #### `mass` **Default:** `1` Mass of the moving object. Higher values will result in more lethargic movement. ``` <motion.feTurbulence :animate\="{ baseFrequency: 0.5 }" :transition\="{ type: 'spring', mass: 0.5 }" /> ``` #### `stiffness` **Default:** `1` Stiffness of the spring. Higher values will create more sudden movement. ``` <motion.section animate\={{ rotate: 180 }} transition\={{ type: 'spring', stiffness: 50 }} /> ``` > _I never really understood how_ `_damping_`_,_ `_mass_` _and_ `_stiffness_` _influence a spring animation, so I made a_ [_tool for myself_](https://emilkowal.ski/ui/great-animations#great-animations-feel-natural) _to visualise it._~ Emil Kowalski, [Animations on the Web](https://animations.dev/) #### `velocity` **Default:** Current value velocity The initial velocity of the spring. ``` <motion.div :animate\="{ rotate: 180 }" :transition\="{ type: 'spring', velocity: 2 }" /> ``` #### `restSpeed` **Default:** `0.1` End animation if absolute speed (in units per second) drops below this value and delta is smaller than `restDelta`. ``` <motion.div :animate\="{ rotate: 180 }" :transition\="{ type: 'spring', restSpeed: 0.5 }" /> ``` #### `restDelta` **Default:** `0.01` End animation if distance is below this value and speed is below `restSpeed`. When animation ends, the spring will end. ``` <motion.div :animate\="{ rotate: 180 }" :transition\="{ type: 'spring', restDelta: 0.5 }" /> ``` ### Inertia An animation that decelerates a value based on its initial velocity. Optionally, `min` and `max` boundaries can be defined, and inertia will snap to these with a spring animation. This animation will automatically precalculate a target value, which can be modified with the `modifyTarget` property. This allows you to add snap-to-grid or similar functionality. Inertia is also the animation used for `dragTransition`, and can be configured via that prop. #### `power` **Default:** `0.8` A higher power value equals a further calculated target. ``` <motion.div drag :dragTransition\="{ power: 0.2 }" /> ``` #### `timeConstant` **Default:** `**700**` Adjusting the time constant will change the duration of the deceleration, thereby affecting its feel. ``` <motion.div drag :dragTransition\="{ timeConstant: 200 }" /> ``` #### `modifyTarget` A function that receives the automatically-calculated target and returns a new one. Useful for snapping the target to a grid. ``` <motion.div drag // dragTransition always type: inertia :dragTransition\="{ power: 0, // Snap calculated target to nearest 50 pixels modifyTarget: target => Math.round(target / 50) \* 50 }" /> ``` #### `min` Minimum constraint. If set, the value will "bump" against this value (or immediately spring to it if the animation starts as less than this value). ``` <motion.div drag :dragTransition\="{ min: 0, max: 100 }" /> ``` #### `max` Maximum constraint. If set, the value will "bump" against this value (or � ��4QI�A�g�- {33https://motion.dev/docs/inviewinViewjsscrollLearn to use Motion's inView function to detect when elements enter and leave the viewport. Built on Intersection Observer for optimal performance (0.5kb), it's ideal for scroll-triggered animations, lazy-loading, and more. Customize detection with root, margin, and amount options.`inView` detects when elements enter and leave the viewport. ``` inView("#carousel li", (element) \=> { animate(element, { opacity: 1 }) }) ``` Detecting when an element is in view can help creating effects like: * Animating elements when they scroll into and out of view. * Deactivating animations when they're no longer visible. * Lazy-loading content. * Automatically start/stop videos. `inView` function is built on the browser's native [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) for the best possible performance (all calculations happen off the main JavaScript thread) and a tiny filesize (just 0.5kb). Usage ----- Import from `"mo��_PG�{�s�5� }33https://motion.dev/docs/hoverhoverjsgesturesDiscover Motion's hover function for reliable hover gesture detection, filtering out emulated touch events. Learn how it simplifies event listener management for hover start and end, and explore options like passive and once for tailored behavior.Motion's `hover` function detects hover gestures, firing events when they start and end. For legacy reasons, browsers emulate hover events from touch devices, which can lead to "stuck" UIs and other unwanted visual artefacts/broken behaviours. `hover` filters these fake events out. ``` hover(".button", (element) \=> { console.log("hover started on", element) return () \=> console.log("hover end") }) ``` `hover` is also: * Clean: Automatically manages event listeners * Convenient: Accepts either elements or CSS selectors for attaching multiple gestures at once * Lazy: Attaches only the event listeners needed `hover` callbacks can do anything, but often they're used to start or control animations. ``` hover("li", (element) \=> { const animation = animate(element, { rotate: 360 }) return () \=> animation.stop() }) ``` Usage ----- ### Import `hover` can be imported into your project via `"m� ++�GI�9�1�K�u k33https://motion.dev/docs/scrollscrolljsscrollLearn how Motion's 5.1kb scroll() function creates high-performance, scroll-linked animations by leveraging the ScrollTimeline API. Bind animations directly to scroll progress, track vertical or horizontal scroll, and target specific elements or container scroll. Discover options for scroll offsets, pinning, and detailed scroll information.Motion's 5.1kb `scroll()` function creates scroll-linked animations. A scroll-lin��ZFk-�W�Y�' �33https://motion.dev/docs/react-scroll-animationsScroll animationreactscrollCreate scroll-triggered or scroll-linked animations with Motion for React. Use whileInView for viewport triggers and useScroll to link animations to scroll progress.There are two types of scroll animations: * **Scroll-triggered:** A normal animation is triggered when an element enters the viewport. * **Scroll-linked:** Values are linked directly to scroll progress. Motion is capable of both types of animation. Scroll-triggered animations --------------------------- Scroll-triggered animations are just normal animations that fire when an element enters or leaves the viewport. Motion offers [the](./react-motion-component#whileinview) `[whileInView](./react-motion-component#whileinview)` [prop](./react-motion-component#whileinview) to set an animation target or variant when the element enters the view. ``` <motion.div initial\={{ opacity: 0 }} whileInView\={{ opacity: 1 }} /> ``` ### One-time animations With [the](./react-motion-component#viewport-1) `[viewport](./react-motion-component#viewport-1)` [options](./react-motion-component#viewport-1), it's possible to set `once: true` so once an element has entered the viewport, it won't animate back out. ``` <motion.div initial\="hidden" whileInView\="visible" viewport\={{ once: true }} /> ``` ### Changing scroll container By default, the element will be considered within the viewport when it enters/leaves the **window**. This can be changed by providing the `ref` of another scrollable element. ``` function Component() { const scrollRef = useRef(null) return ( <div ref\={scrollRef} style\={{ overflow: "scroll" }}\> <motion.div initial\={{ opacity: 0 }} whileInView\={{ opacity: 1 }} viewport\={{ root: scrollRef }} /> </div\> ) } ``` For more configuration options, checkout [the](./react-motion-component#viewport-1) `[motion](./react-motion-component#viewport-1)` [component](./react-motion-component#viewport-1) API reference. ### Setting state It's also possible to set state when any element (not just a `motion` component) enters and leaves the viewport with the `[useInView](./react-use-in-view)` [hook](./react-use-in-view). Scroll-linked animations ------------------------ Scroll-linked animations are created using [motion values](./react-motion-value) and the `[useScroll](./react-use-scroll)` [hook](./react-use-scroll). `useScroll` returns four motion �p}" :transition\="transition" /> // animate() function animate(".box", { x: 100 }, transition) ``` Setting a transition -------------------- `transition` can be set on any animation prop, and that transition will be used when the animation fires. ``` <motion.div :whileHover\="{ scale: 1.1, transition: { duration: 0.2 } }" /> ``` ### Value-specific transitions When animating multiple values, each value can be animated with a different transition, with `default` handling all other values: ``` // Motion component <motion.li :animate\="{ x: 0, opacity: 1, transition: { default: { type: 'spring' }, opacity: { ease: 'linear' } } }" /> // animate() function animate("li", { x: 0, opacity: 1 }, { default: { type: "spring" }, opacity: { ease: "linear" } }) ``` ### Default transitions It's possible to set default transitions via the `transition` prop. Either for specific `motion` components: ``` <motion.div :animate\="{ x: 100 }" :transition\="{ type: 'spring', stiffness: 100 }" /> ``` Or for a group of `motion` components [via](./vue-motion-config#transition) `[MotionConfig](./vue-motion-config#transition)`: ``` <MotionConfig :transition\="{ duration: 0.4, ease: 'easeInOut' }"\> <App /> </MotionConfig\> ``` Transition settings ------------------- #### `type` **Default:** Dynamic `type` decides the type of animation to use. It can be `"tween"`, `"spring"` or `"inertia"`. **Tween** animations are set with a duration and an easing curve. **Spring** animations are either physics-based or duration-based. Physics-based spring animations are set via `stiffness`, `damping` and `mass`, and these incorporate the velocity of any existing gestures or animations for natural feedback. Duration-based spring animations are set via a `duration` and `bounce`. These don't incorporate velocity but are easier to understand. **Inertia** animations decelerate a value based on its initial velocity, usually used to implement inertial scrolling. ``` <motion.path :animate\="{ pathLength: 1 }" :transition\="{ duration: 2, type: 'tween' }" /> ``` #### Spring visualiser TimePhysics Duration Bounce Use visual duration ### Tween #### `duration` **Default:** `0.3` (or `0.8` if multiple keyframes are defined) The duration of the animation. Can also be used for `"spring"` animations when `bounce` is also set. ``` animate("ul > li", { opacity: 1 }, { duration: 1 }) ``` #### `ease` The easing function to use with tween animations. Accepts: * Easing function name. E.g `"linear"` * An array of four numbers to define a cubic bezier curve. E.g `[.17,.67,.83,.67]` * A [JavaScript easing function](./easing-functions), that accepts and returns a value `0`\-`1`. These are the available easing function names: * `"linear"` * `"easeIn"`, `"easeOut"`, `"easeInOut"` * `"circIn"`, `"circOut"`, `"circInOut"` * `"backIn"`, `"backOut"`, `"backInOut"` * `"anticipate"` When animating keyframes, `ease` can optionally be set as an array of easing functions to set different easings between each value: ``` <motion.div :animate\="{ x: \[0, 100, 0\], transition: { ease: \['easeIn', 'easeOut'\] } }" /> ``` > _I usually use the_ `_"easeOut"_` _curve for enter and exit transitions. The acceleration at the beginning gives the user a feeling of responsiveness. I use a duration no longer than_ `_0.3_`_/_`_0.4_` _seconds to keep the animation fast._~ Emil Kowalski, [Animations on the Web](https://animations.dev/) #### `times` When animating multiple keyframes, `times` can be used to adjust the position of each keyframe throughout the animation. Each value in `times` is a value between `0` and `1`, representing the start and end of the animation. ``` <motion.div :animate\="{ x: \[0, 100, 0\], transition: { times: \[0, 0.3, 1\] } }" /> ``` There must be the same number of `times` as there are keyframes. Defaults to an array of evenly-spread durations. ### Spring #### `bounce` **Default:** `0.25` `bounce` determ 9*9��HS[1!�I��I�' �33https://motion.dev/docs/vue-transitionsTransition optionsvueanimationsDefine animation behavior with Motion for Vue's transition prop. Choose time-based or physics-based animations. Customize duration, easing, delay, and repeat.A `transition` defines the type of animation used when animating between two values. ``` const transition = { duration: 0.8, delay: 0.5, ease: \[0, 0.71, 0.2, 1.01\], } ``` ``` // Motion component <motion.div :animate\="{ x: 100 s�KRG�3�1�� }33https://motion.dev/docs/presspressjsgesturesDiscover Motion's press function for robust press gesture detection. Learn how it filters secondary pointers, enhances accessibility with keyboard support, and simplifies event listener management. Explore options for start and end callbacks, and passive/once event handling.Motion's `press` function detects press gestures, firing events when they start, end or cancel. It's different to native browser events like `"pointerstart"` etc in that `press` automatically filters out secondary pointer events, like right clicks or a second touch point. It also expands on `"click"` by being great for accessibility. Every element with a press gesture automatically becomes keyboard accessible via focus and the enter key. ``` press("button", (element) \=> { console.log("press started on", element) return () \=> console.log("press ended") }) ``` `press` is also: * Clean: Automatically manages event listeners * Convenient: Accepts either elements or CSS selectors for attaching multiple listeners at once * Lazy: Attaches only the listeners needed It can be used to fire any function, but also to start and stop animations: ``` press("button", (element) \=> { animate(element, { scale: 0.9 }) return () \=> animate(element, { scale: 1 }) }) ``` Video overview -------------- Usage ----- ### Import `press` can be imported via `"motion"`. ``` import { press } from "motion" ``` ### Press start `press` can detect press start gestures on either a `Element`/array of elements: ``` press( document.getElementById("my-id"), () \=> { console.log("my-id pressed!") } ) ``` It also accepts CSS selectors to detect press start on multiple elements: ``` press("a", () \=> console.log("link pressed")) ``` The callback is provided the element being pressed, and the triggering `[PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)`: ``` press("div:nth-child(2)", � ���Ȁ���� ��)�<�I�{0webflow2`�`�`��' �'gl6  0L  0ll2�p���?�4re<�hat6 �-�n�r �-�nen4�q�]��]��]�+*��Z�j�?+�W�i�K�U&�I�[�M!�W��]X�Ui�M�%V"�:$w[�X! (�0'c .( "3�!�*)%"QO}�+*��Z�j�?+�W�i�K�Ure7�_�r�5�]�_�ras5���@��!�FQ���@ver8��F�ich6�a�i�S�e�Ci��B��{�a�i�Sle8�o�0,�>�y8�odrag; ;� focus; :�hover5�+�0 �?�g �@�)82?� �+�0 �?�ginview5 �_ �p�2`�: �u�8=A48 �_ �p�2`�:press7�4 �D�,�4tap5�/ �C�j9)dl�B�/ �C�jrlwind5X)X)ole9 �S��Eidth2 �6 �O �T �% �( �i �A �B�� ��H �% �( �i �All2�=���()�8)�8)4��*���*���*� �2* �'B O�y+ a�E�d4�Q7�e4>�#���# .\+j$CW� 6 b��f4�q7�x?stL {{G$�0{�ZA�65� �2* �'B O�y+ a�E�d4�Q7�e4ndow< �m �'pes<�pth2 �:&�^&�^&�42�D� �nD� �nD� �c2(�p$�*p$�*p$�  xz�88� "cP�LK  �1f~�9,d,3�I�) o�'�O>�!.�d+H�`?0���@�,.4�I�/) o�)o>�1 � c:!<. �x&/;F5'�0[k d��F  xz�88� "cP�LK  �1f~�9,d,3�I�) o�'�O>�!in<� !  ��Wout9�on9�2��rdpress2b�b�b�s9�#k;�  �k�hing6� �s=�Lld6�N �Nry6�S �Srap2>��K>�>�ping5�N��,�N�ww6�z��d�zx2��t�tf�M KH ;@Z KH ;@Z KH ;@�C(�??#;�O+�=� �\@5i�>�C`&�1�:�DG-1>� (�@?#;�+�?�*�m �!L�C(�??#;�O+�=� �\y6 ���@T]#�46i�w� �AT]#�t �# ���@T]#�4arn6i ibrid9�5et7ou2�]���;7�7�7�:'�<'�<'�V� $. ?)4i1Yy<VI*�4�]"&�n�&7"#��4�Z &�n�f7"#��4 �*��#�}9�R�e�V� $. ?)4i1Yy<VI*�4�]"&�n�&7"#��4r2���_�_�T�,��|�W+��  �O�! �G�X  ��e��|�W+��  �O�! �G�Xtube<�z6������0 �>(7<$ AQ,j�d �N $  #$�=E �S{ ''�VȀ��QȀ����&`002B�@H S@H S@H d�J49+T�$49+T�$49+T:�OV�*�V�*�V�*�|7Eu �KI�4Q�@m]R �}b9IeM H  s7�s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$B��HR ��d9In V  v?W� �'W�p�� =]jvM4-�|7Eu �KI�4Q�@m]R �}b9IeM H  s7002��� �9�&1=�7f9�z�g19�Sdeg8�M�N�Mf04�{�a�a �fpx8 �0�4 �1<z �0�4vh8���12$�"�t�t��P3�.3�.3�6�a�a�Tb�mE�`2V�mW� `r! 5p G G/tn�t�3D#X4�)/P/q/1i D( ;,   #<>"~4W�mW�(�br! 5n V.wPk� � x�!` TZ�+�Tb�mE�`2V�mW� `r! 5p G G/t04��a�a� ��DI�Q�g� 02$�@H)U@H)U@H).�YnIW�(nIW�(nIW �T�a_N�B�\C0�0DGBCd?�1�{G-1>�  �T�RaaN�b�mL�2 �T�a_N�B�\Cpx8 �2�.� �3�.�l �2�.vw8�V�W�V242 �5 �N �Spx8����16 �n �n282���kb<�36�p �p502�2��73�m�_�_�K802�d���2�-�2�f0"kb9 px<�A23�F$ �$ �$  �M G'�h �b�S��%:�%���+"n/�:Z/��T�V�'Qo� �2H�: �M G'�h �b�S��%08�3�4 �A�M�302�0�T0�T0��]�v�F�02�7�P�U208 �' �j �'43�M�_�_53�J �? �?  �Z*T55 �u  �  �.�  �q �u  �  �.33�O|'�@|'�@|'��)� �/�M�;�I�1) �c;Q �!%=��)0=�406�e�>a�f��e245�9�<�}�9�<�}334�~�a�a485�&�)�j�&�)�j53�l�_�_602�Wq�q�q�*� ^�> �1�d�*� ^�>deg8�P�A�Q�P93�K�_�_d61�w1kb6H H43"�Kz# �(z# �(z# �L �L449� 52�- �{ �{ �t�_�_ �!�@:� �TW�A�_GX�zt 0 Q@  �"�<�<�/6�c �!�@02�HJpHJpHJ�W�j�X�W08�~�V �A�~�V px<�mvh4�{�a�a679 �L7202�M��53��_�_88�#���#0vw<�25 �( �+ �l �( �+ �l39�M63�o�_�_98 �F� �G X�  �F� 06�a �}Q�a55�2�7�2�7a2�@6Sm6Sm6S:�)�H)�)�H)�)�H)4�&*�%J�>*�%J�>*�%JSI8�$C�$*0 $(l]%�)�z>� $[64�c3/~i=_(%1zu~N�v#.a&� �Q1S N?2.�P� ,"$6@;Jn&8�c3/Vji?_(%I��6 3"6�)MM66>t1 T ��Q^> :UZJA6$ �kD*SI8�$C�$*0 $(l]%�)�z>� $[64�c3/~i=_(%1zu~b<�%le8�?�@�1��?out4�?�a�a�s�T�WdB%1�(� �s�T�WdB%1ve=�solute9 �j�Ocademy<� celerated6�`�` ion3�6�_�_�T�U�Tpt2���� �b�� �s3�)�8)�8) �7ss2�^���U��k�N�U��kibility;�! le; �(�)ordion<�_11unt<�(�Mhieving6�U �Uross< �()t4��a�aion8�� �! �ve4��J�J�>�=�K�>�=s<�^ual;�+�wdd5 � �A_ F��/� � �A_ F�ed<�5ing<�)tionally8 �>41 �?4 �>4just9�ed3�v�_�_vanced3&#�B�a�a�<]�<tage9(ffect9�P�ter9�A�v�i�P>children8���gain9�5i5� � �_ �D� � �_ �Dll3�m�_�_�A�U�U|R# �p�u� h�>�"�IY �2�|R# �pow<�]ing8�)�*�)s5�] �]most8�  �*�( % �+$ =M (( G " a,    - � "G !!-8  0 > $ +  3e  �q� � 2 L � � � 3n� c)��Sz��D�l +!�MG%3Code Example 29vueanimations<motion.div :animate="{ rotate: 180 }" :transition="{ repeat: Infinity, repeatDelay: 1 }" />["vue","animation","stagger"]intermediate2025-08-29 11:54:11�U�k +!�3%3Code Example 28vueanimations<motion.div :animate="{ rotate: 180 }" :transition="{ repeat: 1, repeatType: 'reverse', duration: 2 }" />["vue","animation"]intermediate2025-08-29 11:54:11�7�j +!�G3%3Code Example 27vueanimations<motion.div :animate="{ rotate: 180 }" :transition="{ repeat: Infinity, duration: 2 }" />["vue","animation"]intermediate2025-08-29 11:54:11��i +!�G%3Code Example 26vueanimationsanimate(element, { filter: "blur(10px)" }, { delay: 0.3 })["vue","animation","stagger"]intermediate2025-08-29 11:54:11�O�h +!�QY%3Code Example 24vueanimations<motion.div drag :dragTransition="{ min: 0, max: 100, bounceStiffness: 100 }" />["vue","animation","gesture","spring"]intermediate2025-08-29 11:54:11�"�g +!� G%3Code Example 22vueanimations<motion.div drag :dragTransition="{ min: 0, max: 100 }" />["vue","animation","gesture"]intermediate2025-08-29 11:54:11�6�f +!�1G%3Code Example 21vueanimations<motion.div drag // dragTransition always type: inertia :dragTransition="{ power: 0, // Snap calculated target to nearest 50 pixels modifyTarget: target => Math.round(target / 50) * 50 }" />["vue","animation","gesture"]intermediate2025-08-29 11:54:11�#�e +!� G%3Code Example 20vueanimations<motion.div drag :dragTransition="{ timeConstant: 200 }" />["vue","animation","gesture"]intermediate2025-08-29 11:54:11��d +!}G%3Code Example 19vueanimations<motion.div drag :dragTransition="{ power: 0.2 }" />["vue","animation","gesture"]intermediate2025-08-29 11:54:11�A�c +!�IE%3Code Example 18vueanimations<motion.div :animate="{ rotate: 180 }" :transition="{ type: 'spring', restDelta: 0.5 }" />["vue","animation","spring"]intermediate2025-08-29 11:54:11�A�b +!�IE%3Code Example 17vueanimations<motion.div :animate="{ rotate: 180 }" :transition="{ type: 'spring', restSpeed: 0.5 }" />["vue","animation","spring"]intermediate2025-08-29 11:54:11�>�a +!�CE%3Code Example 16vueanimations<motion.div :animate="{ rotate: 180 }" :transition="{ type: 'spring', velocity: 2 }" />["vue","animation","spring"]intermediate2025-08-29 11:54:11�B�` +!�KE%3Code Example 15vueanimations<motion.section animate={{ rotate: 180 }} transition={{ type: 'spring', stiffness: 50 }} />["vue","animation","spring"]intermediate2025-08-29 11:54:11�L�_ +!�_E%3Code Example 14vueanimations<motion.feTurbulence :animate="{ baseFrequency: 0.5 }" :transition="{ type: 'spring', mass: 0.5 }" />["vue","animation","spring"]intermediate2025-08-29 11:54:11�=�^ +!�AE%3Code Example 13vueanimations<motion.a :animate="{ rotate: 180 }" :transition="{ type: 'spring', damping: 300 }" />["vue","animation","spring"]intermediate2025-08-29 11:54:11�b�] +!� E%3Code Example 12vueanimations<motion.div :animate="{ rotateX: 90 }" :transition="{ type: 'spring', visualDuration: 0.5, bounce: 0.25 }" />["vue","animation","spring"]intermediate2025-08-29 11:54:11�?�\ +!�EE%3Code Example 11vueanimations<motion.div :animate="{ rotateX: 90 }" :transition="{ type: 'spring', bounce: 0.25 }" />["vue","animation","spring"]intermediate2025-08-29 11:54:11�6�[ +!�E3%3Code Example 10vueanimations<motion.div :animate="{ x: [0, 100, 0], transition: { times: [0, 0.3, 1] } }" />["vue","animation"]intermediate2025-08-29 11:54:11�>�Z )!�W3%3Code Example 9vueanimations<motion.div :animate="{ x: [0, 100, 0], transition: { ease: ['easeIn', 'easeOut'] } }" />["vue","animation"]intermediate2025-08-29 11:54:11� �Y )!s3%3Code Example 8vueanimationsanimate("ul > li", { opacity: 1 }, { duration: 1 })["vue","animation"]intermediate2025-08-29 11:54:11y different elements, a `layoutId`: ``` <motion.div layoutId\="underline" /> ``` Exit animations --------------- By wrapping `motion` components with `<AnimatePresence>` we gain access to [exit animations](./react-animate-presence). This allows us to animate elements as they're removed from the DOM. ``` <AnimatePresence\> {show ? <motion.div key\="box" exit\={{ opacity: 0 }} /> : null} </AnimatePresence\> ``` Development tools ----------------- Motion provides [developer tools](./tools-quick-start) to enhance your animation development experience, like loading your LLM with the [latest Motion documentation](./ai-llm-documentation), and [visual bezier curve editors in VS Code](./tools-vs-code-extension). [![Add to VS Code](https://framerusercontent.com/images/mOTurneZubngSCtZ2IvwlqoPUs.png?width=348&height=82)](vscode:extension/Motion.motion-vscode-extension)[![Add to Cursor](https://framerusercontent.com/images/G3FXTpYrPji6khdFKeGo8YrbS08.png?width=324&height=82)](https://cursor.com/en/install-mcp?name=motion&config=eyJjb21tYW5kIjoibnB4IC15IG1vdGlvbi1haSJ9) Learn next ---------- That's a very quick overview of Motion for React's basic features. But there's a lot more to learn! Next, we recommend diving further into the [the](./react-motion-component) `[<motion />](./react-motion-component)` [component](./react-motion-component) to learn more about its powerful features, like variants. Or, you can dive straight in to our [Fundamentals examples](https://examples.motion.dev/react#fundamentals). Each comes complete with full source code that you can copy/paste into your project.[{"title":"Code Example 1","description":"","code":"npm install motion","language":"react","difficulty":"beginner","tags":["react"]},{"title":"Code Example 2","description":"","code":"import { motion } from \"motion/react\"","language":"react","difficulty":"beginner","tags":["react"]},{"title":"Code Example 3","description":"","code":"<motion.ul animate={{ rotate: 360 }} />","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 4","description":"","code":"<motion.div\n animate={{\n scale: 2,\n transition: { duration: 2 }\n }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 5","description":"","code":"<motion.button initial={{ scale: 0 }} animate={{ scale: 1 }} />","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 6","description":"","code":"<motion.button initial={false} animate={{ scale: 1 }} />","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 7","description":"","code":"<motion.button\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.95 }}\n onHoverStart={() => console.log('hover started!')}\n/>","language":"react","difficulty":"intermediate","tags":["react","gesture"]},{"title":"Code Example 8","description":"","code":"<motion.div\n initial={{ backgroundColor: \"rgb(0, 255, 0)\", opacity: 0 }}\n whileInView={{ backgroundColor: \"rgb(255, 0, 0)\", opacity: 1 }}\n/>","language":"react","difficulty":"intermediate","tags":["react"]},{"title":"Code Example 9","description":"","code":"const { scrollYProgress } = useScroll()\n\nreturn <motion.div style={{ scaleX: scrollYProgress }} />","language":"react","difficulty":"intermediate","tags":["react","scroll"]},{"title":"Code Example 10","description":"","code":"<motion.div layout />","language":"react","difficulty":"beginner","tags":["react","layout"]},{"title":"Code Example 11","description":"","code":"<motion.div layoutId=\"underline\" />","language":"react","difficulty":"beginner","tags":["react","layout"]},{"title":"Code Example 12","description":"","code":"<AnimatePresence>\n {show ? <motion.div key=\"box\" exit={{ opacity: 0 }} /> : null}\n</AnimatePresence>","language":"react","difficulty":"intermediate","tags":["react","animation"]}]["react","getting-started","animation","gesture","scroll","drag","layout","motion","transition"]2025-08-29 11:54:042025-08-29 11:54:04 ""�VȀ����0�0alone5�F�H�F�Hgside8�" �"ready8��d�v�so2�0���]�a�a4Q 8�dU�Zxa�x#�P����B �[xa�8#�R:�l�w��a�j4Q 8�dU�Zxa�x#�P�ternates9�Pways2�i �y �y �r�s�rmazing5E�VE�Vn20 � C�'C�'C�B�}{�}{�}{� �Z9 �H �kJ�rx�!(�))�P� :V�,�+-�3z�!�T"�R�<+��;{H} %4 �Z9 �H �kJ�rx�!d2(�MEiSEiSEi$>  �&z�` )Dz�` )Dz�` )>2 � Yh�Yh�Yh�# !�T0�< K�h`"i4 &)n�t=4� # �  �CNr\q�Z   #� �od�%rT= B�y �~"7'<� # �  ��VNl��. c;#@"TB-9 28.181��(h48H�4X9B-Y�x  �B !�T0�< K�h`"i4 &)n�t=4� # �  �CNr\q�imatable8hihe2�]��2�?�?�?�N� -$�NFz-$�NFz-$�NF& �( X]:&C1*�( 7 H/(" �8av2n 0 _ "VK OG'  NB^l�D"!�,      4  + G  B d(]1KQ"#8-�X )9:M$n  ? _ "VK O"g'  NBS 4�T"# E"�Y0$);5( JP(�m��G%(� & �( X]:&C1*�( 7 H/(" �8av2n 0 _ "VK OG'  NB^l�D"!d4��a�a�0v3�N�1 �e�~�w3�N�q  }�^�0v3�N�1 number2�x��presence5 �R �  �a �"�og �R �  �as< �#�view2 � � �ing4�!�a�a�+�i �,� �qE�7�,�A&j�;1�!�rE�7�n�q&$�<1(�=Md>K`�=D�+�i �,� �qE�7�,�A&on2�� 0 �y�B��B��B�5> ��m�&{�?�&{�?�&{`(�046D ^"V�t�Z{  �C'b\4�4X�MK&�1R�Q�4D�^txwz�47� "  V 9          2�5X�WMM&�!�a- �,.li1�WY �K= +�@(�046D ^"V�t�Z{  �C'b\4�4X�MK&�1R�Q cancel4�2�a�a omplete4�3�a�a s2n~�.n~(�:�"�:�"�:� *n~|��B��B�b" sg3W'$/�e @ E  "�6� W;2 �o+\�L> �AR|.B  �X)�%n  1��J�K�E 2 �j0+\�N> aR� .�{F">S`�D} �  �r\/n2H-"#5�)" sg3W'$/�e @ E  "�6� W;2 �o+\�L> �AR|. tart4�1�a�aother2����{�_�_�@���1�@tfu7l licipate3�'�_�_�ly2����p�a�a �P�' X��{�Q,�b�]h Y�k�@� `�[ �p�k �P�' X�thing6 '�f9 '�pi2 o~ o~o~�[�a�a��|�R�/�  �7 <a �K�d��|s2��1�6{�)){�)pear9�lies;�3y4�?�a�a�Uing5�7�a�7�aropriate8�&�g�&re3��_�_$��C�C� ��;�b �@�; ��Z'&g���s )Jl4�A) ��)�& �Rt�Q�ZW��c ��;�b �@�; ��Z'n4�7�a�a� ��ogument8�9�*�9ound8�;�< �R�@�;ray8 �i�3�*�:V �,�3 �i�3s2�o����a�a �4.�C�1�-&�}�+\�?D��\�#8&�yt�h�&Q|�SG& -(�~�+\7�JF�� �(C_1 �F>�ss �-�d.�I �5 �4.�C�1�-&�}�+\�?D��\�#8pect<�Tsociated;�ync9� t3�7��D��D��w.�V �'> --���&�wtr2 P� P�P��P�a�aeffect2 O� O�O��P�a�aibutes6�>�n�o��>�nx8�s�t�sy8�u�v�uuto7 P#! �e  �f   P#! �e  matically4�&I�I�I�[�p b� �Q�r c�S��B�?�^�[�p b�vailable4�%�D�x�UN ��$�f<f\0 �( '�D  B#,-a   ""�VȀ����0j�j#= �o� 0directly3�[�_�_� ��~� �X�"s �Y�"� �)� ��~� �X�"sable5�� �&�g�� �&d; �Icord2��6�;ver2�0� �0rete3��_�_play8 �] �]�O �]t6�T �Tance9�Wort<�i*�\ion<�n0�_ribution3�l�_�_v5�J�(*&&�*7�$09 (S~�8�D_>$�F90�X � ($T~�8�_='�F�g�xKA:@� &,AN<`(.�X�M] Z50 � e2�J�(*&&�*7�$09 (S~�8�D_>$�F90�Xe5�|�X�T�|�X�Ting5�`�8�`�8o8 ��T �G�V ��1 ��Tcs3��A�A � q�L�P� % �(��H� � q�Lument6�|� ation5 � ��^ � ��^es<�}�4"n7��}� �m3�f�_�_� Y�s�"1�"�i2�_"�k�{� Y�s�"1�"�in6�O�h � �|�Y&�Ot<�uble9�ts9�cwn2�~���7 �L �Q�?��x ubp" �x�?�rag5�(�,�9�|&� 6>E n�(�,�9 constraints;�p! directionlock; �}elastic;�Ugable;� �zed;�ying;�Dmomentum;�` transition;�gwbacks< � ing6.�b �#.ops9�=ts7� � uration3��0�1�0�1�0�O � "'�d�Ry�!�[b� �0&8!^kE #�(�oA/�-/{( �S�9�#�S �%=�O � "'�d�Ry�!�[ s9 �?�ing4��a�a��l � �vcuqx74mh8wmjkmhiom2yli42 �0 �I �Nx2 v� v� v�ynamic8���ally6� �e8�/ �;�0�z� �/ach5� �x�`�7.�!@�:C6�S�A(�X7.�OB !�e��S� �x�`�7.�!@se30�E�^#R�^#R�^# �A�d�8�?�;D�%�? �A�dd3� �[�[progress3�q�_�_in3(�F6�6�6 �c(out3� �_�_ �9�.out3��P�P�e�v�p(�&�eier9 �n�Mst<�1ly6�l�G��l�Gng2 ��P �e /,J    )& /,J    )& /,J    ) ��8�K�8z � �8�Ks3�~y5�5 �_�O�5 �_dit9�;ing2�%�>�Cor6 ��k�R ��k�Rs5� �ffect2Q{Q{,Q{�D�Z�Z�'s4)��a�a �l �ither2�y���\�_�_�o�o�{�<� �F ^�<[�o� lasticity;�Nement4�C�a�a �!�K�}/�! �#�Z2���):xI�j0.�o1�y"#8-(�w)M:M 3�C��?)�*(BBx.$,�ej7�W�X� �;%".@� �!�K�}/�! �#�Z2���)s4�C�a�a �D �l �[h �W�~�M$ rw1Z��14�,$�" � V!&E�8(�Ci`J�*}E �D �l �[h �W�~�M$lipse9��Ymil3�R�_�_ulated;�5n3��A�A�? �B8��N �&��F�? �B8�d3�T�_�_�n�N�NK�-� "�j#� > �tKed;�qing;�Xs4� �a�a��c�a�o�P�gine5 %� �4�O�P %� �4�Ohance5�~ �~d8�&�'�&sure< �Hter3�1�_�_�Q�R�f �hB �)B�6 �Q�R�f �hBed=�s5 �V� �k�� ��Y%"PU �V� �k�� irely5�� �*�k�� �*quals; �_sm6�< �<pecially8�:�;�:tc4�|�a�a �E� �8 �� �E� �ven8pqply3��_�_�Mt5�� !�)�dY��s2 $� $�$���_�_�E�L�- s�'K�Q�E�Lr2�e��y7�/� �'�� �/� xample6�z�a���z�a�s2.��<�O�O��f1 !$ �-'#M- O& OY  �& !2&jP!- "�*+  =<M�:�M= .@ Q D1>,K *2 �S�S �  � � ��mPW�:��3���� )� -%3Code Example 3vuescroll<script setup> import { ref } from "vue" const scrollRef = ref(null) </script> <template> <div ref="scrollRef" :style="{ overflow: 'scroll' }"> <motion.div :initial="{ opacity: 0 }" :whileInView="{ opacity: 1 }" :inViewOptions="{ root: scrollRef }" /> </div> </template>["vue","scroll"]intermediate2025-08-29 11:54:08�$� )�C%3Code Example 2vuescroll<motion.div initial="hidden" whileInView="visible" :inViewOptions="{ once: true }" />["vue"]intermediate2025-08-29 11:54:08�� )�!%3Code Example 1vuescroll<motion.div :initial="{ opacity: 0 }" :whileInView="{ opacity: 1 }" />["vue"]intermediate2025-08-29 11:54:08�_� +�%-%3Code Example 18vuelayout<motion.div layout :style="{ borderRadius: '10px', padding: '5px' }"> <motion.div layout "style="{ borderRadius: '5px' }" /> </motion.div>["vue","layout"]intermediate2025-08-29 11:54:08� � +{-%3Code Example 17vuelayout<motion.div layout :style="{ borderRadius: '20px' }" />["vue","layout"]intermediate2025-08-29 11:54:08�� +�-3Code Example 16vuelayout<motion.section layout> <motion.img layout /> </motion.section>["vue","layout"]beginner2025-08-29 11:54:08�� +s-%3Code Example 15vuelayout<motion.div layout :style="{ borderRadius: 20 }" />["vue","layout"]intermediate2025-08-29 11:54:08�u� +�Y-3Code Example 14vuelayout<script setup> import { LayoutGroup } from "motion-v" </script> <template> <LayoutGroup> <Accordion /> <Accordion /> </LayoutGroup> </template>["vue","layout"]beginner2025-08-29 11:54:08��~ +�-%3Code Example 12vuelayout<script setup> const open = ref(false) </script> <template> <motion.div layout :style="{ height: isOpen ? "100px" : "500px" }" @click="() => open=!open" /> </template>["vue","layout"]intermediate2025-08-29 11:54:08� �} +}-%3Code Example 11vuelayout<motion.div layoutRoot :style="{ position: 'fixed' }" />["vue","layout"]intermediate2025-08-29 11:54:08��| +�?%3Code Example 10vuelayout<motion.div layoutScroll :style="{ overflow: 'scroll' }" />["vue","scroll","layout"]intermediate2025-08-29 11:54:08��{ )�=W%3Code Example 9vuelayout<motion.button layoutId="modal" @click="() => isOn=true" // This transition will be used when the modal closes :transition="{ type: 'spring' }" > Open </motion.button> <AnimatePresence> <motion.dialog v-if="isOn" layoutId="modal" // This transition will be used when the modal opens :transition="{ duration: 0.3 }" /> </AnimatePresence>["vue","animation","spring","layout"]intermediate2025-08-29 11:54:08�h�z )�!E%3Code Example 8vuelayout<motion.div layout :animate="{ opacity: 0.5 }" :transition="{ default: { ease: 'linear' }, layout: { duration: 0.3 } }" />["vue","animation","layout"]intermediate2025-08-29 11:54:08��y )wE%3Code Example 7vuelayout<motion.div layout :transition="{ duration: 0.3 }" />["vue","animation","layout"]intermediate2025-08-29 11:54:08�.�x )�5E3Code Example 6vuelayout<AnimatePresence> <motion.div v-if="isOpen" layoutId="modal" /> </AnimatePresence>["vue","animation","layout"]beginner2025-08-29 11:54:08��w )w-3Code Example 5vuelayout<motion.div v-if="isSelected" layoutId="underline" />["vue","layout"]beginner2025-08-29 11:54:08��v )�-%3Code Example 4vuelayout<motion.div layout :style="{ width: isOpen ? '80vw' : 0 }" />["vue","layout"]intermediate2025-08-29 11:54:08j�u )G-3Code Example 3vuelayout<motion.li layoutId="item" />["vue","layout"]beginner2025-08-29 11:54:08�)�t )�;-%3Code Example 2vuelayout<motion.div layout :style="{ justifyContent: isOn ? 'flex-start' : 'flex-end' }" />["vue","layout"]intermediate2025-08-29 11:54:08 � version~ {isOpen && <motion.div layoutId\="modal" />} </AnimatePresence\> ``` ### Setting a transition Layout animations can be customised using [the](./react-transitions) `[transition](./react-transitions)` [prop](./react-transitions). ``` <motion.div layout transition\={{ duration: 0.3 }} /> ``` If you want to set a transition specifically for **only** the layout animation, you can specify a specific `layout` transition. ``` <motion.div layout animate\={{ opacity: 0.5 }} transition\={{ default: { ease: "linear" }, layout: { duration: 0.3 } }} /> ``` When performing a shared layout animation, the transition defined for element we're animating **to** will be used. ``` <\> <motion.button layoutId\="modal" onClick\={() \=> setIsOpen(true)} // This transition will be used when the modal closes transition\={{ type: "spring" }} \> Open </motion.button\> <AnimatePresence\> {isOn && ( <motion.dialog layoutId\="modal" // This transition will be used when the modal opens transition\={{ duration: 0.3 }} /> )} </AnimatePresence\> </\> ``` ### Animating within scrollable element To correctly animate layout within scrollable elements, we need to provide them the `layoutScroll` prop. ``` <motion.div layoutScroll style\={{ overflow: "scroll" }} /> ``` This lets Motion account for the element's scroll offset when measuring children. ### Animating within fixed containers To correctly animate layout within fixed elements, we need to provide them the `layoutRoot` prop. ``` <motion.div layoutRoot style\={{ position: "fixed" }} /> ``` This lets Motion account for the page's scroll offset when measuring children. ### Group layout animations Layout animations are triggered when a component re-renders and its layout has changed. ``` function Accordion() { const \[isOpen, setOpen\] = useState(false) return ( <motion.div layout style\={{ height: isOpen ? "100px" : "500px" }} onClick\={() \=> setOpen(!isOpen)} /> ) } ``` But what happens when we have two or more components that don't re-render at the same time, but **do** affect each other's layout? ``` function List() { return ( <\> <Accordion /> <Accordion /> </\> ) } ``` When one re-renders, for performance reasons the other won't be able to detect changes to its layout. We can synchronise layout changes across multiple components by wrapping them in the `[LayoutGroup component](./react-layout-group)`. ``` import { LayoutGroup } from "motion/react" function List() { return ( <LayoutGroup\> <Accordion /> <Accordion /> </LayoutGroup\> ) } ``` When layout changes are detected in any grouped `motion` component, layout animations will trigger across all of them. ### Scale correction All layout animations are performed using the `transform` style, resulting in smooth framerates. Animating layout using transforms can sometimes visually distort children. To correct this distortion, the first child elements of the element can also be given `layout` property. Open this sandbox and try removing `layout` from the pink dot to see the difference this will make: Transforms can also distort `boxShadow` and `borderRadius`. The `motion` component will automatically correct this distortion on both props, as long as they're set as motion values. If you're not animating these values, the easiest way to do this is to set them via `style`. ``` <motion.div layout style\={{ borderRadius: 20 }} /> ``` Troubleshooting --------------- ### The component isn't animating Ensure the component is **not** set to `display: inline`, as browsers don't apply `transform` to these elements. Ensure the component is re-rendering when you expect the layout animation to start. ### Animations don't work during window resize Layout animations are blocked during window resize to improve performance and to prevent unnecessary animations. ### SVG layout animations are broken SVG components aren't currently supported with layout ani �� � � %  � , p��h�Z���7�� � )!�[I%3Code Example 4reactanimations// Motion component <motion.li animate={{ x: 0, opacity: 1, transition: { default: { type: "spring" }, opacity: { ease: "linear" } } }} /> // animate() function animate("li", { x: 0, opacity: 1 }, { default: { type: "spring" }, opacity: { ease: "linear" } })["react","animation","spring"]intermediate2025-08-29 11:54:09�<� )!�7K%3Code Example 3reactanimations<motion.div whileHover={{ scale: 1.1, transition: { duration: 0.2 } }} />["react","animation","gesture"]intermediate2025-08-29 11:54:09�o� )!�17%3Code Example 2reactanimations// Motion component <motion.div animate={{ x: 100 }} transition={transition} /> // animate() function animate(".box", { x: 100 }, transition)["react","animation"]intermediate2025-08-29 11:54:09�:� )!�3K%3Code Example 1reactanimationsconst transition = { duration: 0.8, delay: 0.5, ease: [0, 0.71, 0.2, 1.01], }["react","animation","stagger"]intermediate2025-08-29 11:54:09�.� +!�573Code Example 13reactanimations<motion.path d="M 0,0 l 0,10 l 10,10" animate={{ d: "M 0,0 l 10,0 l 10,10" }} />["react","animation"]beginner2025-08-29 11:54:08�1� +!�37%3Code Example 12reactanimations<motion.path d={d} initial={{ pathLength: 0 }} animate={{ pathLength: 1 }} />["react","animation"]intermediate2025-08-29 11:54:08�B� +!�u3Code Example 11reactanimationsconst cx = useMotionValue(100) const opacity = useMotionValue(1) return <motion.rect cx={cx} style={{ opacity }} />["react"]beginner2025-08-29 11:54:08�� +!q7%3Code Example 10reactanimations<motion.rect attrX={0} animate={{ attrX: 100 }} />["react","animation"]intermediate2025-08-29 11:54:08� )!S7%3Code Example 9reactanimations<motion.div animate={{ x: 100 }} />["react","animation"]intermediate2025-08-29 11:54:08�� )!� %3Code Example 8reactanimations<motion.rect style={{ rotate: 90, transformBox: "view-box" }} />["react"]intermediate2025-08-29 11:54:08v� )!Y%3Code Example 7reactanimations<motion.rect style={{ rotate: 90 }} />["react"]intermediate2025-08-29 11:54:08u� )!W%3Code Example 6reactanimations<motion.div style={{ rotate: 90 }} />["react"]intermediate2025-08-29 11:54:08�8� )!�K73Code Example 5reactanimations<motion.svg viewBox="0 0 200 200" animate={{ viewBox: "-100 -100 300 300" }} // Zoom out />["react","animation"]beginner2025-08-29 11:54:08�>� )!�W73Code Example 4reactanimations<motion.svg viewBox="0 0 200 200" animate={{ viewBox: "100 0 200 200" }} // 100px to the right />["react","animation"]beginner2025-08-29 11:54:08� � )!o7%3Code Example 3reactanimations<motion.circle cx={0} animate={{ cx: 50 }} />["react","animation"]intermediate2025-08-29 11:54:08�"� )!�73Code Example 2reactanimations<motion.circle style={{ fill: "#00f" }} animate={{ fill: "#f00" }} />["react","animation"]beginner2025-08-29 11:54:08z� )!i3Code Example 1reactanimations<motion.svg> <motion.circle /> </motion.svg>["react"]beginner2025-08-29 11:54:08�� )�-%3Code Example 6vuescroll<script setup> const backgroundColor = useTransform( scrollYProgress, [0, 0.5, 1], ["#f00", "#0f0", "#00f"] ) </script> <template> <motion.div :style="{ backgroundColor }" /> </template>["vue","scroll"]intermediate2025-08-29 11:54:08�9� )�Q?3Code Example 5vuescroll<script setup> const { scrollYProgress } = useScroll(); const scaleX = useSpring(scrollYProgress, { stiffness: 100, damping: 30, restDelta: 0.001 }) </script> <template> <motion.div :style="{ scaleX }" /> </template>["vue","scroll","spring"]advanced2025-08-29 11:54:08�� )�m-%3Code Example 4vuescroll<script> import { useScroll } from "motion-v" const { scrollYProgress } = useScroll(); </script> <template> <motion.div :style="{ scaleX: scrollYProgress }" /> </template>["vue","scroll"]intermediate2025-08-29 11:54:08�Group\> ) } ``` When layout changes are detected in any grouped `motion` component, layout animations will trigger across all of them. ### Scale correction All layout animations are performed using the `transform` style, resulting in smooth framerates. Animating layout using transforms can sometimes visually distort children. To correct this distortion, the first child elements of the element can also be given `layout` property. Open this sandbox and try removing `layout` from the pink dot to see the difference this will make: Transforms can also distort `boxShadow` and `borderRadius`. The `motion` component will automatically correct this distortion on both props, as long as they're set as motion values. If you're not animating these values, the easiest way to do this is to set them via `style`. ``` <motion.div layout style\={{ borderRadius: 20 }} /> ``` Troubleshooting --------------- ### The component isn't animating Ensure the component is **not** set to `display: inline`, as browsers don't apply `transform` to these elements. Ensure the component is re-rendering when you expect the layout animation to start. ### Animations don't work during window resize Layout animations are blocked during window resize to improve performance and to prevent unnecessary animations. ### SVG layout animations are broken SVG components aren't currently supported with layout animations. SVGs don't have layout systems so it's recommended to directly animate their attributes like `cx` etc. ### The content stretches undesirably This is a natural side-effect of animating `width` and `height` with `scale`. Often, this can be fixed by providing these elements a `layout` animation and they'll be scale-corrected. ``` <motion.section layout\> <motion.img layout /> </motion.section\> ``` Some elements, like images or text that are changing between different aspect ratios, might be better animated with `layout="position"`. ### Border radius or box shadows are behaving strangely Animating `scale` is performant but can distort some styles like `border-radius` and `box-shadow`. Motion automatically corrects for scale distortion on these properties, but they must be set on the element via `style`. ``` <motion.div layout style\={{ borderRadius: 20 }} /> ``` ### Border looks stretched during animation Elements with a `border` may look stretched during the animation. This is for two reasons: 1. Because changing `border` triggers layout recalculations, it defeats the performance benefits of animating via `transform`. You might as well animate `width` and `height` classically. 2. `border` can't render smaller than `1px`, which limits the degree of scale correction that Motion can perform on this style. A work around is to replace `border` with a parent element with padding that acts as a `border`. ``` <motion.div layout style\={{ borderRadius: 10, padding: 5 }}\> <motion.div layout style\={{ borderRadius: 5 }} /> </motion.div\> ``` Technical reading ----------------- Interested in the technical details behind layout animations? Nanda does an incredible job of [explaining the challenges](https://www.nan.fyi/magic-motion) of animating layout with transforms using interactive examples. Matt, creator of Motion, did a [talk at Vercel conference](https://www.youtube.com/watch?v=5-JIu0u42Jc&ab_channel=Vercel) about the implementation details that is largely up to date. Differences with the View Transitions API ----------------------------------------- More browsers are starting to support the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API), which is similar to Motion's layout animations. ### Benefits of View Transitions API The main two benefits of View Transitions is that **it's included in browsers** and **features a unique rendering system**. #### Filesize Because the View Transitions API is already included in browsers, it's cheap to implement very simple crossfade animations. However, the CSS complexity can scale quite quickly. Motion's layout animati ==�8Kg-�S�u�W �33https://motion.dev/docs/vue-scroll-animationsScroll animationvuescrollCreate scroll-triggered or scroll-linked animations with Motion for Vue. Use whileInView for viewport triggers and useScroll to link animations to scroll progress.There are two types of scroll animations: * **Scroll-triggered:** A normal animation is triggered when an element enters the viewport. * **Scroll-linked:** Values are linked directly to scroll progress. Motion is capable of both types of animation. Scroll-triggered animations --------------------------- Scroll-triggered animations are just normal animations that fire when an element enters or leaves the viewport. Motion offers [the](./vue-motion-component#whileinview) `[whileInView](./vue-motion-component#whileinview)` [prop](./vue-motion-component#whileinview) to set an animation target or variant when the element enters the view. ``` <motion.div :initial\="{ opacity: 0 }" :whileInView\="{ opacity: 1 }" /> ``` ### One-time animations With [the](./vue-motion-component#inviewoptions) `[inViewOptions](./vue-motion-component#inviewoptions)` [](./vue-motion-component#inviewoptions), it's possible to set `once: true` so once an element has entered the viewport, it won't animate back out. ``` <motion.div initial\="hidden" whileInView\="visible" :inViewOptions\="{ once: true }" /> ``` ### Changing scroll container By default, the element will be considered within the viewport when it enters/leaves the **window**. This can be changed by providing the `ref` of another scrollable element. ``` <script setup\> import { ref } from "vue" const scrollRef = ref(null) </script\> <template\> <div ref\="scrollRef" :style\="{ overflow: 'scroll' }"\> <motion.div :initial\="{ opacity: 0 }" :whileInView\="{ opacity: 1 }" :inViewOptions\="{ root: scrollRef }" /> </div\> </template\> ``` For more configuration options, checkout [the](._  �4e � � W 1 � ��u� +�i3Code Example 11jsreferenceimport { motionValue, frame } from "motion" const color = motionValue("#fff") color.on("change", latest => { frame.render(() => element.style.backgroundColor = latest) })["js"]beginner2025-08-29 11:54:12�� +m13Code Example 10jsreferenceanimate(x, 100) x.jump(10) x.getVelocity() // 0["js","animation"]beginner2025-08-29 11:54:12�"� )�-13Code Example 8jsreferenceconst x = motionValue(0) const opacity = motionValue(1) styleEffect("li", { x, opacity }) x.set(100) // Will apply to all <li> elements on the next frame animate(opacity, 0) // Will animate all <li> opacity["js","animation"]beginner2025-08-29 11:54:12�� )� 3Code Example 3jsreferenceimport { motionValue } from "motion" const x = motionValue(0)["js"]beginner2025-08-29 11:54:12�T� )�13Code Example 2jsreferenceconst color = motionValue("#f00") animate(color, "#0f0") animate(color, "#333") // Will automatically end the existing animation["js","animation"]beginner2025-08-29 11:54:12�*� )�=13Code Example 1jsreferenceconst x = motionValue(0) x.on("change", latest => console.log(latest)) animate(x, 100)["js","animation"]beginner2025-08-29 11:54:12�K� )�3Code Example 9jsreferenceimport { mirrorEasing } from "motion" const powerIn = (progress) => progress * progress const powerInOut = mirrorEasing(powerInOut)["js"]beginner2025-08-29 11:54:12�H� )�3Code Example 8jsreferenceimport { reverseEasing } from "motion" const powerIn = (progress) => progress * progress const powerOut = reverseEasing(powerIn)["js"]beginner2025-08-29 11:54:12 __��eK!�m��� �33https://motion.dev/docs/animateanimatejsanimationsExplore Motion's powerful animate() function for creating and controlling animations. Animate HTML, SVG, CSS variables, and SVG paths with mini (2.3kb) or hybrid (18kb) versions. Utilize tween, spring, or inertia animations, build complex sequences, and take advantage of comprehensive playback controls.[ JS -- ](./quick-start)[ React ----- ](./react)[ Vue ](./vue)[ Tools ](./tools-quick-start) [ ### Get started ](./quick-start)[ ### Examples ](https://examples.motion.dev/js) ### Animation * [animate](./animate) * [scroll](./scroll) * [animateView](./animate-view) Preview * [Easing](./easing-functions) ### Gestures & Events * [hover](./hover) * [inView](./inview) * [press](./press) * [resize](./resize) ### Utils * [delay](./delay) * [frame](./frame) * [mix](./mix) * [splitText](./split-text) Motion+ * [spring](./spring) * [stagger](./stagger) * [transform](./transform) * [wrap](./wrap) ### Motion values * [motionValue](./motion-value) * [mapValue](./map-value) * [transformValue](./transform-value) * [springValue](./spring-value) ### Renderers * [attrEffect](./attr-effect) * [propEffect](./prop-effect) * [styleEffect](./style-effect) * [svgEffect](./svg-effect) ### Integrations * [CSS](./css) * [Squarespace](./squarespace) * [Webflow](./webflow) * [WordPress](./wordpress) ### Guides * [FAQs](./faqs) * [Feature comparison](./feature-comparison) * [Improvements to Web Animations API](./improvements-to-the-web-animations-api-dx) * [GSAP migration](./migrate-from-gsap-to-motion) * [Performance](./performance) * [Upgrade guide](./upgrade-guide) [ JS -- ](./quick-start)[ React ----- ](./react)[ Vue ](./vue)[ Tools ](./tools-quick-start) [ ### Get started ](./quick-start)[ ### Examples ](https://examples.motion.dev/js) ### Animation * [animate](./animate) * [scroll](./scroll)�� ``` <motion.div layoutScroll style\={{ overflow: "scroll" }} /> ``` This lets Motion account for the element's scroll offset when measuring children. ### Animating within fixed containers To correctly animate layout within fixed elements, we need to provide them the `layoutRoot` prop. ``` <motion.div layoutRoot style\={{ position: "fixed" }} /> ``` This lets Motion account for the page's scroll offset when measuring children. ### Group layout animations Layout animations are triggered when a component re-renders and its layout has changed. ``` function Accordion() { const \[isOpen, setOpen\] = useState(false) return ( <motion.div layout style\={{ height: isOpen ? "100px" : "500px" }} onClick\={() \=> setOpen(!isOpen)} /> ) } ``` But what happens when we have two or more components that don't re-render at the same time, but **do** affect each other's layout? ``` function List() { return ( <\> <Accordion /> <Accordion /> </\> ) } ``` When one re-renders, for performance reasons the other won't be able to detect changes to its layout. We can synchronise layout changes across multiple components by wrapping them in the `[LayoutGroup component](./react-layout-group)`. ``` import { LayoutGroup } from "motion/react" function List() { return ( <LayoutGroup\> <Accordion /> <Accordion /> </LayoutGroup\> ) } ``` When layout changes are detected in any grouped `motion` component, layout animations will trigger across all of them. ### Scale correction All layout animations are performed using the `transform` style, resulting in smooth framerates. Animating layout using transforms can sometimes visually distort children. To correct this distortion, the first child elements of the element can also be given `layout` property. Open this sandbox and try removing `layout` from the pink dot to see the difference this will make: Transforms can also distort `boxShadow` and `borderRadius`. The `motion` component will automatically correct this distortion on both props, as long as they're set as motion values. If you're not animating these values, the easiest way to do this is to set them via `style`. ``` <motion.div layout style\={{ borderRadius: 20 }} /> ``` Troubleshooting --------------- ### The component isn't animating Ensure the component is **not** set to `display: inline`, as browsers don't apply `transform` to these elements. Ensure the component is re-rendering when you expect the layout animation to start. ### Animations don't work during window resize Layout animations are blocked during window resize to improve performance and to prevent unnecessary animations. ### SVG layout animations are broken SVG components aren't currently supported with layout animations. SVGs don't have layout systems so it's recommended to directly animate their attributes like `cx` etc. ### The content stretches undesirably This is a natural side-effect of animating `width` and `height` with `scale`. Often, this can be fixed by providing these elements a `layout` animation and they'll be scale-corrected. ``` <motion.section layout\> <motion.img layout /> </motion.section\> ``` Some elements, like images or text that are changing between different aspect ratios, might be better animated with `layout="position"`. ### Border radius or box shadows are behaving strangely Animating `scale` is performant but can distort some styles like `border-radius` and `box-shadow`. Motion automatically corrects for scale distortion on these properties, but they must be set on the element via `style`. ``` <motion.div layout style\={{ borderRadius: 20 }} /> ``` ### Border looks stretched during animation Elements with a `border` may look stretched during the animation. This is for two reasons: 1. Because changing `border` triggers layout recalculations, it defeats the performance benefits of animating via `transform`. You might as well animate `width` and `height` classically. 2. `border` can't render smaller than `1px`, which limits �/react-typewriter) ### Motion values * [Overview](./react-motion-value) * [useMotionTemplate](./react-use-motion-template) * [useMotionValueEvent](./react-use-motion-value-event) * [useScroll](./react-use-scroll) * [useSpring](./react-use-spring) * [useTime](./react-use-time) * [useTransform](./react-use-transform) * [useVelocity](./react-use-velocity) ### Hooks * [useAnimate](./react-use-animate) * [useAnimationFrame](./react-use-animation-frame) * [useDragControls](./react-use-drag-controls) * [useInView](./react-use-in-view) * [usePageInView](./react-use-page-in-view) * [useReducedMotion](./react-use-reduced-motion) ### Integrations * [Framer](./framer) * [Figma](./figma) * [Base UI](./base-ui) * [Radix](./radix) ### Guides * [Upgrade guide](./react-upgrade-guide) * [Accessibility](./react-accessibility) * [Reduce bundle size](./react-reduce-bundle-size) Animate an element's size and position with the `layout` prop, and animate between any two elements with `layoutId`. ``` <motion.div layout /> ``` Animating layout is traditionally slow, but Motion performs all layout animations using the CSS `transform` property for the highest possible performance. Layout animation can animate previously unanimatable CSS values, like switching `justify-content` between `flex-start` and `flex-end`. ``` <motion.div layout style\={{ justifyContent: isOn ? "flex-start" : "flex-end" }} /> ``` Or by using the `layoutId` prop, it's possible to match two elements and animate between them for some truly advanced animations. ``` <motion.li layoutId\="item" /> ``` It can handle anything from microinteractions to full page transitions. Usage ----- Any layout change that happens as a result of a React re-render can be animated. ``` <motion.div layout style\={{ width: isOpen ? "80vw" : 0 }} /> ``` Note that CSS changes should happen immediately via `style`, not `animate`, as `layout` will take care of the animation. Layout changes can be anything, changing `width`/`height`, number of grid columns, reordering a list, or adding/removing new items: ### Shared layout animations When a new component is added that has a `layoutId` prop that matches an existing component, it will automatically animate out from the old component. ``` isSelected && <motion.div layoutId\="underline" /> ``` If the old component is still mounted when the new component enters, they will automatically crossfade from the old to the new. When removing an element to animate back to its origin layout, `[AnimatePresence](./react-animate-presence)` can be used to keep it in the DOM until its exit animation has finished. ``` <AnimatePresence\> {isOpen && <motion.div layoutId\="modal" />} </AnimatePresence\> ``` ### Setting a transition Layout animations can be customised using [the](./react-transitions) `[transition](./react-transitions)` [prop](./react-transitions). ``` <motion.div layout transition\={{ duration: 0.3 }} /> ``` If you want to set a transition specifically for **only** the layout animation, you can specify a specific `layout` transition. ``` <motion.div layout animate\={{ opacity: 0.5 }} transition\={{ default: { ease: "linear" }, layout: { duration: 0.3 } }} /> ``` When performing a shared layout animation, the transition defined for element we're animating **to** will be used. ``` <\> <motion.button layoutId\="modal" onClick\={() \=> setIsOpen(true)} // This transition will be used when the modal closes transition\={{ type: "spring" }} \> Open </motion.button\> <AnimatePresence\> {isOn && ( <motion.dialog layoutId\="modal" // This transition will be used when the modal opens transition\={{ duration: 0.3 }} /> )} </AnimatePresence\> </\> ``` ### Animating within scrollable element To correctly animate layout within scrollable elements, we need to provide them the `layoutScroll` prop. ))��/'g-�I��i �Q33https://motion.dev/docs/vue-layout-animationsLayout animationvuelayoutAnimate layouts effortlessly in Vue with Motion's layout prop. Smoothly transition CSS, even between different elements using layoutId. Performant & flexible.[ JS -- ](./quick-start)[ React ----- ](./react)[ Vue ](./vue)[ Tools ](./tools-quick-start) [ ### Examples ](https://examples.motion.dev/vue)[ ### Get started ](./vue) ### Animation * [Overview](./vue-animation) * [Gesture](./vue-gestures) * [Layout](./vue-layout-animations) * [Scroll](./vue-scroll-animations) * [Transition options](./vue-transitions) ### Components * [motion](./vue-motion-component) * [AnimatePresence](./vue-animate-presence) * [LayoutGroup](./vue-layout-group) * [LazyMotion](./vue-lazymotion) * [MotionConfig](./vue-motion-config) * [Reorder](./vue-reorder) ### Motion+ [Learn more](../plus) * [AnimateNumber](./vue-animate-number) * [Cursor](./vue-cursor) * [Ticker](./vue-ticker) * [Typewriter](./vue-typewriter) ### Motion values * [Overview](./vue-motion-value) * [useMotionTemplate](./vue-use-motion-template) * [useMotionValueEvent](./vue-use-motion-value-event) * [useScroll](./vue-use-scroll) * [useSpring](./vue-use-spring) * [useTime](./vue-use-time) * [useTransform](./vue-use-transform) * [useVelocity](./vue-use-velocity) ### Hooks * [useAnimate](./vue-use-animate) * [useAnimationFrame](./vue-use-animation-frame) * [useDragControls](./vue-use-drag-controls) * [useInView](./vue-use-in-view) * [useReducedMotion](./vue-use-reduced-motion) ### Integrations * [Radix](./vue-radix) [ JS -- ](./quick-start)[ React ----- ](./react)[ Vue ](./vue)[ Tools ](./tools-quick-start) [ ### Examples ](https://examples.motion.dev/vue)[ ### Get started ](./vue) ### Animation * [Overview](./vue-animation) * [Gesture](./vue-gestures) * [Layout](./vue-layout-animations) * [Scroll](./vue-scroll-animations) * [Transition options](./vue-transitions) ### Components * [motion](./vue-motion-component) * [AnimatePresence](./vue-animate-presence) * [LayoutGroup](./vue-layout-group) * [LazyMotion](./vue-lazymotion) * [MotionConfig](./vue-motion-config) * [Reorder](./vue-reorder) ### Motion+ [Learn more](../plus) * [AnimateNumber](./vue-animate-number) * [Cursor](./vue-cursor) * [Ticker](./vue-ticker) * [Typewriter](./vue-typewriter) ### Motion values * [Overview](./vue-motion-value) * [useMotionTemplate](./vue-use-motion-template) * [useMotionValueEvent](./vue-use-motion-value-event) * [useScroll](./vue-use-scroll) * [useSpring](./vue-use-spring) * [useTime](./vue-use-time) * [useTransform](./vue-use-transform) * [useVelocity](./vue-use-velocity) ### Hooks * [useAnimate](./vue-use-animate) * [useAnimationFrame](./vue-use-animation-frame) * [useDragControls](./vue-use-drag-controls) * [useInView](./vue-use-in-view) * [useReducedMotion]z ""�V̀����0� 0damping(�O�,x�~�,x�~�,x���.%�q�R �T�R �T�R �!�c�cnger��y�y��z�zta$�8� � e"��x�x�9�^�^ ecelerate�w�3�3ides�}�3�3larative�B�y�y�+�m�z�z �Bfault�z0�B0�B04�y��)��,��)��,��)���B�"p=��O�"%2/��"p=��O�"%2/��"p=��O�"%2/4�2�U�+�5�K�U�+�5�K�U�+�5�4{�[{�[{�(�x�x���:�N�v-!��v-!��v-!:�d^' �w^' �w^' �o��]��]��X�^�^�7�c�c�P�NP�NPs�!����{�{�n�p�p��y�y�L�3�3�<�z�z�,� �  transition�p�/�/eats"��x�x�1�^�^ine(�:�8!��8!��8!(�a�i��6�i��6�i�"�3�:�3�:�3�:�*�T�T(�*F�Q�iF�Q�iF�Q�e�a�a���config�)�p�pd�J���"�c��c��c���/��/����i��i��W�T�T�7�x�x�)H�DH�DH�q�G�G��a�a�g�^�^ nuxtconfig�{�p�ps�K����p�ping�[�y�y��3�3�V�z�ztion(�?�_q �\�_q �\�_q s�1�3�3gree"�/�x�x�M�^�^s�0�{�{lay.�&.��Z�Z�Z��y�yP.�� �6�|�Q �6�|�Q �6�|�B�z�z �k��x�x.�.��1�^�^children�b�m�m�}�z�zta�F�3�3� �x�x�.�G�G�'�^�^scribes$�]� � igned�&���c�p�ptroy�[�`�`tailed$.� � � s"�b5�E5�E5�3�G�G�5�+5�+5ect"��x�x�:�^�^ed!�{�T�T�/�x�x�A�a�a�c�^�^s!"�y:�[�C:�[�C:�["�4:�f�E:�f�E:�frmines�`�3�3�D�G�Gv ��7�,����O�d�d��_�p�p �7(��B %� %� % ��7�(�7�8�7�w � � � � � �7eloper�b���y�{�{�O�3�3� ��D��D��-�x�x�Z � � �S�G�G�H��F��F��K�^�^ment�^� � ��{�{�a�p�pialog"�Z�x�x� �^�^d"��x�x��^�^ff#�h� � erence"�t�x�x�(�^�^ s"��x�x�:�^�^ t�-��"��^�~�^�~�^�5�4�G�4�G�4��3�3(�n�b���b���b��=� �o� �o� *�5�(� /�(� /�(� �t�� ly�;�y�y�f�z�z ���s!��T�T�?�a�aicult"�Az�z�z�_z�fz�fzrection!�T#�3#�3#�Y������#�@#�@#�n�c�c lock&�2�a�aly�p����~��~��~�9�p�p�B�"�Y�"�Y�"�w�3�3�{�"�Z�"�Z�"��x�x��)�k�)�k�)�� � �4�G�G��^�^�=�+�:�+�:�+sable�k���+�p�p��y�y� �z�zd!�I� I� I�;I�I�Icord�;����+�4�*�=�G� �7�m�]�T�c�gver�4�{�{�u��'�~�c�cplay�]�]�]�:]�]�]�9�x�x�m�^�^t�X�{�{ance�[�3�3�q� � �:�G�Gort""�S*�\�v*�\�v*�\"�*�F�r*�F�r*�Fion""�X0�_�m0�_�m0�_"� 0�I�i0�I�i0�Iv4�4�(*&&�v�(*&&�v�(*&&:�L7�$09 � 7�$09 � 7�$09 v�=~�8�D_>$�F90�X�~�8�D_>$�F90�X�~�8�D_>$�F90�X� (� (� (j�v~�8�_='�F�g�~�8�_='�F�g�~�8�_='�F�gF�bKA:@� �;KA:@� �;KA:@� p�,AN<`(.�X�M] �,AN<`(.�X�M] �,AN<`(.�X�M] @�D50 � e2�50 � e2�50 � e2�2� � F�KADA� �=KADA� �=KADA� p�@AM>b(.�Z�7] �%AM>b(.�Z�7] �%AM>b(.�Z�7] @�|15 �)6�15 �)6�15 �)6�&[�6[�6[e�f���\�{�{�v�p�ping�J���Z�p�po�p�T�'�T�'�T�i�V�&�V�&�V�o�1�I�1�I�1�<�G�G�"�2�.�2�.�2cs�q� q� q�n�p�p.�T� %�~� %�~� %���D��D��2�x�x�;�p���_ � � �X�G�G�M��F��F��P�^�^�y�c�cument��{�{��3�3(�!�5�7!�5�7!�5 ation�u���!�{�{��p�pes""�g�4"�&�4"�&�4""��4"� �4"� �4"n�5�p�p�g�T�T�v�x�x�"�a�a��^�^m"� Y�s�PY�s�PY�s�D�p�p.��"�i�U�"�i�U�"�i.�T�_"�k��_"�k��_"�k�e�x�x�;�a�a��^�^n�S�{�{�l�3�3� �L �L (�f�Y&�g�Y&�g�Y&�P �Y �Y "�L*� Ix|#  �!,',)�#q'�"!=� /f(: $++�[!M�1(*5p�er](./react-reorder) ### Motion+ [Learn more](../plus) * [AnimateNumber](./react-animate-number) * [Cursor](./cursor) * [Ticker](./react-ticker) * [Typewriter](./react-typewriter) ### Motion values * [Overview](./react-motion-value) * [useMotionTemplate](./react-use-motion-template) * [useMotionValueEvent](./react-use-motion-value-event) * [useScroll](./react-use-scroll) * [useSpring](./react-use-spring) * [useTime](./react-use-time) * [useTransform](./react-use-transform) * [useVelocity](./react-use-velocity) ### Hooks * [useAnimate](./react-use-animate) * [useAnimationFrame](./react-use-animation-frame) * [useDragControls](./react-use-drag-controls) * [useInView](./react-use-in-view) * [usePageInView](./react-use-page-in-view) * [useReducedMotion](./react-use-reduced-motion) ### Integrations * [Framer](./framer) * [Figma](./figma) * [Base UI](./base-ui) * [Radix](./radix) ### Guides * [Upgrade guide](./react-upgrade-guide) * [Accessibility](./react-accessibility) * [Reduce bundle size](./react-reduce-bundle-size) Motion for React offers a number of ways to animate your UI. Scaling from extremely simple prop-based animations, to more complex orchestration. Animate ------- You'll perform almost all animations on [a](./react-motion-component) `[<motion />](./react-motion-component)` [component](./react-motion-component). This is basically a DOM element with motion superpowers. ``` import { motion } from "motion/react" ``` For basic animations, you can update values on [the](./react-motion-component#animate) `[animate](./react-motion-component#animate)` [prop](./react-motion-component#animate): ``` <motion.div animate\={{ opacity: 1 }} /> ``` When any value in its animate prop changes, the component will automatically animate to the new target. Animatable values ----------------- Motion can animate any CSS value, even those that can't be animated by browsers, like `mask-image`. It supports: * Numbers: `0`, `100` etc. * Strings containing numbers: `"0vh"`, `"10px"` etc. * Colors: Hex, RGBA, HSLA. * Complex strings containing multiple numbers and/or colors (like `box-shadow`). * `display: "none"/"block"` and `visibility: "hidden"/"visible"`. ### Value type conversion In general, values can only be animated between two of the same type (i.e `"0px"` to `"100px"`). Colors can be freely animated between hex, RGBA and HSLA types. Additionally, `x`, `y`, `width`, `height`, `top`, `left`, `right` and `bottom` can animate between different value types. ``` <motion.div initial\={{ x: "100%" }} animate\={{ x: "calc(100vw - 50%)" }} /> ``` It's also possible to animate `width` and `height` in to/out of `"auto"`. ``` <motion.div initial\={{ height: 0 }} animate\={{ height: "auto" }} /> ``` **Note:** If additionally animating `display` in to/out of `"none"`, replace this with `visibility` `"hidden"` as elements with `display: none` can't be measured. ### Transforms Unlike CSS, Motion can animate every transform axis independently: * Translate: `x`, `y`, `z` * Scale: `scale`, `scaleX`, `scaleY` * Rotate: `rotate`, `rotateX`, `rotateY`, `rotateZ` * Skew: `skew`, `skewX`, `skewY` * Perspective: `transformPerspective` `motion` components have enhanced `style` props, allowing you to set individual transforms: ``` <motion.section style\={{ x: -20 }} /> ``` Animating transforms independently provides great flexibility, especially around gestures. ``` <motion.button whileHover\={{ scale: 1.1 }} whileTap\={{ scale: 0.9 }} /> ``` Independent transforms perform great, but Motion's hybrid engine also uniquely offers hardware acceleration by setting `transform` directly. ``` <motion.li initial\={{ transform: "translateX(-100px)" }} animate\={{ transform: "translateX(0px)" }} transition\={{ type: "spring" }} /> ``` **SVG note:** For SVG components, `�x` and `y` **attributes** can be set using `attrX` and `attrY`. ### Transform origin `transform-origin` has three shortcut values that can be set and animated individually: * `originX` * `originY` * `originZ` If set as numbers, `originX` and `Y` default to a progress value between `0` and `1`. `originZ` defaults to pixels. ``` <motion.div style\={{ originX: 0.5 }} /> ``` ### CSS variables Motion for React can animate the value of CSS variables, and also use CSS variables as animation targets. #### Animating CSS variables Sometimes it's convenient to be able to animate a CSS variable to animate many children: ``` <motion.ul initial\={{ '--rotate': '0deg' }} animate\={{ '--rotate': '360deg' }} transition\={{ duration: 2, repeat: Infinity }} \> <li style\={{ transform: 'rotate(var(--rotate))' }} /> <li style\={{ transform: 'rotate(var(--rotate))' }} /> <li style\={{ transform: 'rotate(var(--rotate))' }} /> </motion.ul\> ``` **Note:** Animating the value of a CSS variable **always triggers paint**, therefore it can be more performant to use `[MotionValue](./react-motion-value)`[s](./react-motion-value) to setup this kind of animation. ### CSS variables as animation targets HTML `motion` components accept animation targets with CSS variables: ``` <motion.li animate\={{ backgroundColor: "var(--action-bg)" }} /> ``` Transitions ----------- By default, Motion will create appropriate transitions for snappy animations based on the type of value being animated. For instance, physical properties like `x` or `scale` are animated with spring physics, whereas values like `opacity` or `color` are animated with duration-based easing curves. However, you can define your own animations via [the](./react-transitions) `[transition](./react-transitions)` [prop](./react-transitions). ``` <motion.div animate\={{ x: 100 }} transition\={{ ease: "easeOut", duration: 2 }} /> ``` Enter animations ---------------- When a `motion` component is first created, it'll automatically animate to the values in `animate` if they're different from those initially rendered, which you can either do via CSS or via [the](./react-motion-value) `[initial](./react-motion-value)` [prop.](./react-motion-value) ``` <motion.li initial\={{ opacity: 0, scale: 0 }} animate\={{ opacity: 1, scale: 1 }} /> ``` You can also disable the enter animation entirely by setting `initial={false}`. This will make the element render with the values defined in `animate`. ``` <motion.div initial\={false} animate\={{ y: 100 }} /> ``` Exit animations --------------- You can also easily animate elements as they exit the DOM. In React, when a component is removed, it's usually removed instantly. Motion provides [the](./react-animate-presence) `[AnimatePresence](./react-animate-presence)` [component](./react-animate-presence) which keeps elements in the DOM while they perform an `exit` animation. ``` <AnimatePresence\> {isVisible && ( <motion.div key\="modal" initial\={{ opacity: 0 }} animate\={{ opacity: 1 }} exit\={{ opacity: 0 }} /> )} </AnimatePresence\> ``` Keyframes --------- Values in `animate` can be set as a series of keyframes. This will animate through each value in sequence. ``` <motion.div animate\={{ x: \[0, 100, 0\] }} /> ``` We can use a value's current state as the initial keyframe by setting it to `null`. ``` <motion.div animate\={{ x: \[null, 100, 0\] }} /> ``` This way, if a keyframe animation is interrupting another animation, the transition will feel more natural. By default, each keyframe is spaced naturally throughout the animation. You can override this by setting [the](./react-transitions#times) `[times](./react-transitions#times)` [option](./react-transitions#times) via `transition`. `times` is an array of progress values between `0` and `1`, defining where in the animation each keyframe should be positioned. ``` <motion.circle cx\={500} animate\={{ cx: \[null, 100, 200\], transition: { duration: 3, times: \[0, 0.2, 1\] } }} /> ``` Gestur�e animations ------------------ Motion for React has shortcut props for animating to/from a target when a gesture starts/ends. ``` <motion.button initial\={{ opacity: 0 }} whileHover\={{ backgroundColor: "rgba(220, 220, 220, 1)" }} whileTap\={{ backgroundColor: "rgba(255, 255, 255, 1)" }} whileInView\={{ opacity: 1 }} /> ``` It supports `hover`, `tap`, `drag`, `focus` and `inView`. Variants -------- Setting `animate` as a target is useful for simple, single-element animations. But sometimes we want to orchestrate animations that propagate throughout the DOM. We can do so with variants. Variants are a set of named targets. ``` const variants = { visible: { opacity: 1 }, hidden: { opacity: 0 }, } ``` They're passed to `motion` components via the `variants` prop: ``` <motion.div variants\={variants} /> ``` These variants can now be referred to by a label, wherever you can define an animation target: ``` <motion.div variants\={variants} initial\="hidden" whileInView\="visible" /> ``` You can also define multiple variants via an array: ``` animate\={\["visible", "danger"\]} ``` > _I love using variants alongside React state – just pass your state to_ `_animate_`_, and now you've got a tidy place to define all your animation targets!_ > > ``` > const \[status, setStatus\] = useState<"inactive" | "active" | "complete"\>( > "inactive" > ); > > <motion.div > animate\={status} // pass in our React state! > variants\={{ > inactive: { scale: 0.9 color: "var(--gray-500)" }, > active: { scale: 1 color: "var(--blue-500)" }, > complete: { scale: 1 color: "var(--blue-500)" } > }} > \> > <motion.svg > path\={checkmarkPath} > variants\={{ > inactive: { pathLength: 0 }, > active: { pathLength: 0 }, > complete: { pathLength: 1} > }} > /> > </motion.div\> > ``` > > ~ Sam Selikoff, [Motion for React Recipes](https://buildui.com/courses/framer-motion-recipes) ### Propagation This is already useful for reusing and combining animation targets. But it becomes powerful for orchestrating animations throughout trees. Variants will flow down through `motion` components. So in this example when the `ul` enters the viewport, all of its children with a "visible" variant will also animate in: ``` const list = { visible: { opacity: 1 }, hidden: { opacity: 0 }, } const item = { visible: { opacity: 1, x: 0 }, hidden: { opacity: 0, x: -100 }, } return ( <motion.ul initial\="hidden" whileInView\="visible" variants\={list} \> <motion.li variants\={item} /> <motion.li variants\={item} /> <motion.li variants\={item} /> </motion.ul\> ) ``` ### Orchestration By default, this children animations will start simultaneously with the parent. But with variants we gain access to new `transition` props `[when](./react-transitions#orchestration)` [and](./react-transitions#orchestration) `[delayChildren](./react-transitions#orchestration)`. ``` const list = { visible: { opacity: 1, transition: { when: "beforeChildren", delayChildren: stagger(0.3), // Stagger children by .3 seconds }, }, hidden: { opacity: 0, transition: { when: "afterChildren", }, }, } ``` ### Dynamic variants Each variant can be defined as a function that resolves when a variant is made active. ``` const variants = { hidden: { opacity: 0 }, visible: (index) \=> ({ opacity: 1, transition: { delay: index \* 0.3 } }) } ``` These functions are provided a single argument, which is passed via the `custom` prop: ``` items.map((item, index) \=> <motion.div custom\={index} variants\={variants} />) ``` This way, variants can be resolved differently for each animating element. Animation controls ------------------ Declarative animations are ideal for most UI interactions. But sometimes we need to take manual control over animation playback. The `[useAnimate](./react-use-animate)` [hook](./react-use-animate) can be used for: * Animating any HTML/SVG element (not just `motion` components). * Comple�x animation sequences. * Controlling animations with `time`, `speed`, `play()`, `pause()` and other playback controls. ``` function MyComponent() { const \[scope, animate\] = useAnimate() useEffect(() \=> { const controls = animate(\[ \[scope.current, { x: "100%" }\], \["li", { opacity: 1 }\] \]) controls.speed = 0.8 return () \=> controls.stop() }, \[\]) return ( <ul ref\={scope}\> <li /> <li /> <li /> </ul\> ) } ``` Animate content --------------- By passing [a](./react-motion-value) `[MotionValue](./react-motion-value)` as the child of a `motion` component, it will render its latest value in the HTML. ``` import { useMotionValue, motion, animate } from "motion/react" function Counter() { const count = useMotionValue(0) useEffect(() \=> { const controls = animate(count, 100, { duration: 5 }) return () \=> controls.stop() }, \[\]) return <motion.pre\>{count}</motion.pre\> } ``` This is more performant than setting React state as the `motion` component will set `innerHTML` directly. Motion for React offers a number of ways to animate your UI. Scaling from extremely simple prop-based animations, to more complex orchestration. Animate ------- You'll perform almost all animations on [a](./react-motion-component) `[<motion />](./react-motion-component)` [component](./react-motion-component). This is basically a DOM element with motion superpowers. ``` import { motion } from "motion/react" ``` For basic animations, you can update values on [the](./react-motion-component#animate) `[animate](./react-motion-component#animate)` [prop](./react-motion-component#animate): ``` <motion.div animate\={{ opacity: 1 }} /> ``` When any value in its animate prop changes, the component will automatically animate to the new target. Animatable values ----------------- Motion can animate any CSS value, even those that can't be animated by browsers, like `mask-image`. It supports: * Numbers: `0`, `100` etc. * Strings containing numbers: `"0vh"`, `"10px"` etc. * Colors: Hex, RGBA, HSLA. * Complex strings containing multiple numbers and/or colors (like `box-shadow`). * `display: "none"/"block"` and `visibility: "hidden"/"visible"`. ### Value type conversion In general, values can only be animated between two of the same type (i.e `"0px"` to `"100px"`). Colors can be freely animated between hex, RGBA and HSLA types. Additionally, `x`, `y`, `width`, `height`, `top`, `left`, `right` and `bottom` can animate between different value types. ``` <motion.div initial\={{ x: "100%" }} animate\={{ x: "calc(100vw - 50%)" }} /> ``` It's also possible to animate `width` and `height` in to/out of `"auto"`. ``` <motion.div initial\={{ height: 0 }} animate\={{ height: "auto" }} /> ``` **Note:** If additionally animating `display` in to/out of `"none"`, replace this with `visibility` `"hidden"` as elements with `display: none` can't be measured. ### Transforms Unlike CSS, Motion can animate every transform axis independently: * Translate: `x`, `y`, `z` * Scale: `scale`, `scaleX`, `scaleY` * Rotate: `rotate`, `rotateX`, `rotateY`, `rotateZ` * Skew: `skew`, `skewX`, `skewY` * Perspective: `transformPerspective` `motion` components have enhanced `style` props, allowing you to set individual transforms: ``` <motion.section style\={{ x: -20 }} /> ``` Animating transforms independently provides great flexibility, especially around gestures. ``` <motion.button whileHover\={{ scale: 1.1 }} whileTap\={{ scale: 0.9 }} /> ``` Independent transforms perform great, but Motion's hybrid engine also uniquely offers hardware acceleration by setting `transform` directly. ``` <motion.li initial\={{ transform: "translateX(-100px)" }} animate\={{ transform: "translateX(0px)" }} transition\={{ type: "spring" }} /> ``` **SVG note:** For SVG components, `x` and `y` **attributes** can be set using `attrX` and `attrY`. ### Transform origin `transform-origin` has three shor(element, startEvent) \=> { console.log("Pressed", element) console.log("At", startEvent.clientX, startEvent.clientY) }) ``` ### Press end The press start function can optionally return a function that will be called when the press gesture ends: ``` press(element, (element, startEvent) \=> { console.log("press start") return (endEvent) \=> { console.log("press end") } }) ``` The press end callback is passed a second argument, `info`. It currently has one property, `success`. If `true`, the press was successfully completed, like a click. If `false`, the press ended outside the element. ``` press(element, () \=> { return (endEvent, info) \=> { console.log("press ", info.success ? "end" : "cancel") } }) ``` When using keyboard accessibility, `success` will be `false` if the element is blurred while the enter key is held. ### Cancelling gesture `press` returns a function that, when fired, will cancel all active event handlers associated with the gesture. ``` const cancelPress = press(element, callback) cancelPress() ``` Options ------- ### `passive` **Default:** `true` If set to `false`, it'll be possible to call `event.preventDefault()` but the gesture will be less performant. [Learn more about passive events](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive). ### `once` **Default:** `false` If set to `true`, each provided element will fire their gesture only once. Motion+ examples ---------------- [Motion+](./react-use-velocity) is a one-time payment, lifetime membership that gains you access to the source code of an ever-growing library of [premium examples](https://examples.motion.dev), as well as premium components like `[Cursor](./cursor)` and `[AnimateNumber](./react-animate-number)` and functions like [splitText](./split-text). Examples featuring `press` include:[{"title":"Code Example 1","description":"","code":"press(\"button\", (element) => {\n console.log(\"press started on\", element)\n\n return () => console.log(\"press ended\")\n})","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 2","description":"","code":"press(\"button\", (element) => {\n animate(element, { scale: 0.9 })\n\n return () => animate(element, { scale: 1 })\n})","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 3","description":"","code":"import { press } from \"motion\"","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 4","description":"","code":"press(\n document.getElementById(\"my-id\"),\n () => {\n console.log(\"my-id pressed!\")\n }\n)","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 5","description":"","code":"press(\"a\", () => console.log(\"link pressed\"))","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 6","description":"","code":"press(\"div:nth-child(2)\", (element, startEvent) => {\n console.log(\"Pressed\", element)\n console.log(\"At\", startEvent.clientX, startEvent.clientY)\n})","language":"javascript","difficulty":"intermediate","tags":["js"]},{"title":"Code Example 7","description":"","code":"press(element, (element, startEvent) => {\n console.log(\"press start\")\n \n return (endEvent) => {\n console.log(\"press end\")\n }\n})","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 8","description":"","code":"press(element, () => {\n return (endEvent, info) => {\n console.log(\"press \", info.success ? \"end\" : \"cancel\")\n }\n})","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 9","description":"","code":"const cancelPress = press(element, callback)\n\ncancelPress()","language":"javascript","difficulty":"beginner","tags":["js"]}]{"props":[],"methods":[{"name":"preventDefault","signature":"preventDefault()","description":"preventDefault method"}],"types":[]}["js","gestures","press","animation","gesture","motion"]2025-08-29 11:54:102025-08-29 11:54:10 ���̀��� �* Ƀ<Q. � >&(&80viewsN �u,sibilityC �bleC�� . / F- �0� �>� 0ualB �U: �o �.�;#durationB �L �u �]NisationH�* eM� rH <�S�)zersHlyB �(�h � (�d �u(sE �*V �V�IueCb!�ZZ�2>w1�wH##<�=l|'�< > H""T!:�wG�w3cQ�`aitB� �7ntC��+�$�-�.�3�rningH�jsB��tchC��!�yB�j �|�E �2� �.�msC eC�c�. �5� �P>(E0�$ �ey�H@(F/  �! �L bB �Q�L �)��I\ U �,��/ �c�Cm~�a �@~ Ke flowN`�glBLllB�?�4�Y�1���e�ureE��mhatE�r��menB&�I�[�M!�W��]X�Ui�M�%V"�:$w[�X! (�0'c .( "3�!�*)%"QO}Z�^�@�:$w[�c! (�$)e .( #5�!�)%"MU �)�9  8�zOT� �<' �D#  eY!)reC�5�][�t6�k �j+�!asC��!�FQ��FQ�JverC�FtherQ�lichB�e�Ci��B��{ .�{�(��{�\�(�z X �G�SleC�0,�>�y8�Y, �>�8,dragD ;�  ;� focusD :� :�-hoverC �@�)82?� 82?�FinviewC �u�8=A48=A0=pressC �D�,9!)dl�MtapD9)dl�BoN�leB �S��E�F�+idthC �B�� ��Hv���H �]llB>�#���# .\+j$CW� 6 b��f4�q7�x?stL {{G$�0{�ZA�65�� 5�. �,EV' 2?vtL {�G$�0}�\A�65� �=896=�  3�% EH$/',h. 4G8�c%!� [O0>ndowE �m �'�d�%y�# �#>pesE�p�V�>thB.�d+H�`?0���@�,.4�I�/) o�)o>�1 � c:!<. �x&/;F5'�0[k d��FBP!^6)�F�:4L x � c:!d(�o&/;F5'�0[k d���M[$Zt� �E�� H �/�   �(inE� !  ��W� %���| !  ��- �[ outB�onB�2�����WrdpressNb�sB�#��}kD�  �k�h� �7�$D�GsF�L�X�N�grapN>�pingE�,�&wwE��d�l�d�xB@5i�>�C`&�1�:�DG-1>� (�@?#;�+�?�*�m �!L�S �3� �!L� $ ?!�dyB6i�w� �AT]#�t �#�${  �# � bridB�5etDouB�Z &�n�f7"#��4 �*��#�}9�R�e�E� ?�!� ��9�<�D~�5�2�R�brC  ��e�K�5ytubeE��zB��oomL �3 !  % . !=S 4�O." U1(6 .�d+�q8 (&m7 v+ ""�V̀��� �0(gG7:7S<� @A'-$ 2 ZP�>C< RO-9g %8 �2�>i:"�� _4C @� Q $-",s"3LRz  104  kM. �@^.R6 " 20tY j6,�V y.uK$ [II%)K?2F @� Q $-62s"3J =|  306  kO. �@^.R6 "2,zY T9}"�qJ�>KA<79O(d�U$I) <�"l t tK*% > &*VF�@#  �42 #K0toolB��}�sN ��CpC�D�v�A�S+�y�V�5talB��N�Q ��uchD�7�= �:�=  rackF �n �X -�t! �@edG �N�%ingG �ysG�c ditionallyEnsformB ���Lb&�8|�\�T�= �/�X|�F�T�  �.$<w boxL � perspectiveB�-�# sB4] �* �e+��a+�m �!z valueN H�itionB�_l�a� (�dp�I �d$!� $   R &�    � �"z U , �    �  `   " m�dE-(A#%�m/$1 1.&  �K< sB�$ �4(�a 2��32 l�*�  *aJP6�,`�.�  *aJP6P5 �8�lateB�� xB� �^ velD��C�eesC�tickF�dggerD �; �N �> �J�QedE�S ,�M  ingF� �7HsC�t�%�  oubleshootingE�B�>ueE�]}�i�Uy �-lyE\PyE��|ugD�K�YweenB�+[. �H] .oB�*E�%�*�@ �#  u�N ;�,��@ �% �o  �s-ypeB(��W!o�yQ"#� �9� �h"�`�*k"h�4SA#%�sB�# �>!!icallyD�=�KuiC  �F  �sC lB�0D)�v�{ �K!�(�c �O�1, nanimatableE2&derlineE�M�C�#neathE�M�3standB�p� oodM�sirablyE�!�iqueE �lH �RH�lyC�RtsB�:��"�GlessQ�gikeC�ocksN � ## necessaryE�|tilB�:�|�@�rwantedP"pE�/���4�-dateCA �zdB�RsN�RgradeN��onN�hsB�O �'��GZ S �*��- �R= �>~ Ie ageBMmx=a!rdeB��6�#�1N�j�~�-�& �KC1 �>�5pp S�5�$ �T!4�Dk/`�G�W�danimateC �_*dB�|$w�]�i�9�uc�X )8�<�ke 8�\.�,�S`omrefI � fulC �` w�inviewF�~� motionvalueC �D �neventF�yrF�l�HefD �!�8sE��xcrollF� 6!;X� 6]pringF �&  �p tateE�c�w transformF �E �ingB &�D �s�>�h#*�H�K �.� R� ��\?�L�O �� �GA �G ualL"lyB�{� �3 ��!tilizeBsN -�vC;��}��" � �?>o�O�U�YalueB4�|%-�eG`�e+ �}#3�K.Z10�IEC-�j�G *�X�$f>w�2�gwc �/ � M�$.B �Z:2N �>q+S�-$ !,[ jD{sB$���]0�G�HB*<�\�8BSh c� 4�v �|� �Kv�X�. f� (�~ �~O �W4#H�r�  A� �0 rC�[9iableC �E/ sBAt �$ VntC � | RRsC8�   :<'l�7o�B�K6 ( elocityB�R�$ �Y�y �h � �\�J�o�T�H�XrcelE � �sionB esB dticalG�K�AyE��-�e�-� hG�iaBu�V�Kp �5�^�)�Un�y�o� �/�M,�N�uq�y�z��7�7,�N #�  h� C�J�M{!deosQ7ewE(�5  </J'+% X�,(�  </J'+% X�.�$��`N<�L�boxLU CportC�*'1*�|;��Rj'I=�L�*$%& c 3�3q (0)PT! *    !  F-�P #i  -�"� FW  ~ d ""�V̀��� �0n     @0staggerchildrenC �b directionC�jedOsO� rtB4�+�g 7N! '5 �7�D ; �#�T$#&# / �+��E 9 x � W"[5delayOQedD�u�x � 3�ventP �I ingB �S@ �;� �!�sC�`� 3��(�8�(teB �| �j�  �> �g � �$ �i icB�UusN1�## ddeviationD �K �WickyE�V� �V�<ffnessB�0�,c�1(�K�)�}�M�g� �ollE�S�I�+opB��# �G �` �nq6�MJ pedB�& ropagationD � �sB�4reF �'  �)  raightforwardLngelyE�d�JengthB�n�c�4tchedE �  �u sE� �ingB �R@sBG � uckPyleB�%�( o;$BA� (.v`�IG �>�e2�!$6A�(.x`�3G �?�$)6Ru($2 V�effectN U�sB %6�m�E�S�G�c ubscriptionN �##equentO[chN�!ddenB�a�  �r�  perpowersC6 �portD�=�9�#(edB �&R��B�nsC ~�}vgB$ " n� �g�9�C�� + �~�� ) �d,$� Y�effectN X�sB�� �r �NwitchesB�W �ingE6*�  ynchroniseE�%�stemE �n�m �T�msE��wtB �i�L u��~� "�}�. �1�8~ ���&  �x�0 �1�8~ ���XabN�4gL�0iloredP%keB'��X ��c�  ��U�s�YsE�6K�ingE�S�9lkE��pD$ cH% �; �o�cancelD�ypableD�rgetB � �=h�v+IaP&!�Jg\%!:�dP�B�z�.2* �x �n�sC�6\�HBEechnicalE �r �XllF�implateC� ? �C��_0�;�#1orarilyDDGxtE�N�4 6��v�hanB �%�"�n �Q �@�!�- �Q �&�!�S��k�:tB��@�D�~�;�8s���|� $q1�B�V|Q9S?�~ 1�w Jp�X�a Jv�K�#$e1�I�A|Q9S?�~ 1�y �z;�C�u�E3�T�  <� �1W\�8�(eB�D(?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  FDH�Eb*# @ b NEj1c6XV :  2  : " >�  %M1 !>. =g4( "   #)4&,'! &*VX-�@4  " !     10y A # 5  "5/ZY :  2  / %" >�@M1 !?0 'g4( "   #)4&*' ,*x0.$J!& 3:"* �>M51Q25  3  H: D<&$!  *, b ! r��@ /##FSX %=\ 6 0  +     ,   )  irD�x����MmEY�9(y'iM�?(y)inB �{�X� �>reB �<  �� �` �z�- � �byM�lforeC�v�'�5�lseB�`qv� �<�j >�b!�.,`G�<>�F A�m!�*,JG�> �)h�l��)yC�<R'��Z�K�D�+�8�P�Q�D�+ T" ingE�R�8sE�S�9rdL�sB"�& � "Lb4W�S(.�N��jf)�LD��.�Z?:M&.�^)(�/on4�]E �(�w %L9�g  >�aZ�C& ��]�M&0 �8)(�1Yn4�]E �$�E mI) F�7,�b& �>9�$$N��" �b�E�toseC r�P�Z�@readQ\eB�i� � �|�6 �jsB�oughC �W�$v�%y�o�outB���_�D�wimeB>�k�&�9A 8�A,� �z� ��?b ��!o1� �~�*b �k�E�T�##�t �:�\constantM �^lineB� physicsB�Q��*sB� �h�# l��g�DnyQ_psEoBj��!G!I L. j !,7 =2   l( ' e!c 5" d 4#G�#�I"9 h9 �^  * �- ""�V̀��� �0F 0restspeedB �0  �) �=!ultB� �)u�z�,i�UingE�^�ZmeB �QdB�;turnC �&�t �6�  �e*1�:�e2�t �|: 6;r�~edQ�_sB�V� �!�tK+�# ����LusingC�gverseB �O � sB�htingB�gbaB� � 2�0 ightC�F �x � �{ �|� �6ootF�J�K)�<  I!marginQ�ftateB �#��v0"��5 �b�1�e�>(�C6A#%�y/$mxB�%�YQ� �USyB�&�zB7r�ionB�undM� wvalueC�6uleD�.�1sD�+�9nG�A �0BningB�wsBy�Nef�$�ZvpH�R �h+N (M�S(D� �A N�xszcN�4� �k,T 0 0�Y(E�x�A N� ty�3.�\b[ ��d�j`;   �1?:�&>amF�eB�i� �;�D-�-�Z�: ��Q�y�]�E �}�< �h��pleHg-dH � }urationH �VingH�ndboxE�~�zcaleB���-�8dO h%�g�3�S�])Q�CR h%�g�!3�O�G)Q�C � G �YxB�!��KW�MyB�"�ingCenariosHopeC��w�]reenE �o�Y�a �U�YshotE�x�^iptC�(! �8 �XS �0 � )ollB� (�J@ n,J =� v  .   !P    # ?� (�6> j1K � ��#ableE � �2 �R ^ �} �.�3 directionF�uerG �~�ingB�� �Z�0��lengthG�OrefF �7 �7 timelineGT TxF�,�.yF�.0 �0progressF�I S2�K 6eamlessNcondB�<a��J�}�$ �I�OsB ��k�`� .� �} �l�X��K�h0sB �p>tionB�{Q�1 �B�^ �(�uzurityQ�TeE���ugmentB�K3� �'sL�#lectedN�3orD�1�?�q sBwIikoffF�quenceB.�# D) *� C*-/@�[ sB%E�T �^�vriesC�QtB0�x�3 GP  c�/L_&�C�-G �:��V�W 9��&��6 M0t�A�^ [  <����  M,z� 05UIQR �. O�q$'$ AJx �)isopenE�\openE �bsB �,'crolldirectionF �vtingB��W��,i�p �_w*� �f�b�*��h�/��SsB �O �9upC��~A�9 �YY�1�F9hadowC��s�YsE�a�GpeL�G�redE �-���!�!�t�ortcutC �}�Z sG�[handsL�uldC�;�� �Q~�[�PwM �% ideE�&� milarE�P�6�r�9pleC �z �  �P�oifiesL�~ ultaneouslyC�EnO�AceF�[gleB��?? � �! �(zeEsBkewB �( �xB�*� yB�+�!iM�lidesN�?owEmallN�ZerB�D�?�,�%�QoothE�`�\edF�!�kingF��flyJ napE�5��c@pingM�yC�jshotE�9� sE�V�<oC �b�~ �y@�r�xz �8.� meD�M [�p%�x�[ O�b%�6�nthingE �0�- ��-imesC�:�V�H�g�curceO�V�fpacedC�ecialB�j�1 �ficB �? �3�D"k�+�F OD�f allyE�)�!esOlyE�1�)�edB�8'�[  �{ �  �E)litN 5��u�textN 4��t�onsorN �##readB�N �,ingBF�#�j  D�2 @  " �f��i�)R  $<  K(/�a�sJp0 /!�i "@  + # "�G$ &8p�# sE��k�valueN K� quarespaceN^�taggerB�!   �y �I  :� 6 "- C 8  4 W  �O M  g! ,�W. % *4 4   ' �% R#% . )   "  :5 7 '�= ++�M̀��� � (�_5Q�40parentsD�� tB�sG�(yL�ssB�I�a*@�"edB�c �0���A�C�]ingBq�+,� �b��(� �H]�r!` � �J%�T,^�7veP!�thB� �s�8 ��)�t . �lengthB�l� �3   ��!offsetB�o�6 �$sBC� �ppacingB�m�4 � useB�p�H�}dB�NsB�7ymentN�##�t�M�]erB �f�W�#�HcentG�xagesQ�)fectF�ormB�`�/�j�R�L�U�2anceB,,�k�e�5 n�c ��~��_ T tC �{�t�h� �N� �/edE�Y�S�U ingE�F�>sEmittedG�PpetualB�2 �lspectiveB�,�"hysicalC�v�$�2sB �>� �[��[inkE��ningG,�H xelG�dsC��Q��+�@�%� Q��-��'layB�?�&�> %�| �\ backB+�P�� b �]% �sB�GusN�###�$zngN �XointB��S�V �B-�erD�;OKB�[V�P�;OKB�fV�6 downcaptureI�eventP �8 >infoD�{�~sG �[IlygonB��\ �1lineB��] �2sitionB ��}�8� �VG! �8� �s edC�=veQ�AsibleB�Ffe�\ �m�+(yt k�� �p�Euz�B� �$SwerD�J ;fulB �o�HreC �c calculateM�$miumO �^  �n senceC �!�%�r�3�hsC�{fH% )�ableI� cancelI�|esD �T� �W�ingD�A�DventE�{defaultP�(iewN �ousB�H W ! �<�2 �"�2�+ lyE1%imaryD�J�MvateN �2obablyH�-gressB�{��4�k��(| k�9S�Q�jectPzmiseB �}pC>�@:�e�|�.E�?Xf= Dn`}(G.H�?XfB "nd(G 9W�= S�agateC� ingD�c�q onC�a�]�keffectN R�rtiesB �I$ �2G�|�byE '�V�w�/ortionQ�sC�)�/�~0 %�G�0 (�G��FvideD3 �( 3 � (�dB�*�%��'�?�*PP�zJsC �8�gingB�]�5�-�P��)ullQ�NshH�btH�w queryselectorQ �A=uingN�sickN x lyE� �pteE� *t4�o*t4radiusE �^ �DngeG�NteB �\iosE�U�;wG�{eC �=�ty�Z�)� 5 �ym�^� *� 5_-achB���xtB �H��Z xz%� < > c"w7$�0�&� �F* �V*dB��|�'�MingE�s�YlE�K�1isticH lyE�t�Z�sonsE �� �o ��x�U calculationsE�'� eiveD�3�`�6�&`sD�C�Q�zipesF � ognisedD��& sD�^�ammendedE��{rdedG�tB��_ �o D*? distributedO�fC��  �/�� �\�+ erenceF�eW�gredC�AgisteredB�G propertyB�TularL�blatedD�y�iveB�l�a�2 �!# � �3"�ReasedD �V" �Y"sD�W�ZingD�I�LiablePmoveN�bdC ��p�VsGpingE�*=��?�$nderC �u�Gz��An��,�,edC�BrsN N�ingE�_�5�[�z5sE �X= �R=orderingE�%�peatB�X�M  $(��U �]  &$delayB� �b �' ingB�s �+sB�I �typeB� �3+ �x-titionB� �<laceC�y�U�;yedB�* resentingB ��)�L � sG �, sizeE �n +�olvedC�C �>sB�� pectivelyG�b�L onsivenessM�LtartB�]edB�*deltaB �F !�5 �.� �S"oredL� *N8*  ,>&" <"$  &, 0 f# '   + L ] !9)+ )    :~ '  7  2 & )   * ""�V̀����0Á=� �)�Q�=� �)�Q&.�&T"rR�T"rR�T"rR@�S-� �;{H}�8-� �;{H}�8-� �;{H}"�3%0�x%0�x%0�p��0and2 � Yh�Yh�Yh�#d �!�T0�<�'!�T0�<�'!�T0�<�>   !F�K�h`"i4"K�h`"i4"K�h`"i4-: �H)n�t=�0)n�t=�0)n�t=�#�$�{ # �  �CNr\q�� # �  �CNr\q�� # �  �CNr\q�}@   (�~ � #� �od�%rT= B�y �~"7'�n #� �od�%rT= B�y �~"7'�n #� �od�%rT= B�y �~"7'��&�4 # �  ��VNl��� # �  ��VNl��� # �  ��VNl����� c;#@"TB-9 28.1; c;#@"TB-9 28.1; c;#@"TB-9 28.1( k�,�q1��(h48H�4X9B-Y"1��(h48H�4X9B-Y"1��(h48H�4X9B-Y'   AeF�b  �B�  �B�  �B�oZ �w&�Y�s($'x&�Y�s($'x&�Y�s($'!@�|�*- Y��*- Y��*- Y'��A f;#@"TB' ? 28.1: f;#@"TB' ? 28.1: f;#@"TB' ? 28.1:��R� �*�8H�4X9B-YK� �*�8H�4X9B-YK� �*�8H�4X9B-Y:>�  ��  ��  �7R�'�\ �94'�\ �94'�\ �9*C"imatable�R�y�y� �z�z �seN� -$�NFz-$�NFz-$�NFx 75m5�^ X]�` X]�` X]�x7�,� C1*�( 7 H/(fC1*�( 7 H/(fC1*�( 7 H/(C^ 06I6�Qav2�av2�av2�N75m5A0 _ "VK OG'  NB^l�D"!)0 _ "VK OG'  NB^l�D"!)0 _ "VK OG'  NB^l�D"!$ �h j     4  + G  B d(]1KQ"#8-�X )9:M$     4  + G  B d(]1KQ"#8-�X )9:M$     4  + G  B d(]1KQ"#8-�X )9:M$�> 06I6$? _ "VK O"g'  NBS 4�T"#-? _ "VK O"g'  NBS 4�T"#-? _ "VK O"g'  NBS 4�T"#(75m5{"�Y]"�Y]"�Y�75m58$);5( JP(�m��G%(7$);5( JP(�m��G%(7$);5( JP(�m��G%(� 75m5�?��6����`Dw �)� �)� �)(06I6a"�d_"�d_"�d�06I6%);5* LR(�Y��G%(A);5* LR(�Y��G%(A);5* LR(�Y��G%(06I6��c�cp75m5M<  � 0l X<  � 0l X<  � 0l Gd��a�a�4�{�{@�`3�N�1 �(3�N�1 �(3�N�1 .�i�~���~���~�@�3�N�q �i3�N�q �i3�N�q �g�^��^��^��P��P��Pnumber L�7 D� L�7 D� L�7L�7�G L�7 D� D� D� L�7presence*5�7�T �w �w �V(.��h �V �V *5�7�c�V�V�,".���U�U 5�765�7�qg�gg�gg�> 5�7 .�..��J g�I g�I g .� 5�7s"� ��i��i��+��O��O�view � � � � �ing�!�a�a����m�{�{�N� �R� �R� F�[E�7�,�A&�rE�7�,�A&�rE�7�,�A&4�n�;1�!��;1�!��;1�!F�E�7�n�q&�E�7�n�q&�E�7�n�q&j��<1(�=Md>K`�=D��<1(�=Md>K`�=D��<1(�=Md>K`�=D^�l3(�?MN>K`�=D�93(�?MN>K`�=D�93(�?MN>K`�=D�K��on> ��m�&{�?�&{�?�&{`�\K\:�046D ^� �046D ^� �046D ^�   7N�rV�t�Z{XV�t�Z{XV�t�Z{pXg+g�C'b\�4�C'b\�4�C'b\�.� \K\�fX�MK&�1R�Q�+X�MK&�1R�Q�+X�MK&�1R�Q�b?���1�^txwz�47� "  V 9          F�^txwz�47� "  V 9          F�^txwz�47� "  V 9          &�g+g�JX�WMM&�!�a�:X�WMM&�!�a�:X�WMM&�!�a�T\K\_ ��, ��, ��|�\K\`li1�WY �K=ili1�WY �K=ili1�WY �K=JLN\K\?+�@�+�@�+�@�Z�| n e�[Q�L n e�[Q�L n e�[Q�_6��v?Y�?Y�?Y'Jg+gB ��6 ��6 �� ~g+g�!k3�!AY �K=�Gk3�!AY �K=�Gk3�!AY �K=?4g+g"+�!+�!r�A&� �Y�:#)� !!�W����� �2 �a �K �N��4o~X V� V� V o~X�? <a �K� <a �K� <a �K��c�c �C �l&!o~�W   o~o~�P~�~�~4o~R b �' b �' b $o~�g�6�$�6�$�6o~?� �  o~ o~o~�[�a�a���o~� �{�{ �Z0o~�a�/� �h�/� �h�/� X�! <a �K�8 <a �K�8 <a �K�N��4o~X V� V� V o~X�? <a �K� <a �K� <a �K��c�c �C �l&!o~�W   o~o~�P~�~�~4o~R b �' b �' b $o~�g�6�$�6�$�6o~?� � 0apis�e���l��K�p�p�Z�&�-�3�3�"�%�8�E� �2�n�G�G�r�X�O�^�b�1�?��5� ��K�1��1�6�e���l��K�p�p�Z�&�-�3�3�"�%�8�B��2�n�G�G�r�X�O�^�b�1�?��5� ��K�1p� ���X��� ���X��ear� �3�3��G�G�`����� � �3�3��G�G�`�����lies��T�T�X�a�a��T�T�X�a�ay�?�x�x�s�^�^ ��)�)�?�a�a�?�x�x�s�^�^ ��)�)ing�!����p�p�!����p�propriate��y�y� �z�z �U����y�y� �z�z �U��re�l�;�_�;�_�;�f�{�{�b�c�c4�% ��Z'�Z ��Z'�Z ��Z'p�k���s )Jl4�"���s )Jl4�"���s )Jl4@�c) ��)�n) ��)�n) ��)��T�TX�<t�Q�ZW��(t�Q�ZW��(t�Q�ZW�(�m�c��c��c�S;�Q;�Q;�a��H��H��K�a�aR�nv�Q�ZW��"v�Q�ZW��"v�Q�ZW�(�%�e�V�e�V�e��UI�UI�UF�8 3L�!.�} 3L�!.�} 3L�!. � �t�)�)F�p 3L�!.� 3L�!.� 3L�!.$�%|)-,|)-,|)-��_�_$��C�C��l�;�_�;�_�;�f�{�{�b�c�c4�% ��Z'�Z ��Z'�Z ��Z'p�k���s )Jl4�"���s )Jl4�"���s )Jl4@�c) ��)�n) ��)�n) ��)��T�TX�<t�Q�ZW��(t�Q�ZW��(t�Q�ZW�(�m�c��c��c�S;�Q;�Q;�a��H��H��K�a�aR�nv�Q�ZW��"v�Q�ZW��"v�Q�ZW�(�%�e�V�e�V�e��UI�UI�UF�8 3L�!.�} 3L�!.�} 3L�!. � �t�)�)F�p 3L�!.� 3L�!.� 3L�!.$�%|)-,|)-,|)-a �a^�.^�.^�a^�.^�.^n��T�T�o�o� �o� �o�F�a�a� �o�q�o�q�o �7�a�a��T�T�o�o� �o� �o�F�a�a� �o�q�o�q�ogument�#�y�y�L�z�z�� � �T�{�{��X�X�\� � �#�y�y�L�z�z�� � �T�{�{��X�X�\� � ound�%�y�y�^�z�z�<�@�:�@�:�@�Z�@� �@� �@�)<�b<�b<�%�y�y�^�z�z�<�@�:�@�:�@�Z�@� �@� �@�)<�b<�b<ray�S�3�H�3�H�3(�.�:V��:V��:V�N�3�I�3�I�3 "�P<� �<<� �<<� �u�{�{�� � �x�)�)�)�X�X"�<� �D<� �D<� �S�3�H�3�H�3(�.�:V��:V��:V�N�3�I�3�I�3 "�P<� �<<� �<<� �u�{�{�� � �x�)�)�)�X�X"�<� �D<� �D<� tefacts�(� � �(� � s�.�j.�j.�G�{�{(�S�-�A�-�A�-j�g�+\�?D��\�#8��+\�?D��\�#8��+\�?D��\�#8j�}t�h�&Q|�SG& -�kt�h�&Q|�SG& -�kt�h�&Q|�SG& -p� �+\7�JF�� �(C��+\7�JF�� �(C��+\7�JF�� �(CF�I1 �F>�s�1 �F>�s�1 �F>�sR�] �-�d.�I�E �-�d.�I�E �-�d.�I��y�yL�/� �f5�/� �f5�/� �f5"�t�B��B��BF�1 �FC�s�1 �FC�s�1 �FC�s^�9P �-�N.�I�iP �-�N.�I�iP �-�N.�I�Y�J�J6� 4r(�&`P4r(�&`P4r(�&`4��x�!�d�x�!�d�x�! ��}m�m�m�x� � "��~��~��~�E�V�V4�@�x�!�l�x�!�l�x�!�o����a�a�.�j.�j.�G�{�{(�S�-�A�-�A�-j�g�+\�?D��\�#8��+\�?D��\�#8��+\�?D��\�#8j�}t�h�&Q|�SG& -�kt�h�&Q|�SG& -�kt�h�&Q|�SG& -p� �+\7�JF�� �(C��+\7�JF�� �(C��+\7�JF�� �(CF�I1 �F>�s�1 �F>�s�1 �F>�sR�] �-�d.�I�E �-�d.�I�E �-�d.�I��y�yL�/� �f5�/� �f5�/� �f5"�t�B��B��BF�1 �FC�s�1 �F�X�\+U.S-F�Fu���  �?� � 5 t � �  Ky��$]��+U��"�. +!�K%3Code Example 26reactanimationsanimate(element, { filter: "blur(10px)" }, { delay: 0.3 })["react","animation","stagger"]intermediate2025-08-29 11:54:09�R�- +!�O]%3Code Example 24reactanimations<motion.div drag dragTransition={{ min: 0, max: 100, bounceStiffness: 100 }} />["react","animation","gesture","spring"]intermediate2025-08-29 11:54:09�%�, +!�K%3Code Example 22reactanimations<motion.div drag dragTransition={{ min: 0, max: 100 }} />["react","animation","gesture"]intermediate2025-08-29 11:54:09�9�+ +!�/K%3Code Example 21reactanimations<motion.div drag // dragTransition always type: inertia dragTransition={{ power: 0, // Snap calculated target to nearest 50 pixels modifyTarget: target => Math.round(target / 50) * 50 }} />["react","animation","gesture"]intermediate2025-08-29 11:54:09�&�* +!� K%3Code Example 20reactanimations<motion.div drag dragTransition={{ timeConstant: 200 }} />["react","animation","gesture"]intermediate2025-08-29 11:54:09��) +!{K%3Code Example 19reactanimations<motion.div drag dragTransition={{ power: 0.2 }} />["react","animation","gesture"]intermediate2025-08-29 11:54:09�C�( +!�EI%3Code Example 18reactanimations<motion.div animate={{ rotate: 180 }} transition={{ type: 'spring', restDelta: 0.5 }} />["react","animation","spring"]intermediate2025-08-29 11:54:09�C�' +!�EI%3Code Example 17reactanimations<motion.div animate={{ rotate: 180 }} transition={{ type: 'spring', restSpeed: 0.5 }} />["react","animation","spring"]intermediate2025-08-29 11:54:09�@�& +!�?I%3Code Example 16reactanimations<motion.div animate={{ rotate: 180 }} transition={{ type: 'spring', velocity: 2 }} />["react","animation","spring"]intermediate2025-08-29 11:54:09�F�% +!�KI%3Code Example 15reactanimations<motion.section animate={{ rotate: 180 }} transition={{ type: 'spring', stiffness: 50 }} />["react","animation","spring"]intermediate2025-08-29 11:54:09�N�$ +!�[I%3Code Example 14reactanimations<motion.feTurbulence animate={{ baseFrequency: 0.5 }} transition={{ type: "spring", mass: 0.5 }} />["react","animation","spring"]intermediate2025-08-29 11:54:09�?�# +!�=I%3Code Example 13reactanimations<motion.a animate={{ rotate: 180 }} transition={{ type: 'spring', damping: 300 }} />["react","animation","spring"]intermediate2025-08-29 11:54:09�d�" +!�I%3Code Example 12reactanimations<motion.div animate={{ rotateX: 90 }} transition={{ type: "spring", visualDuration: 0.5, bounce: 0.25 }} />["react","animation","spring"]intermediate2025-08-29 11:54:09�A�! +!�AI%3Code Example 11reactanimations<motion.div animate={{ rotateX: 90 }} transition={{ type: "spring", bounce: 0.25 }} />["react","animation","spring"]intermediate2025-08-29 11:54:09�5� +!�C73Code Example 10reactanimations<motion.div animate={{ x: [0, 100, 0], transition: { times: [0, 0.3, 1] } }} />["react","animation"]beginner2025-08-29 11:54:09�=� )!�U73Code Example 9reactanimations<motion.div animate={{ x: [0, 100, 0], transition: { ease: ["easeIn", "easeOut"] } }} />["react","animation"]beginner2025-08-29 11:54:09�� )!s7%3Code Example 8reactanimationsanimate("ul > li", { opacity: 1 }, { duration: 1 })["react","animation"]intermediate2025-08-29 11:54:09�8� )!�C7%3Code Example 7reactanimations<motion.path animate={{ pathLength: 1 }} transition={{ duration: 2, type: "tween" }} />["react","animation"]intermediate2025-08-29 11:54:09�7� )!�A7%3Code Example 6reactanimations<MotionConfig transition={{ duration: 0.4, ease: "easeInOut" }}> <App /> </MotionConfig>["react","animation"]intermediate2025-08-29 11:54:09�=� )!�;I%3Code Example 5reactanimations<motion.div animate={{ x: 100 }} transition={{ type: "spring", stiffness: 100 }} />["react","animation","spring"]intermediate2025-08-29 11:54:09 ``��M_#!�M��O� � 33https://motion.dev/docs/react-transitionsTransitionsreactanimationsDefine animation behavior with Motion for React's transition prop. Choose time-based or physics-based animations. Customize duration, easing, delay, and repeat.A `transition` defines the type of animation used when animating between two values. ``` const transition = { duration: 0.8, delay: 0.5, ease: \[0, 0.71, 0.2, 1.01\], } ``` ``` // Motion component <motion.div animate\={{ x: 100 }} transition\={transition} /> // animate() function animate(".box", { x: 100 }, transition) ``` Setting a transition -------------------- `transition` can be set on any animation prop, and that transition will be used when the animation fires. ``` <motion.div whileHover\={{ scale: 1.1, transition: { duration: 0.2 } }} /> ``` ### Value-specific transitions When animating multiple values, each value can be animated with a different transition, with `default` handling all other values: ``` // Motion component <motion.li animate\={{ x: 0, opacity: 1, transition: { default: { type: "spring" }, opacity: { ease: "linear" } } }} /> // animate() function animate("li", { x: 0, opacity: 1 }, { default: { type: "spring" }, opacity: { ease: "linear" } }) ``` ### Default transitions It's possible to set default transitions via the `transition` prop. Either for specific `motion` components: ``` <motion.div animate\={{ x: 100 }} transition\={{ type: "spring", stiffness: 100 }} /> ``` Or for a group of `motion` components [via](./react-motion-config#transition) `[MotionConfig](./react-motion-config#transition)`: ``` <MotionConfig transition\={{ duration: 0.4, ease: "easeInOut" }}\> <App /> </MotionConfig\> ``` Transition settings ------------------- #### `type` **Default:** Dynamic `type` decides the type of animation to use. It can be `"tween"`, `"spring"` or `"inertia"`. **Tween** animations are set with a duration and an easing curve. **Spring** animations are either physics-based or duration-based. Physics-based spring animations are set via `stiffness`, `damping` and `mass`, and these incorporate the velocity of any existing gestures or animations for natural feedback. Duration-based spring animations are set via a `duration` and `bounce`. These don't incorporate velocity but are easier to understand. **Inertia** animations decelerate a value based on its initial velocity, usually used to implement inertial scrolling. ``` <motion.path animate\={{ pathLength: 1 }} transition\={{ duration: 2, type: "tween" }} /> ``` #### Spring visualiser TimePhysics Duration Bounce Use visual duration ### Tween #### `duration` **Default:** `0.3` (or `0.8` if multiple keyframes are defined) The duration of the animation. Can also be used for `"spring"` animations when `bounce` is also set. ``` animate("ul > li", { opacity: 1 }, { duration: 1 }) ``` #### `ease` The easing function to use with tween animations. Accepts: * Easing function name. E.g `"linear"` * An array of four numbers to define a cubic bezier curve. E.g `[.17,.67,.83,.67]` * A [JavaScript easing function](./easing-functions), that accepts and returns a value `0`\-`1`. These are the available easing function names: * `"linear"` * `"easeIn"`, `"easeOut"`, `"easeInOut"` * `"circIn"`, `"circOut"`, `"circInOut"` * `"backIn"`, `"backOut"`, `"backInOut"` * `"anticipate"` When animating keyframes, `ease` can optionally be set as an array of easing functions to set different easings between each value: ``` <motion.div animate\={{ x: \[0, 100, 0\], transition: { ease: \["easeIn", "easeOut"\] } }} /> ``` > _I usually use the_ `_"easeOut"_` _curve for enter and exit transitions. The acceleration at the beginning gives the user a feeling of responsiveness. I use a duration no longer than_ `_0.3_`_/_`_0.4_` _seconds to keep the animation fast._~ Emil Kow� ""�V̀����0R 0motionvalueB �Y�4 �~�1�_�U B�untedE�T�JseD�,�/vementB �b1�5 �~�8�Y� sD �Q�  �Q�%ingB��u�PzillaB�L �$��DW P �'��*�O �;~ Fe sH�XuchB�fltipleB �~ ��K4�)4�#S�h�3LstB�=��=�e�yB�("#�(  � componentD �1�selfM�nameB �:�Eil�a�&�,dB�^�$sB�a�Q� nE��mdaE�|�btiveB' �I@lyL�huralB�Z� �%�  �w�&lyC�vB�b-/!igationD�T�bearestM�tF�cedC�V � (�u �(edPVsD��f��L�vgativeB� �E�KstedE�%� verM�wB� � � g�k�+ '�g� )�W�xtE�>s E�$�.oB�e�`� �I�n� �Qn �##.nH� eC �a �0rmalB�[y %�<| % T�tB�m�p��"�c�r��'"�M�teB�l��g�L�o{� ��� �S ��z�D�QingN-wC�?pmjsL�thP�EullC �sN�5�9�9mberB�A�h�3�! �'I�8�� ��D�s��sBH�g��}�|�iericalH�KobjectB �|��t ��v�w�Q�<3dB�sBJ��$YserverQBccurB�*��fB^)e,u�'k�jYG*:" I5 �U5 :*#!Q ($�%<�7EH"�d]xf = Bc�4lg0v"�1$�7�= D ]�C� ,M�#$�!%,4 /�zAa-# @ Bc�4qm0j"�9$�!�= D ]�C� �Y�*1=:�!1Q*<,+ K7H�;� $NS$ �d 5z-� �]'P�>�? fQXersC �P �Z< �@<setE �#( �)�J�"�� �( �+�sG+�� tenE�/�]ldB�0 �G  �; nB�d��g !$�,�XJ(5�e!g��_ M�^�M� 0��|�[J(5�p!g��I M�^�M�,6�`�O�Cj�~ �1 4VH<�ceF | x#O�t� lickE �[� directionlockD�eB�@�h�w��0#^a� �#^a��##�t�K�[�hoverendD�AstartD�?lyB�E�F�& �%�u�+H �(��# R�mountC �L seenterD��leaveD��!panD�yointerdowncaptureD � �ressI�PcancelI�ZstartI�ItapD�McancelD�WstartD�FunmountC �MpdateB�+ � pacityB:s �)D)�w�z <35" #<)M:M$0V�0Ya�"5kQw�: \g�2 \h �q k �T� . �|* �denE �j��b{�sE�{�uposedD�/�2ingB�p�e�6timalGm onB �^p#�#�T&!S�i�=allyB�r ��u�^sB�Hx �Nqa(� �0  ��RI�-�\rB0 t�|�%9�j�Z� @���i Gg0=�!+'�Ia�R�W7 �B�L�)^�Wj0=�!+'�*=a�Y�B7 � �Y*�.C��lz$$�g �###}  G8s� g chestrateC� ingC�q onB�r�' �,derH�5 �3gB �M�> �%��EX Q �(��+�P �<~ Ge iginB�Y �x�m�c�1��]xC � yC�zC �scillateB�x�m �>�dtherB�CP�%�[��J��6�> �%�X��"�  b�%!wiseQ�surN�tC �d�D� �8� �  ,&putB�$ �NsideD��H"�L��S"�verC�[��flowE��?��@layE�I�/riddenB �c� �X��JeB �,�`��|�dviewLwnC�pO �?ackageBU �ddingE �\ �BgeEk�]�g6 II_�c�S6 II�5intC�unD �?  �B  ningLzrallaxF�v�HentC�H �eT �Y�Z �sT �?�Z 0+I @" * &   ! 2; /1F T!5 � $.�#M ;   �(O�N !G6 X 6$ + nsition={{ type: 'spring', restSpeed: 0.5 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","spring"]},{"title":"Code Example 18","description":"","code":"<motion.div\n animate={{ rotate: 180 }}\n transition={{ type: 'spring', restDelta: 0.5 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","spring"]},{"title":"Code Example 19","description":"","code":"<motion.div\n drag\n dragTransition={{ power: 0.2 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","gesture"]},{"title":"Code Example 20","description":"","code":"<motion.div\n drag\n dragTransition={{ timeConstant: 200 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","gesture"]},{"title":"Code Example 21","description":"","code":"<motion.div\n drag\n // dragTransition always type: inertia\n dragTransition={{\n power: 0,\n // Snap calculated target to nearest 50 pixels\n modifyTarget: target => Math.round(target / 50) * 50\n }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","gesture"]},{"title":"Code Example 22","description":"","code":"<motion.div\n drag\n dragTransition={{ min: 0, max: 100 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","gesture"]},{"title":"Code Example 24","description":"","code":"<motion.div\n drag\n dragTransition={{\n min: 0,\n max: 100,\n bounceStiffness: 100\n }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","gesture","spring"]},{"title":"Code Example 26","description":"","code":"animate(element, { filter: \"blur(10px)\" }, { delay: 0.3 })","language":"react","difficulty":"intermediate","tags":["react","animation","stagger"]},{"title":"Code Example 27","description":"","code":"<motion.div\n animate={{ rotate: 180 }}\n transition={{ repeat: Infinity, duration: 2 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 28","description":"","code":"<motion.div\n animate={{ rotate: 180 }}\n transition={{\n repeat: 1,\n repeatType: \"reverse\",\n duration: 2\n }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 29","description":"","code":"<motion.div\n animate={{ rotate: 180 }}\n transition={{ repeat: Infinity, repeatDelay: 1 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","stagger"]},{"title":"Code Example 30","description":"","code":"const list = {\n hidden: {\n opacity: 0,\n transition: { when: \"afterChildren\" }\n }\n}\n\nconst item = {\n hidden: {\n opacity: 0,\n transition: { duration: 2 }\n }\n}\n\nreturn (\n <motion.ul variants={list} animate=\"hidden\">\n <motion.li variants={item} />\n <motion.li variants={item} />\n </motion.ul>\n)","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 31","description":"","code":"const container = {\n hidden: { opacity: 0 },\n show: {\n opacity: 1,\n transition: {\n delayChildren: 0.5\n }\n }\n}\n\nconst item = {\n hidden: { opacity: 0 },\n show: { opacity: 1 }\n}\n\nreturn (\n <motion.ul\n variants={container}\n initial=\"hidden\"\n animate=\"show\"\n >\n <motion.li variants={item} />\n <motion.li variants={item} />\n </motion.ul>\n)","language":"react","difficulty":"intermediate","tags":["react","animation","stagger"]},{"title":"Code Example 32","description":"","code":"const transition = {\n delayChildren: stagger(0.1)\n}","language":"react","difficulty":"advanced","tags":["react","animation","stagger"]},{"title":"Code Example 33","description":"","code":"const transition = {\n delayChildren: stagger(0.1, { from: \"last\" })\n}","language":"react","difficulty":"advanced","tags":["react","animation","stagger"]}]["react","animations","transitions","animation","gesture","scroll","spring","drag","keyframes","stagger","motion","transition"]2025-08-29 11:54:092025-08-29 11:54:09�" }) } ```[{"title":"Code Example 1","description":"","code":"const transition = {\n duration: 0.8,\n delay: 0.5,\n ease: [0, 0.71, 0.2, 1.01],\n}","language":"react","difficulty":"intermediate","tags":["react","animation","stagger"]},{"title":"Code Example 2","description":"","code":"// Motion component\n<motion.div\n animate={{ x: 100 }}\n transition={transition}\n/>\n\n// animate() function\nanimate(\".box\", { x: 100 }, transition)","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 3","description":"","code":"<motion.div\n whileHover={{\n scale: 1.1,\n transition: { duration: 0.2 }\n }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","gesture"]},{"title":"Code Example 4","description":"","code":"// Motion component\n<motion.li\n animate={{\n x: 0,\n opacity: 1,\n transition: {\n default: { type: \"spring\" },\n opacity: { ease: \"linear\" }\n }\n }}\n/>\n\n// animate() function\nanimate(\"li\", { x: 0, opacity: 1 }, {\n default: { type: \"spring\" },\n opacity: { ease: \"linear\" }\n})","language":"react","difficulty":"intermediate","tags":["react","animation","spring"]},{"title":"Code Example 5","description":"","code":"<motion.div\n animate={{ x: 100 }}\n transition={{ type: \"spring\", stiffness: 100 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","spring"]},{"title":"Code Example 6","description":"","code":"<MotionConfig transition={{ duration: 0.4, ease: \"easeInOut\" }}>\n <App />\n</MotionConfig>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 7","description":"","code":"<motion.path\n animate={{ pathLength: 1 }}\n transition={{ duration: 2, type: \"tween\" }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 8","description":"","code":"animate(\"ul > li\", { opacity: 1 }, { duration: 1 })","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 9","description":"","code":"<motion.div\n animate={{\n x: [0, 100, 0],\n transition: { ease: [\"easeIn\", \"easeOut\"] }\n }}\n/>","language":"react","difficulty":"beginner","tags":["react","animation"]},{"title":"Code Example 10","description":"","code":"<motion.div\n animate={{\n x: [0, 100, 0],\n transition: { times: [0, 0.3, 1] }\n }}\n/>","language":"react","difficulty":"beginner","tags":["react","animation"]},{"title":"Code Example 11","description":"","code":"<motion.div\n animate={{ rotateX: 90 }}\n transition={{ type: \"spring\", bounce: 0.25 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","spring"]},{"title":"Code Example 12","description":"","code":"<motion.div\n animate={{ rotateX: 90 }}\n transition={{\n type: \"spring\",\n visualDuration: 0.5,\n bounce: 0.25\n }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","spring"]},{"title":"Code Example 13","description":"","code":"<motion.a\n animate={{ rotate: 180 }}\n transition={{ type: 'spring', damping: 300 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","spring"]},{"title":"Code Example 14","description":"","code":"<motion.feTurbulence\n animate={{ baseFrequency: 0.5 }}\n transition={{ type: \"spring\", mass: 0.5 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","spring"]},{"title":"Code Example 15","description":"","code":"<motion.section\n animate={{ rotate: 180 }}\n transition={{ type: 'spring', stiffness: 50 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","spring"]},{"title":"Code Example 16","description":"","code":"<motion.div\n animate={{ rotate: 180 }}\n transition={{ type: 'spring', velocity: 2 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","spring"]},{"title":"Code Example 17","description":"","code":"<motion.div\n animate={{ rotate: 180 }}\n tra�g the target to a grid. ``` <motion.div drag // dragTransition always type: inertia dragTransition\={{ power: 0, // Snap calculated target to nearest 50 pixels modifyTarget: target \=> Math.round(target / 50) \* 50 }} /> ``` #### `min` Minimum constraint. If set, the value will "bump" against this value (or immediately spring to it if the animation starts as less than this value). ``` <motion.div drag dragTransition\={{ min: 0, max: 100 }} /> ``` #### `max` Maximum constraint. If set, the value will "bump" against this value (or immediately snap to it, if the initial animation value exceeds this value). ``` <motion.div drag dragTransition\={{ min: 0, max: 100 }} /> ``` #### `bounceStiffness` **Default:** `500` If `min` or `max` is set, this affects the stiffness of the bounce spring. Higher values will create more sudden movement. ``` <motion.div drag dragTransition\={{ min: 0, max: 100, bounceStiffness: 100 }} /> ``` #### `bounceDamping` **Default:** `10` If `min` or `max` is set, this affects the damping of the bounce spring. If set to `0`, spring will oscillate indefinitely. ``` <motion.div drag dragTransition\={{ min: 0, max: 100, bounceStiffness: 100 }} /> ``` ### Orchestration #### `delay` **Default:** `0` Delay the animation by this duration (in seconds). ``` animate(element, { filter: "blur(10px)" }, { delay: 0.3 }) ``` By setting `delay` to a negative value, the animation will start that long into the animation. For instance to start 1 second in, `delay` can be set to -`1`. #### `repeat` **Default:** `0` The number of times to repeat the transition. Set to `Infinity` for perpetual animation. ``` <motion.div animate\={{ rotate: 180 }} transition\={{ repeat: Infinity, duration: 2 }} /> ``` #### `repeatType` **Default:** `"loop"` How to repeat the animation. This can be either: * `loop`: Repeats the animation from the start. * `reverse`: Alternates between forward and backwards playback. * `mirror`: Switches animation origin and target on each iteration. ``` <motion.div animate\={{ rotate: 180 }} transition\={{ repeat: 1, repeatType: "reverse", duration: 2 }} /> ``` #### `repeatDelay` **Default:** `0` When repeating an animation, `repeatDelay` will set the duration of the time to wait, in seconds, between each repetition. ``` <motion.div animate\={{ rotate: 180 }} transition\={{ repeat: Infinity, repeatDelay: 1 }} /> ``` #### `when` **Default:** `false` With variants, describes when an animation should trigger, relative to that of its children. * `"beforeChildren"`: Children animations will play after the parent animation finishes. * `"afterChildren"`: Parent animations will play after the children animations finish. ``` const list = { hidden: { opacity: 0, transition: { when: "afterChildren" } } } const item = { hidden: { opacity: 0, transition: { duration: 2 } } } return ( <motion.ul variants\={list} animate\="hidden"\> <motion.li variants\={item} /> <motion.li variants\={item} /> </motion.ul\> ) ``` #### `delayChildren` **Default:** `0` With variants, setting `delayChildren` on a parent will delay child animations by this duration (in seconds). ``` const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { delayChildren: 0.5 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( <motion.ul variants\={container} initial\="hidden" animate\="show" \> <motion.li variants\={item} /> <motion.li variants\={item} /> </motion.ul\> ) ``` Using the `[stagger](./stagger)` function, we can stagger the delay across children. ``` const transition = { delayChildren: stagger(0.1) } ``` By default, delay will stagger across children from first to last. By using `stagger`'s `from` option, we can stagger from the last child, the center, or a specific index. ``` const transition = { delayChildren: stagger(0.1, { from: "last�alski, [Animations on the Web](https://animations.dev/) #### `times` When animating multiple keyframes, `times` can be used to adjust the position of each keyframe throughout the animation. Each value in `times` is a value between `0` and `1`, representing the start and end of the animation. ``` <motion.div animate\={{ x: \[0, 100, 0\], transition: { times: \[0, 0.3, 1\] } }} /> ``` There must be the same number of `times` as there are keyframes. Defaults to an array of evenly-spread durations. ### Spring #### `bounce` **Default:** `0.25` `bounce` determines the "bounciness" of a spring animation. `0` is no bounce, and `1` is extremely bouncy. **Note:** `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set. ``` <motion.div animate\={{ rotateX: 90 }} transition\={{ type: "spring", bounce: 0.25 }} /> ``` #### `visualDuration` If `visualDuration` is set, this will override `duration`. The visual duration is a time, **set in seconds**, that the animation will take to visually appear to reach its target. In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after. This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations. ``` <motion.div animate\={{ rotateX: 90 }} transition\={{ type: "spring", visualDuration: 0.5, bounce: 0.25 }} /> ``` #### `damping` **Default:** `10` Strength of opposing force. If set to 0, spring will oscillate indefinitely. ``` <motion.a animate\={{ rotate: 180 }} transition\={{ type: 'spring', damping: 300 }} /> ``` #### `mass` **Default:** `1` Mass of the moving object. Higher values will result in more lethargic movement. ``` <motion.feTurbulence animate\={{ baseFrequency: 0.5 }} transition\={{ type: "spring", mass: 0.5 }} /> ``` #### `stiffness` **Default:** `1` Stiffness of the spring. Higher values will create more sudden movement. ``` <motion.section animate\={{ rotate: 180 }} transition\={{ type: 'spring', stiffness: 50 }} /> ``` > _I never really understood how_ `_damping_`_,_ `_mass_` _and_ `_stiffness_` _influence a spring animation, so I made a_ [_tool for myself_](https://emilkowal.ski/ui/great-animations#great-animations-feel-natural) _to visualise it._~ Emil Kowalski, [Animations on the Web](https://animations.dev/) #### `velocity` **Default:** Current value velocity The initial velocity of the spring. ``` <motion.div animate\={{ rotate: 180 }} transition\={{ type: 'spring', velocity: 2 }} /> ``` #### `restSpeed` **Default:** `0.1` End animation if absolute speed (in units per second) drops below this value and delta is smaller than `restDelta`. ``` <motion.div animate\={{ rotate: 180 }} transition\={{ type: 'spring', restSpeed: 0.5 }} /> ``` #### `restDelta` **Default:** `0.01` End animation if distance is below this value and speed is below `restSpeed`. When animation ends, the spring will end. ``` <motion.div animate\={{ rotate: 180 }} transition\={{ type: 'spring', restDelta: 0.5 }} /> ``` ### Inertia An animation that decelerates a value based on its initial velocity. Optionally, `min` and `max` boundaries can be defined, and inertia will snap to these with a spring animation. This animation will automatically precalculate a target value, which can be modified with the `modifyTarget` property. This allows you to add snap-to-grid or similar functionality. Inertia is also the animation used for `dragTransition`, and can be configured via that prop. #### `power` **Default:** `0.8` A higher power value equals a further calculated target. ``` <motion.div drag dragTransition\={{ power: 0.2 }} /> ``` #### `timeConstant` **Default:** `**700**` Adjusting the time constant will change the duration of the deceleration, thereby affecting its feel. ``` <motion.div drag dragTransition\={{ timeConstant: 200 }} /> ``` #### `modifyTarget` A function that receives the automatically-calculated target and returns a new one. Useful for snappin ""�V����� �0�C�s�1 �FC�s'^�9P �-�N.�I�iP �-�N.�I�iP �-�N.�I�Y�J�J6� 4r(�&`P4r(�&`P4r(�&`4��x�!�d�x�!�d�x�! ��}m�m�m�x� � "��~��~��~�E�V�V4�@�x�!�l�x�!�l�x�!0aspect�>�x�x�\�^�^�>�x�x�\�^�^sociated�l�T�T�'�a�a�� � �b�X�X �l�T�T�'�a�a�� � �b�X�Xync��3�3��3�3t�{�{�{��Z �'> --�E �'> --�E �'> --(�j��&�:��&�:��&�C� � �n��(���&�5��&�5��&�-���R�������)�)�k��X��X��e���� � �7��D��D��{�{�{��Z �'> --�E �'> --�E �'> --(�j��&�:��&�:��&�C� � �n��(���&�5��&�5��&�-���R�������)�)�k��X��X��e���� � tached�h� � �h� � s�U� � �n�X�X�U� � �n�X�Xing�O� � �h�X�X�O� � �h�X�Xr P� P� P� P� P� P� P� P� P� P� P� P�P��P�a�a P� P� P� P� P� P� P� P� P� P�effect O� O� O� O� O� O� O� O� O� O� O� O�O��P�a�a O� O� O� O� O� O� O� O� O� O�ibute �Sg�7g�7g �Sg�7g�7g s�B�{�{�X�y�y��z�z��x�x�"�^�^"�L�6*�@�6*�@�6* �B�{�{�X�y�y��z�z��x�x�"�^�^"�L�6*�@�6*�@�6*scale�5���5��x�]�y�y��z�z "�2 � � �]�y�y��z�z "�2 � � y�_�y�y��z�z �3���_�y�y��z�z �3��uto�r#!�0#!�0#!�O �q �q � �r �r  �r#!�0#!�0#!�O �q �q � �r �r  matic�#�# ally�E����p�p�L��h��h��U�r�C�r�C�r��S�)�S�)�S�{�T�T.�,�?�^�E�?�^�E�?�^�6�a�a.�X�E�H�9�E�H�9�E�H� [�&[�&[�C� � �8�)�)�" � � �E[�.[�.[�&I�I�I�E����p�p�L��h��h��U�r�C�r�C�r��S�)�S�)�S�{�T�T.�,�?�^�E�?�^�E�?�^�6�a�a.�X�E�H�9�E�H�9�E�H� [�&[�&[�C� � �8�)�)�" � � �E[�.[�.[vailable�K%�u%�u%�]�{�{�T� �h� �h� �b��#��#� �q���)���n�A�"�A�"�A�K%�u%�u%�]�{�{�T� �h� �h� �b��#��#� �q���)��wait�b�Rb�Rb�b�Rb�Rby��x�x�;�^�^��x�x�;�^�^xis�x�y�y��3�3�1�z�z(�!�<'�V!�<'�V!�<'d�L �H +1D(�! �H +1D(�! �H +1D((�B!�G'�X!�G'�X!�G'�x�y�y��3�3�1�z�z(�!�<'�V!�<'�V!�<'d�L �H +1D(�! �H +1D(�! �H +1D((�B!�G'�X!�G'�X!�G'back�T�x�x�t����^�^�(�c�c � �_�_ �T�x�x�t����^�^�(�c�c groundcolor�\ � � �% �h �h "�� �i� �i� �:-(�b-(�b-("�?�M �(�M �(�M �1�T�T�H���l�a�a�P�T�T �E�a�a�\ � � �% �h �h "�� �i� �i� �:-(�b-(�b-("�?�M �(�M �(�M �1�T�T�H���l�a�a�P�T�Tin�m�3�3 �|���4���!�_�_�m�3�3 �|���4��out�o�3�3 �~���6���#�_�_�o�3�3 �~���6��out�n�3�3 �}���5���"�_�_�n�3�3 �}���5��wards�X�3�3 �z���2�� �X�3�3 �z���2��r �;���u�c�c�;���u�c�cs �% �%se�!�5�!�5�!�5�!�5�!�5�!�5�!�5 �!�5�!�5�!�5�!�5�!�5�!�5�!�5d���"�}�!�B�!�B�!4�C�S�+�S�+�S"�5�[!��[!��[!�]�x�x�c� � �=�G�G�{�^�^H�F��j�R��j�R��jH�~��j�Z��j�Z��j���"�}�!�B�!�B�!4�C�S�+�S�+�S"�5�[!��[!��[!�]�x�x�c� � �=�G�G�{�^�^H�F��j�R��j�R��jH�~��j�Z��j�Z��j frequency��3�3�j0Z�K+-�*�/'� QEc�&�0&+�`�MKKC+��otion"`: ``` import { hover } from "motion" ``` ### Hover start `hover` can detect hover gestures on either an `Element`/array of elements: ``` hover( document.getElementById("my-id"), () \=> { console.log("my-id hovered!") } ) ``` Or via a CSS selector: ``` hover("a", () \=> console.log("link hovered")) ``` When a hover gesture starts, the provided callback is provided both the element that's being hovered, and the triggering `[PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)`: ``` hover("div:nth-child(2)", (element, startEvent) \=> { console.log("Hover started on", element) console.log("At", startEvent.clientX, startEvent.clientY) }) ``` ### Hover end The hover start function can **optionally** return a callback. This will be called when the hover gesture ends: ``` hover("a", () \=> { console.log("hover start") return (endEvent) \=> { console.log("hover end") } }) ``` This callback will be provided the triggering `PointerEvent`. ### Cancelling gesture detection `hover` returns a function that, when fired, will cancel all active event handlers associated with the gesture. ``` const cancelHover = hover(element, callback) cancelHover() ``` Options ------- ### `passive` **Default:** `true` If set to `false`, it'll be possible to call `event.preventDefault()` but the gesture will be less performant. [Learn more about passive events](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive). ### `once` **Default:** `false` If set to `true`, each provided element will fire their gesture only once.Motion+ examples Motion+ examples ---------------- [Motion+](./react-use-velocity) is a one-time payment, lifetime membership that gains you access to the source code of an ever-growing library of [premium examples](https://examples.motion.dev), as well as premium components like `[Cursor](./cursor)` and `[AnimateNumber](./react-animate-number)` and functions like [splitText](./split-text). Examples featuring `hover` include:[{"title":"Code Example 1","description":"","code":"hover(\".button\", (element) => {\n console.log(\"hover started on\", element)\n\n return () => console.log(\"hover end\")\n})","language":"javascript","difficulty":"beginner","tags":["js","gesture"]},{"title":"Code Example 2","description":"","code":"hover(\"li\", (element) => {\n const animation = animate(element, { rotate: 360 })\n\n return () => animation.stop()\n})","language":"javascript","difficulty":"intermediate","tags":["js","animation","gesture"]},{"title":"Code Example 3","description":"","code":"import { hover } from \"motion\"","language":"javascript","difficulty":"beginner","tags":["js","gesture"]},{"title":"Code Example 4","description":"","code":"hover(\n document.getElementById(\"my-id\"),\n () => {\n console.log(\"my-id hovered!\")\n }\n)","language":"javascript","difficulty":"beginner","tags":["js","gesture"]},{"title":"Code Example 5","description":"","code":"hover(\"a\", () => console.log(\"link hovered\"))","language":"javascript","difficulty":"beginner","tags":["js","gesture"]},{"title":"Code Example 6","description":"","code":"hover(\"div:nth-child(2)\", (element, startEvent) => {\n console.log(\"Hover started on\", element)\n console.log(\"At\", startEvent.clientX, startEvent.clientY)\n})","language":"javascript","difficulty":"intermediate","tags":["js","gesture"]},{"title":"Code Example 7","description":"","code":"hover(\"a\", () => {\n console.log(\"hover start\")\n \n return (endEvent) => {\n console.log(\"hover end\")\n }\n})","language":"javascript","difficulty":"beginner","tags":["js","gesture"]},{"title":"Code Example 8","description":"","code":"const cancelHover = hover(element, callback)\n\ncancelHover()","language":"javascript","difficulty":"beginner","tags":["js","gesture"]}]{"props":[],"methods":[{"name":"preventDefault","signature":"preventDefault()","description":"preventDefault method"}],"types":[]}["js","gestures","hover","animation","gesture","motion"]2025-08-29 11:54:102025-08-29 11:54:10 ((�V�����P����� �$��G����� ��3�3 �G�����0basic�=���!�{�{�M�p�p�&�y�y�;&�V&�V&�p�T�T�(�a�a�=���!�{�{�M�p�p�&�y�y�;&�V&�V&�p�T�T�(�a�aally��y�y�R�z�z��y�y�R�z�zs�%�{�{�%�{�{s�l�3�3�l�3�3tched�H� � �H� � e�TU8�U8�U8:�x�=1 �i��=1 �i��=1 �i�t�p�pp�_3Qn@<�q��9(�y3Qn@<�q��9(�y3Qn@<�q��9(��T�k}NHwX!.5�0)r�9�4 Z�k}NHwX!.5�0)r�9�4 Z�k}NHwX!.5�0)r�9�4 v�3Qn@<1�'q��K;(�3Qn@<1�'q��K;(�3Qn@<1�'q��K;(F�F�V _I@9A��V _I@9A��V _I@9A��f"ZH�'_�<+�i�{�"ZH�'_�<+�i�{�"ZH�'_�<+�i�{(��b��b��b<�DM�I�pf5`M�I�pf5`M�I�pf5L�28&} + �� 8&} + �� 8&} + �F��V _I�A��V _I�A��V _I�A~�"\H�'a�&+�i�{|"\H�'a�&+�i�{|"\H�'a�&+�i�{(�;�*��*��*�k]�A]�A]j� qZT0/�M�+�1 qZT0/�M�+�1 qZT0/�M�+�=@�&@�&@(�zp+ �Tp+ �Tp+ (�(V�6V�6V.�u"jK2 �M"jK2 �M"jK2 j�V qZT0/�M�+�9 qZT0/�M�+�9 qZT0/�M�+�GtDEtDEtD(�D �C �C .�t�b�H�b�H�b(� #G�S#G�S#G�TU8�U8�U8:�x�=1 �i��=1 �i��=1 �i�t�p�pp�_3Qn@<�q��9(�y3Qn@<�q��9(�y3Qn@<�q��9(��T�k}NHwX!.5�0)r�9�4 Z�k}NHwX!.5�0)r�9�4 Z�k}NHwX!.5�0)r�9�4 v�3Qn@<1�'q��K;(�3Qn@<1�'q��K;(�3Qn@<1�'q��K;(F�F�V _I@9A��V _I@9A��V _I@9A��f"ZH�'_�<+�i�{�"ZH�'_�<+�i�{�"ZH�'_�<+�i�{(��b��b��b<�DM�I�pf5`M�I�pf5`M�I�pf5L�28&} + �� 8&} + �� 8&} + �F��V _I�A��V _I�A��V _I�A~�"\H�'a�&+�i�{|"\H�'a�&+�i�{|"\H�'a�&+�i�{(�;�*��*��*�k]�A]�A]j� qZT0/�M�+�1 qZT0/�M�+�1 qZT0/�M�+�=@�&@�&@(�zp+ �Tp+ �Tp+ (�(V�6V�6V.�u"jK2 �M"jK2 �M"jK2 j�V qZT0/�M�+�9 qZT0/�M�+�9 qZT0/�M�+�GtDEtDEtDautiful �H �Hcause� �P�*�P�*�P�*�P��P��P ��a�a� �P�*�P�*�P�*�P��P��Pome�))�8)�8)s�u�y�y��z�z�A�X�X �u�y�y��z�z�A�X�Xfore����:�{�{"�/�Q>�(�Q>�(�Q>�=�T�T�%�x�x�!�G�G�x�a�a�C�^�^�o���'������:�{�{"�/�Q>�(�Q>�(�Q>�=�T�T�%�x�x�!�G�G�x�a�a�C�^�^�o���'��children�m�y�y��z�z �B���z���m�y�y��z�z �B���z��ginning�/���g���9�_�_�/���g��having�M�x�x�k�^�^�M�x�x�k�^�^or&&ur�8�3�3 �M���8�3�3 �M�� s�*� � �*� � ind�c�7�C�7�C�7��7�)�7�)�7�c�7�C�7�C�7��7�)�7�)�7ing��y�y��3�3��z�z �7� � �6��@��@� ��y�y��3�3��z�z �7� � �6��@��@�low�B���*�/�/�5�\�\�m�d�d �B���*�/�/�5�\�\�m�d�dnefits"��, �F�, �F�, "�4�, �,�, �,�, "��, �F�, �F�, "�4�, �,�, �,�, st(�8�/�x�X�/�x�X�/�x�R� � �V�)�)�4� � (�8�/�x�X�/�x�X�/�x�R� � �V�)�)�4� � tter�)���f�p�p�B� �n� �n� �`� �T� �T� �)���f�p�p�B� �n� �n� �`� �T� �T� ween����m �P �P 4��L�[�4�L�[�4�L�[4��(�.3�.�(�.3�.�(�.3@�K�L�4�k�s�L�4�k�s�L�4�k�C�T�T(�y,!�|�5,!�|�5,!�|�"�"�r�"�r�"��2�Z�2�Z�2�I�G�G� �a�a4�/!�n�3!�n�3!�n�\n�wn�wn� h�6h�6h4�v�[�/�Q�[�/�Q�[�/ �r �!�)�)4�.�[�/�Y�[�/�Y�[�/����m �P �P 4��L�[�4�L�[�4�L�[4��(�.3�.�(�.3�.�(�.3@�K�L�4�k�s�L�4�k�s�L�4�k�C�T�T(�y,!�|�5,!�|�5,!�|�"�"�r�"�r�"��2�Z�2�Z�2�I�G�G� �a�a4�/!�n�3!�n�3!�n�\n�wn�wn� h�6h�6h4�v�[�/�Q�[�/�Q�[�/ �r �!�)�)4�.�[�/�Y�[�/�Y�[�/6�.�Q?�`Z;0"2Eu�Tln ]�H � �  o � R ��D� e��jL�9]�Y} +!� 3%3Code Example 18vueanimations<motion.circle :cx="500" :animate="{ cx: [null, 100, 200], transition={{ duration: 3, times: [0, 0.2, 1] }} }" />["vue","animation"]intermediate2025-08-29 11:53:12�| +!k3%3Code Example 17vueanimations<motion.div :animate="{ x: [null, 100, 0] }" />["vue","animation"]intermediate2025-08-29 11:53:12�{ +!e3%3Code Example 16vueanimations<motion.div :animate="{ x: [0, 100, 0] }" />["vue","animation"]intermediate2025-08-29 11:53:12�z +!�3%3Code Example 15vueanimations<AnimatePresence> <motion.div v-if="isVisible" key="modal" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" /> </AnimatePresence>["vue","animation"]intermediate2025-08-29 11:53:12�y +!w3%3Code Example 14vueanimations<motion.div :initial="false" :animate="{ y: 100 }" />["vue","animation"]intermediate2025-08-29 11:53:12�3x +!�?3%3Code Example 13vueanimations<motion.li :initial="{ opacity: 0, scale: 0 }" :animate="{ opacity: 1, scale: 1 }" />["vue","animation"]intermediate2025-08-29 11:53:12�1w +!�;3%3Code Example 12vueanimations<motion.div :animate="{ x: 100 }" :transition="{ ease: 'easeOut', duration: 2 }" />["vue","animation"]intermediate2025-08-29 11:53:12�#v +!�3%3Code Example 11vueanimations<motion.path :initial="{ pathLength: 0 }" :animate="{ pathLength: 1 }" />["vue","animation"]intermediate2025-08-29 11:53:12�u +!� 3%3Code Example 10vueanimations<motion.li :animate="{ backgroundColor: 'var(--action-bg)' }" />["vue","animation"]intermediate2025-08-29 11:53:12�t )!� 3%3Code Example 9vueanimations<motion.ul :initial="{ '--rotate': '0deg' }" :animate="{ '--rotate': '360deg' }" :transition="{ duration: 2, repeat: Infinity }" > <li :style="{ transform: 'rotate(var(--rotate))' }" /> <li :style="{ transform: 'rotate(var(--rotate))' }" /> <li :style="{ transform: 'rotate(var(--rotate))' }" /> </motion.ul>["vue","animation"]intermediate2025-08-29 11:53:12ts )!]%3Code Example 8vueanimations<motion.div :style='{ originX: 0.5 }' />["vue"]intermediate2025-08-29 11:53:12�qr )!�+E%3Code Example 7vueanimations<motion.li :initial='{ transform: "translateX(-100px)" }' :animate='{ transform: "translateX(0px)" }' :transition='{ type: "spring" }' />["vue","animation","spring"]intermediate2025-08-29 11:53:12�!q )!�!/%3Code Example 6vueanimations<motion.button :whileHover="{ scale: 1.1 }" whilePress="{ scale: 0.9 }" />["vue","gesture"]intermediate2025-08-29 11:53:12rp )!Y%3Code Example 5vueanimations<motion.section :style="{ x: -20 }" />["vue"]intermediate2025-08-29 11:53:12�&o )!�'3%3Code Example 4vueanimations<motion.div :initial='{ height: "0px" }' :animate='{ height: "auto" }' />["vue","animation"]intermediate2025-08-29 11:53:12�*n )!�/3%3Code Example 3vueanimations<motion.div :initial='{ x: "100%" }' :animate='{ x: "calc(100vw - 50%)" }' />["vue","animation"]intermediate2025-08-29 11:53:12�m )!]3%3Code Example 2vueanimations<motion.div :animate="{ opacity: 1 }" />["vue","animation"]intermediate2025-08-29 11:53:12il )!O3Code Example 1vueanimationsimport { motion } from "motion-v"["vue"]beginner2025-08-29 11:53:12�k +!�1%3Code Example 55jsanimationsconst animation = animate(element, { opacity: 0 }) animation.stop()["js","animation"]intermediate2025-08-29 11:53:11�j +!�1%3Code Example 54jsanimationsconst animation = animate(element, { opacity: 0 }) animation.cancel()["js","animation"]intermediate2025-08-29 11:53:11�i +!�1%3Code Example 51jsanimationsconst animation = animate(element, { opacity: 0 }) animation.pause()["js","animation"]intermediate2025-08-29 11:53:11�h +!� 1%3Code Example 50jsanimationsconst animation = animate(element, { opacity: 0 }) // Async/await await animation console.log("Animation complete") // Promise animation.then(() => { console.log("Animation complete") })["js","animation"]intermediate2025-08-29 11:53:11 ""�VȀ����0P 0javascript5 1�  c�G I�  1�  c�Giu0u42jc<�$ob< ��s2ppp�V�,��V�,delivr6�7+ �7+ump4�w�D�Ds4�x�a�ast3�=�_�_ F�Z �%�[�q .�G F�Z �%�[ify<7content<Ckeep3�N�_�_ �ws8�j�+�jy5�m��y�<�m��yboard; �'�.frame8�+.��n.�+. s6�2 � � �j� ^": �H �2 � ind6�v�� �8�v�etic6�\ �\owalski3�S�_�_label8��o� �E�led9 �B7rgely<�.r9�st4��a�as6�0 �0test4T�S`T- eZ`T- eZ`T- e� �;�F�& �{�<� �;�Fyout5�   �>  �   0 B   A(" $  >(  + 0@ I;n2&�   �>  group<�0 id5 �F �o;Z<U�u �F �oroot< �8scroll< �eading5�"�D�"�Drn2P�x�  �<�}aB% P�x�  �<�}aB% ed6� �ves5�l�}� 8oV�l�}ft8�D�E�N�+�-�Dgacy6�I �Ingth2�m����Oss< �qons<�t6�X�T�Xhargic9�s6�2 �(�2vel2� �%�*raged<�hi4�8 �K �K �&�Z~:��7�J �)A�%��i5>A&�[~:�@�Y�[`�&�Z~:��7�Jbrary2�g��  �N   �N fetime2�Y��S�C�Hke2�t �x �x !�2,��` #�Z�` #�Z�` #�` 8�Mv(<BI�6+K� �Oy�%  ;�Ez�e �R �L�5�h2%��[ 8�Mv(<BI�6+K� �Oy�% mited6�l �lless6  s<�Cne9 �a1 �"8ar2�u�q�q"�(�J��J��J� �='�@�k5��E���E�ed5�W�B�h�q�W�B�hst6� �04 �C�'�g1� �04ener4�Q�a�a s; !ttle<�Tve< �Dly6�r �rl3��_�_OQ � �Y�O ���=OQ � �Ym5 � ��] � ��]oad6��G��Ging5� �ck;�ping;�kg4�Uc�%]c�%]c�%�5�:�4 �&hJ �5�:ng6 �-��! �-er3�F�_�_ok6���s<�p9 �> ses; �Q�Wt5�Y�1�Y�1ve8� �made6V�#�V�#gic<� in5\-�\\-ke8�1�r� �1s9�7�Rnage<�Yr6e eual8�f�Y�fly4�K�Q�Q�# �#y6�E�G �He� �E�Gp2"F�B�8L�8L�8 F�F��b�B �Bvalue2 E� E�E��brk<�sk8z<{zs9�M�,� ter6 tch<Ses6��<�ing<�t<�y<�cp5�A�D��A�D�eans6# �G �H#surably<�ed8���|�ing< �%(mbership2�Z��thod4�lF� F� F�.ice;�3rointeractions<hd<�2ght<�V^�/rate2 y� y� y�ion2 x� x� x�ni6< ?d�@�c<rror9�Veasing3($�; �9 �9 d3��_�_s3�G�_�_x22�2�2� �Wing9�~odal8�z�=�U  �zern6�+�W�+ifiers3 ��]�]ule6�0 �0s7 : :re2��+�0 �Z�S�A �[�}aB%�e�O�'9�m�>1�j�f��e�y�A�( �N�@ �Z�S�A �[�}aB%�e�O�'st6j�]�e�Pj�]ly9�3tion2^% <% <*�<�<�&D �% <% <*6 VDt*-6 VDt*-6 VDt*D �*% <% <  ++ GF 2- ++ GF 2- +1 C 9 -(L)& q� 1  a*%  uG�/ @,41 V) 8 "   (2   (     $ "�& iew\="visible" :variants\="list" \> <motion.li :variants="item" /> <motion.li :variants="item" /> <motion.li :variants="item" /> </motion.ul\> ) ``` ### Orchestration By default, this children animations will start simultaneously with the parent. But with variants we gain access to new `transition` props like `[when](./vue-transitions#orchestration)`[,](./vue-transitions#orchestration) `[delayChildren](./vue-transitions#orchestration)`[,](./vue-transitions#orchestration) `[staggerChildren](./vue-transitions#orchestration)` [and](./vue-transitions#orchestration) `[staggerDirection](./vue-transitions#orchestration)`. ``` const list = { visible: { opacity: 1, transition: { when: "beforeChildren", staggerChildren: 0.3, // Stagger children by .3 seconds }, }, hidden: { opacity: 0, transition: { when: "afterChildren", }, }, } ``` ### Dynamic variants Each variant can be defined as a function that resolves when a variant is made active. ``` const variants = { hidden: { opacity: 0 }, visible: (index) \=> ({ opacity: 1, transition: { delay: index \* 0.3 } }) } ``` These functions are provided a single argument, which is passed via the `custom` prop: ``` <motion.div v-for\="(item,index) in items" :custom\="index" :variants\="variants" /> ``` This way, variants can be resolved differently for each animating element. Animation controls ------------------ Declarative animations are ideal for most UI interactions. But sometimes we need to take manual control over animation playback. The `[useAnimate](./vue-use-animate)` [hook](./vue-use-animate) can be used for: * Animating any HTML/SVG element (not just `motion` components). * Complex animation sequences. * Controlling animations with `time`, `speed`, `play()`, `pause()` and other playback controls. ``` <script setup\> const \[scope, animate\] = useAnimate() watch(scope, () \=> { const controls = animate(\[ \[scope.current, { x: "100%" }\], \["li", { opacity: 1 }\] \]) controls.speed = 0.8 return () \=> controls.stop() }) </script\> <template\> <ul ref\="scope"\> <li /> <li /> <li /> </ul\> </template\> ``` Animate content --------------- By passing [a](./vue-motion-value) `[MotionValue](./vue-motion-value)` as value prop to a `RowValue` component, it will render its latest value in the HTML. ``` <script setup\> import { useMotionValue, motion, animate, RowValue } from "motion-v" import { onMount, onUnmount } from "vue" const count = useMotionValue(0) let controls onMount(()\=>{ controls = animate(count, 100, { duration: 5 }) }) onUnmount(()\=>{ controls.stop() }) </script\> <template\> <motion.pre\><RowValue :value\="count"/></motion.pre\> </template\> ``` This is more performant than setting Vue state as the `RowValue` component will set `innerHTML` directly. Previous [ Get started with Motion for Vue ](./vue) Next [ Gesture animation ](./vue-gestures) Level up your animations with Motion+ ------------------------------------- More than 180+ Motion examples, exclusive APIs like [Cursor](./cursor), private Discord and GitHub, and powerful VS Code animation editing tools. One-time payment, lifetime updates. ![](https://framerusercontent.com/images/dvcUQX74Mh8wmjKmhIoM2Yli4.png?scale-down-to=1024&width=2000&height=2000) ![](https://framerusercontent.com/images/dvcUQX74Mh8wmjKmhIoM2Yli4.png?scale-down-to=1024&width=2000&height=2000) ![](https://framerusercontent.com/images/dvcUQX74Mh8wmjKmhIoM2Yli4.png?scale-down-to=1024&width=2000&height=2000) [ Get Motion+ ](../plus) [ Get Motion+ ](../plus) [ Get Motion+ ](../plus){"props":[],"methods":[{"name":"play","signature":"play()","description":"play method"},{"name":"pause","signature":"pause()","description":"pause method"}],"types":[]}["vue","animations","animation","gesture","scroll","spring","drag","layout","keyframes","stagger","motion","transition"]2025-08-29 11:42:092025-08-29 11:42:09�ation-based easing curves. However, you can define your own animations via [the](./vue-transitions) `[transition](./vue-transitions)` [prop](./vue-transitions). ``` <motion.div :animate\="{ x: 100 }" :transition\="{ ease: 'easeOut', duration: 2 }" /> ``` Enter animations ---------------- When a `motion` component is first created, it'll automatically animate to the values in `animate` if they're different from those initially rendered, which you can either do via CSS or via [the](./vue-motion-component) `[initial](./vue-motion-component)` [prop.](./vue-motion-component) ``` <motion.li :initial\="{ opacity: 0, scale: 0 }" :animate\="{ opacity: 1, scale: 1 }" /> ``` You can also disable the enter animation entirely by setting `:initial="false"`. This will make the element render with the values defined in `animate`. ``` <motion.div :initial\="false" :animate\="{ y: 100 }" /> ``` Exit animations --------------- You can also easily animate elements as they exit the DOM. In Vue, when a component is removed, it's usually removed instantly. Motion provides [the](./vue-animate-presence) `[AnimatePresence](./vue-animate-presence)` [component](./vue-animate-presence) which keeps elements in the DOM while they perform an `exit` animation. ``` <AnimatePresence\> <motion.div v-if\="isVisible" key\="modal" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" /> </AnimatePresence\> ``` Keyframes --------- Values in `animate` can be set as a series of keyframes. This will animate through each value in sequence. ``` <motion.div :animate\="{ x: \[0, 100, 0\] }" /> ``` We can use a value's current state as the initial keyframe by setting it to `null`. ``` <motion.div :animate\="{ x: \[null, 100, 0\] }" /> ``` This way, if a keyframe animation is interrupting another animation, the transition will feel more natural. By default, each keyframe is spaced naturally throughout the animation. You can override this by setting [the](./vue-transitions#times) `[times](./vue-transitions#times)` [option](./vue-transitions#times) via `transition`. `times` is an array of progress values between `0` and `1`, defining where in the animation each keyframe should be positioned. ``` <motion.circle :cx\="500" :animate\="{ cx: \[null, 100, 200\], transition={{ duration: 3, times: \[0, 0.2, 1\] }} }" /> ``` Gesture animations ------------------ Motion for Vue has shortcut props for animating to/from a target when a gesture starts/ends. ``` <motion.button :initial\="{ opacity: 0 }" :whileHover\="{ backgroundColor: 'rgba(220, 220, 220, 1)' }" :whilePress\="{ backgroundColor: 'rgba(255, 255, 255, 1)' }" :whileInView\="{ opacity: 1 }" /> ``` It supports `hover`, `press`, `drag`, `focus` and `inView`. Variants -------- Setting `animate` as a target is useful for simple, single-element animations. But sometimes we want to orchestrate animations that propagate throughout the DOM. We can do so with variants. Variants are a set of named targets. ``` const variants = { visible: { opacity: 1 }, hidden: { opacity: 0 }, } ``` They're passed to `motion` components via the `variants` prop: ``` <motion.div :variants\="variants" /> ``` These variants can now be referred to by a label, wherever you can define an animation target: ``` <motion.div :variants\="variants" initial\="hidden" animate\="visible" /> ``` You can also define multiple variants via an array: ``` :animate\="\['visible', 'danger'\]" ``` ### Propagation This is already useful for reusing and combining animation targets. But it becomes powerful for orchestrating animations throughout trees. Variants will flow down through `motion` components. So in this example when the `ul` enters the viewport, all of its children with a "visible" variant will also animate in: ``` const list = { visible: { opacity: 1 }, hidden: { opacity: 0 }, } const item = { visible: { opacity: 1, x: 0 }, hidden: { opacity: 0, x: -100 }, } return ( <motion.ul initial\="hidden" whileInVs * [motionValue](./motion-value) * [mapValue](./map-value) * [transformValue](./transform-value) * [springValue](./spring-value) ### Renderers * [attrEffect](./attr-effect) * [propEffect](./prop-effect) * [styleEffect](./style-effect) * [svgEffect](./svg-effect) ### Integrations * [CSS](./css) * [Squarespace](./squarespace) * [Webflow](./webflow) * [WordPress](./wordpress) ### Guides * [FAQs](./faqs) * [Feature comparison](./feature-comparison) * [Improvements to Web Animations API](./improvements-to-the-web-animations-api-dx) * [GSAP migration](./migrate-from-gsap-to-motion) * [Performance](./performance) * [Upgrade guide](./upgrade-guide) Checking Motion+ status… Unlocks for everyone in 124 Days 06 Hours 25 Minutes Or [ Get Motion+ for instant access ](../sponsor) One-time payment, no subscription Already joined? [Login](https://plus.motion.dev/login) Checking Motion+ status… Unlocks for everyone in 124 Days 06 Hours 25 Minutes Or [ Get Motion+ for instant access ](../sponsor) One-time payment, no subscription Already joined? [Login](https://plus.motion.dev/login) Checking Motion+ status… Unlocks for everyone in 124 Days 06 Hours 25 Minutes Or [ Get Motion+ for instant access ](../sponsor) One-time payment, no subscription Already joined? [Login](https://plus.motion.dev/login) Motion's `animateView()` function makes it simple to animate between two different views or layouts. ``` // Crossfade animateView(update).enter({ opacity: 1 }) ``` View animations have a number of unique superpowers: **Layout:** Animate discrete changes in layout, like switching `justify-content` between `"flex-start"` and `"flex-end"`. **Shared element transitions:** Animate entirely different elements across two views. For example, this underline element moves like a single element, but each is generated entirely with CSS on the `.selected` tab. **Page effects:** Add effects to the entire viewport, like wipes, slides and crossfades: `animateView()` is built on the browser's native [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) for small filesize and great performance. It aims to remove the complexity of, and expand upon, the View Transition API: * Cleaner API * Spring animations * Interruption handling/queuing **Important:** `animateView()` is currently in alpha, which means the API might change. It's also exclusive to [Motion+ members](../plus), who are encouraged to help us shape the API via our private Discord. As an early access API, there are many more features to come, such as: * Automatic `view-transition-name` management * Enter/exit animations Previous [ scroll ](./scroll) Next [ Easing functions ](./easing-functions) Level up your animations with Motion+ ------------------------------------- More than 180+ Motion examples, exclusive APIs like [Cursor](./cursor), private Discord and GitHub, and powerful VS Code animation editing tools. One-time payment, lifetime updates. ![](https://framerusercontent.com/images/dvcUQX74Mh8wmjKmhIoM2Yli4.png?scale-down-to=1024&width=2000&height=2000) ![](https://framerusercontent.com/images/dvcUQX74Mh8wmjKmhIoM2Yli4.png?scale-down-to=1024&width=2000&height=2000) ![](https://framerusercontent.com/images/dvcUQX74Mh8wmjKmhIoM2Yli4.png?scale-down-to=1024&width=2000&height=2000) [ Get Motion+ ](../plus) [ Get Motion+ ](../plus) [ Get Motion+ ](../plus)[{"title":"Code Example 1","description":"","code":"// Crossfade\nanimateView(update).enter({ opacity: 1 })","language":"javascript","difficulty":"intermediate","tags":["js","animation"]}]{"props":[],"methods":[{"name":"animateView","signature":"animateView()","description":"animateView method"}],"types":[]}["js","animations","animate","view","animation","gesture","scroll","spring","layout","stagger","motion","transition"]2025-08-29 11:54:092025-08-29 11:54:09� hidden: { opacity: 0 }, } const item = { visible: { opacity: 1, x: 0 }, hidden: { opacity: 0, x: -100 }, } return ( <motion.ul initial\="hidden" whileInView\="visible" :variants\="list" \> <motion.li :variants="item" /> <motion.li :variants="item" /> <motion.li :variants="item" /> </motion.ul\> ) ``` ### Orchestration By default, this children animations will start simultaneously with the parent. But with variants we gain access to new `transition` props like `[when](./vue-transitions#orchestration)`[,](./vue-transitions#orchestration) `[delayChildren](./vue-transitions#orchestration)`[,](./vue-transitions#orchestration) `[staggerChildren](./vue-transitions#orchestration)` [and](./vue-transitions#orchestration) `[staggerDirection](./vue-transitions#orchestration)`. ``` const list = { visible: { opacity: 1, transition: { when: "beforeChildren", staggerChildren: 0.3, // Stagger children by .3 seconds }, }, hidden: { opacity: 0, transition: { when: "afterChildren", }, }, } ``` ### Dynamic variants Each variant can be defined as a function that resolves when a variant is made active. ``` const variants = { hidden: { opacity: 0 }, visible: (index) \=> ({ opacity: 1, transition: { delay: index \* 0.3 } }) } ``` These functions are provided a single argument, which is passed via the `custom` prop: ``` <motion.div v-for\="(item,index) in items" :custom\="index" :variants\="variants" /> ``` This way, variants can be resolved differently for each animating element. Animation controls ------------------ Declarative animations are ideal for most UI interactions. But sometimes we need to take manual control over animation playback. The `[useAnimate](./vue-use-animate)` [hook](./vue-use-animate) can be used for: * Animating any HTML/SVG element (not just `motion` components). * Complex animation sequences. * Controlling animations with `time`, `speed`, `play()`, `pause()` and other playback controls. ``` <script setup\> const \[scope, animate\] = useAnimate() watch(scope, () \=> { const controls = animate(\[ \[scope.current, { x: "100%" }\], \["li", { opacity: 1 }\] \]) controls.speed = 0.8 return () \=> controls.stop() }) </script\> <template\> <ul ref\="scope"\> <li /> <li /> <li /> </ul\> </template\> ``` Animate content --------------- By passing [a](./vue-motion-value) `[MotionValue](./vue-motion-value)` as value prop to a `RowValue` component, it will render its latest value in the HTML. ``` <script setup\> import { useMotionValue, motion, animate, RowValue } from "motion-v" import { onMount, onUnmount } from "vue" const count = useMotionValue(0) let controls onMount(()\=>{ controls = animate(count, 100, { duration: 5 }) }) onUnmount(()\=>{ controls.stop() }) </script\> <template\> <motion.pre\><RowValue :value\="count"/></motion.pre\> </template\> ``` This is more performant than setting Vue state as the `RowValue` component will set `innerHTML` directly. Motion for Vue offers a number of ways to animate your UI. Scaling from extremely simple prop-based animations, to more complex orchestration. Basic animations ---------------- You'll perform almost all animations on [a](./vue-motion-component) `[<motion />](./vue-motion-component)` [component](./vue-motion-component). This is basically a DOM element with motion superpowers. ``` import { motion } from "motion-v" ``` For basic animations, you can update values on [the](./vue-motion-component#animate) `[animate](./vue-motion-component#animate)` [prop](./vue-motion-component#animate): ``` <motion.div :animate\="{ opacity: 1 }" /> ``` When any value in its animate prop changes, the component will automatically animate to the new target. Animatable values ----------------- Motion can animate any CSS value, even those that can't be animated by browsers, like `mask-image`. It supports: * Numbers: `0`, `100` etc. * Strings contai�alue being animated. For instance, physical properties like `x` or `scale` are animated with spring physics, whereas values like `opacity` or `color` are animated with duration-based easing curves. However, you can define your own animations via [the](./vue-transitions) `[transition](./vue-transitions)` [prop](./vue-transitions). ``` <motion.div :animate\="{ x: 100 }" :transition\="{ ease: 'easeOut', duration: 2 }" /> ``` Enter animations ---------------- When a `motion` component is first created, it'll automatically animate to the values in `animate` if they're different from those initially rendered, which you can either do via CSS or via [the](./vue-motion-component) `[initial](./vue-motion-component)` [prop.](./vue-motion-component) ``` <motion.li :initial\="{ opacity: 0, scale: 0 }" :animate\="{ opacity: 1, scale: 1 }" /> ``` You can also disable the enter animation entirely by setting `:initial="false"`. This will make the element render with the values defined in `animate`. ``` <motion.div :initial\="false" :animate\="{ y: 100 }" /> ``` Exit animations --------------- You can also easily animate elements as they exit the DOM. In Vue, when a component is removed, it's usually removed instantly. Motion provides [the](./vue-animate-presence) `[AnimatePresence](./vue-animate-presence)` [component](./vue-animate-presence) which keeps elements in the DOM while they perform an `exit` animation. ``` <AnimatePresence\> <motion.div v-if\="isVisible" key\="modal" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }" /> </AnimatePresence\> ``` Keyframes --------- Values in `animate` can be set as a series of keyframes. This will animate through each value in sequence. ``` <motion.div :animate\="{ x: \[0, 100, 0\] }" /> ``` We can use a value's current state as the initial keyframe by setting it to `null`. ``` <motion.div :animate\="{ x: \[null, 100, 0\] }" /> ``` This way, if a keyframe animation is interrupting another animation, the transition will feel more natural. By default, each keyframe is spaced naturally throughout the animation. You can override this by setting [the](./vue-transitions#times) `[times](./vue-transitions#times)` [option](./vue-transitions#times) via `transition`. `times` is an array of progress values between `0` and `1`, defining where in the animation each keyframe should be positioned. ``` <motion.circle :cx\="500" :animate\="{ cx: \[null, 100, 200\], transition={{ duration: 3, times: \[0, 0.2, 1\] }} }" /> ``` Gesture animations ------------------ Motion for Vue has shortcut props for animating to/from a target when a gesture starts/ends. ``` <motion.button :initial\="{ opacity: 0 }" :whileHover\="{ backgroundColor: 'rgba(220, 220, 220, 1)' }" :whilePress\="{ backgroundColor: 'rgba(255, 255, 255, 1)' }" :whileInView\="{ opacity: 1 }" /> ``` It supports `hover`, `press`, `drag`, `focus` and `inView`. Variants -------- Setting `animate` as a target is useful for simple, single-element animations. But sometimes we want to orchestrate animations that propagate throughout the DOM. We can do so with variants. Variants are a set of named targets. ``` const variants = { visible: { opacity: 1 }, hidden: { opacity: 0 }, } ``` They're passed to `motion` components via the `variants` prop: ``` <motion.div :variants\="variants" /> ``` These variants can now be referred to by a label, wherever you can define an animation target: ``` <motion.div :variants\="variants" initial\="hidden" animate\="visible" /> ``` You can also define multiple variants via an array: ``` :animate\="\['visible', 'danger'\]" ``` ### Propagation This is already useful for reusing and combining animation targets. But it becomes powerful for orchestrating animations throughout trees. Variants will flow down through `motion` components. So in this example when the `ul` enters the viewport, all of its children with a "visible" variant will also animate in: ``` const list = { visible: { opacity: 1 }, 3Ch �  $ ��K��Y�S�d��U�(3�q�C )�I-%3Code Example 6jsgestureshover("div:nth-child(2)", (element, startEvent) => { console.log("Hover started on", element) console.log("At", startEvent.clientX, startEvent.clientY) })["js","gesture"]intermediate2025-08-29 11:54:10{�B )g-3Code Example 5jsgestureshover("a", () => console.log("link hovered"))["js","gesture"]beginner2025-08-29 11:54:10�+�A )�E-3Code Example 4jsgestureshover( document.getElementById("my-id"), () => { console.log("my-id hovered!") } )["js","gesture"]beginner2025-08-29 11:54:10l�@ )I-3Code Example 3jsgesturesimport { hover } from "motion"["js","gesture"]beginner2025-08-29 11:54:10�S�? )�uE%3Code Example 2jsgestureshover("li", (element) => { const animation = animate(element, { rotate: 360 }) return () => animation.stop() })["js","animation","gesture"]intermediate2025-08-29 11:54:10�E�> )�y-3Code Example 1jsgestureshover(".button", (element) => { console.log("hover started on", element) return () => console.log("hover end") })["js","gesture"]beginner2025-08-29 11:54:10x�= )!]-3Code Example 7jsanimationsstagger(0.1, { ease: p => Math.sin(p) })["js","stagger"]advanced2025-08-29 11:54:10q�< )!O-3Code Example 6jsanimationsstagger(0.1, { ease: "easeOut" })["js","stagger"]advanced2025-08-29 11:54:10z�; )!a-3Code Example 5jsanimationsstagger(0.1, { ease: [.32, .23, .4, .9] })["js","stagger"]advanced2025-08-29 11:54:10��: )!w-3Code Example 4jsanimationsstagger(0.1, { startDelay: 0.2 }) // 0.2, 0.3, 0.4...["js","stagger"]advanced2025-08-29 11:54:10��9 )!� E3Code Example 3jsanimationsanimate( "li", { opacity: 1 }, { delay: stagger(0.1) } )["js","animation","stagger"]advanced2025-08-29 11:54:10��8 )!_E3Code Example 2jsanimationsimport { animate, stagger } from "motion"["js","animation","stagger"]advanced2025-08-29 11:54:10�F�7 )!�_E3Code Example 1jsanimationsimport { animate, stagger } from "motion" animate( "li", { opacity: 1 }, { delay: stagger(0.1) } )["js","animation","stagger"]advanced2025-08-29 11:54:10� �6 )!y1%3Code Example 1jsanimations// Crossfade animateView(update).enter({ opacity: 1 })["js","animation"]intermediate2025-08-29 11:54:09�*�5 +!�K3Code Example 33reactanimationsconst transition = { delayChildren: stagger(0.1, { from: "last" }) }["react","animation","stagger"]advanced2025-08-29 11:54:09��4 +!uK3Code Example 32reactanimationsconst transition = { delayChildren: stagger(0.1) }["react","animation","stagger"]advanced2025-08-29 11:54:09�Z�3 +!�qK%3Code Example 31reactanimationsconst container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { delayChildren: 0.5 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( <motion.ul variants={container} initial="hidden" animate="show" > <motion.li variants={item} /> <motion.li variants={item} /> </motion.ul> )["react","animation","stagger"]intermediate2025-08-29 11:54:09��2 +!�7%3Code Example 30reactanimationsconst list = { hidden: { opacity: 0, transition: { when: "afterChildren" } } } const item = { hidden: { opacity: 0, transition: { duration: 2 } } } return ( <motion.ul variants={list} animate="hidden"> <motion.li variants={item} /> <motion.li variants={item} /> </motion.ul> )["react","animation"]intermediate2025-08-29 11:54:09�F�1 +!�IK%3Code Example 29reactanimations<motion.div animate={{ rotate: 180 }} transition={{ repeat: Infinity, repeatDelay: 1 }} />["react","animation","stagger"]intermediate2025-08-29 11:54:09�W�0 +!�7%3Code Example 28reactanimations<motion.div animate={{ rotate: 180 }} transition={{ repeat: 1, repeatType: "reverse", duration: 2 }} />["react","animation"]intermediate2025-08-29 11:54:09�9�/ +!�C7%3Code Example 27reactanimations<motion.div animate={{ rotate: 180 }} transition={{ repeat: Infinity, duration: 2 }} />["react","animation"]intermediate2025-08-29 11:54:09 77�>NU+!�7��� �w33https://motion.dev/docs/animate-viewView animationsjsanimationsDiscover Motion's animateView() for seamless animations between different views or layouts. Learn how it simplifies layout changes, shared element transitions, and page effects using the browser's native View Transition API. Explore its cleaner API, spring animation support, and interruption handling, while noting its current alpha status.[ JS -- ](./quick-start)[ React ----- ](./react)[ Vue ](./vue)[ Tools ](./tools-quick-start) [ ### Get started ](./quick-start)[ ### Examples ](https://examples.motion.dev/js) ### Animation * [animate](./animate) * [scroll](./scroll) * [animateView](./animate-view) Preview * [Easing](./easing-functions) ### Gestures & Events * [hover](./hover) * [inView](./inview) * [press](./press) * [resize](./resize) ### Utils * [delay](./delay) * [frame](./frame) * [mix](./mix) * [splitText](./split-text) Motion+ * [spring](./spring) * [stagger](./stagger) * [transform](./transform) * [wrap](./wrap) ### Motion values * [motionValue](./motion-value) * [mapValue](./map-value) * [transformValue](./transform-value) * [springValue](./spring-value) ### Renderers * [attrEffect](./attr-effect) * [propEffect](./prop-effect) * [styleEffect](./style-effect) * [svgEffect](./svg-effect) ### Integrations * [CSS](./css) * [Squarespace](./squarespace) * [Webflow](./webflow) * [WordPress](./wordpress) ### Guides * [FAQs](./faqs) * [Feature comparison](./feature-comparison) * [Improvements to Web Animations API](./improvements-to-the-web-animations-api-dx) * [GSAP migration](./migrate-from-gsap-to-motion) * [Performance](./performance) * [Upgrade guide](./upgrade-guide) [ JS -- ](./quick-start)[ React ----- ](./react)[ Vue ](./vue)[ Tools ](./tools-quick-start) [ ### Get started ](./quick-start)[ ### Examples ](https://examples.motion.dev/js) ### Animation * [animate](./animate) * [scroll](./scroll) * [animateView](./animate-view) Preview * [Easing](./easing-functions) ### Gestures & Events * [hover](./hover) * [inView](./inview) * [press](./press) * [resize](./resize) ### Utils * [delay](./delay) * [frame](./frame) * [mix](./mix) * [splitText](./split-text) Motion+ * [spring](./spring) * [stagger](./stagger) * [transform](./transform) * [wrap](./wrap) ### Motion value� ���>OK!��3�S�g q33https://motion.dev/docs/staggerstaggerjsanimationsLearn to create staggered animations across multiple elements with Motion's stagger() function. Discover options to customize the starting delay, the stagger origin ('first', 'center', 'last', or an index), and apply easing to the stagger distribution.When animating elements with the [animate](./animate) function, it's possible to stagger animations across them using `stagger()`. ``` import { animate, stagger } from "motion" animate( "li", { opacity: 1 }, { delay: stagger(0.1) } ) ``` Usage ----- Import `stagger` from Motion. ``` import { animate, stagger } from "motion" ``` By passing a duration, in seconds, to `stagger`, the `delay` of each element will be increased by that amount for each animation. ``` animate( "li", { opacity: 1 }, { delay: stagger(0.1) } ) ``` Options ------- `stagger` accepts options via its second argument. ### `startDelay` **Default:** `0` The initial delay from which to calculate subsequent delays. ``` stagger(0.1, { startDelay: 0.2 }) // 0.2, 0.3, 0.4... ``` ### `from` **Default:** `"first"` Specifies which element in the array from which to stagger. Can be set as `"first"`, `"center"`, `"last"`, or a number to specify an index. ### `ease` **Default:** `"linear"` By passing an easing function, staggers can be redistributed through the total stagger time. Any easing function or [Motion easing](./easing-functions) is accepted, like a cubic bezier definition: ``` stagger(0.1, { ease: \[.32, .23, .4, .9\] }) ``` Name of an easing function: ``` stagger(0.1, { ease: "easeOut" }) ``` Or a custom easing function: ``` stagger(0.1, { ease: p \=> Math.sin(p) }) ``` Motion+ examples ---------------- [Motion+](./react-use-velocity) is a one-time payment, lifetime membership that gains you access to the source code of an ever-growing library of [premium examples](https://examples.motion.dev), as well as premium components like `[Cursor](./cursor)` and `[AnimateNumber](./react-animate-number)` and functions like [splitText](./split-text). Examples featuring `stagger` include:[{"title":"Code Example 1","description":"","code":"import { animate, stagger } from \"motion\"\n\nanimate(\n \"li\",\n { opacity: 1 },\n { delay: stagger(0.1) }\n)","language":"javascript","difficulty":"advanced","tags":["js","animation","stagger"]},{"title":"Code Example 2","description":"","code":"import { animate, stagger } from \"motion\"","language":"javascript","difficulty":"advanced","tags":["js","animation","stagger"]},{"title":"Code Example 3","description":"","code":"animate(\n \"li\",\n { opacity: 1 },\n { delay: stagger(0.1) }\n)","language":"javascript","difficulty":"advanced","tags":["js","animation","stagger"]},{"title":"Code Example 4","description":"","code":"stagger(0.1, { startDelay: 0.2 }) // 0.2, 0.3, 0.4...","language":"javascript","difficulty":"advanced","tags":["js","stagger"]},{"title":"Code Example 5","description":"","code":"stagger(0.1, { ease: [.32, .23, .4, .9] })","language":"javascript","difficulty":"advanced","tags":["js","stagger"]},{"title":"Code Example 6","description":"","code":"stagger(0.1, { ease: \"easeOut\" })","language":"javascript","difficulty":"advanced","tags":["js","stagger"]},{"title":"Code Example 7","description":"","code":"stagger(0.1, { ease: p => Math.sin(p) })","language":"javascript","difficulty":"advanced","tags":["js","stagger"]}]{"props":[],"methods":[{"name":"stagger","signature":"stagger()","description":"stagger method"}],"types":[]}["js","animations","stagger","animation","motion"]2025-08-29 11:54:102025-08-29 11:54:10� :animate\="{ opacity: 1 }" /> ``` When any value in its animate prop changes, the component will automatically animate to the new target. Animatable values ----------------- Motion can animate any CSS value, even those that can't be animated by browsers, like `mask-image`. It supports: * Numbers: `0`, `100` etc. * Strings containing numbers: `"0vh"`, `"10px"` etc. * Colors: Hex, RGBA, HSLA. * Complex strings containing multiple numbers and/or colors (like `box-shadow`). * `display: "none"/"block"` and `visibility: "hidden"/"visible"`. ### Value type conversion In general, values can only be animated between two of the same type (i.e `"0px"` to `"100px"`). Colors can be freely animated between hex, RGBA and HSLA types. Additionally, `x`, `y`, `width`, `height`, `top`, `left`, `right` and `bottom` can animate between different value types. ``` <motion.div :initial\='{ x: "100%" }' :animate\='{ x: "calc(100vw - 50%)" }' /> ``` It's also possible to animate `width` and `height` in to/out of `"auto"`. ``` <motion.div :initial\='{ height: "0px" }' :animate\='{ height: "auto" }' /> ``` **Note:** If additionally animating `display` in to/out of `"none"`, replace this with `visibility` `"hidden"` as elements with `display: none` can't be measured. ### Transforms Unlike CSS, Motion can animate every transform axis independently: * Translate: `x`, `y`, `z` * Scale: `scale`, `scaleX`, `scaleY` * Rotate: `rotate`, `rotateX`, `rotateY`, `rotateZ` * Skew: `skew`, `skewX`, `skewY` * Perspective: `transformPerspective` `motion` components have enhanced `style` props, allowing you to set individual transforms: ``` <motion.section :style\="{ x: -20 }" /> ``` Animating transforms independently provides great flexibility, especially around gestures. ``` <motion.button :whileHover\="{ scale: 1.1 }" whilePress\="{ scale: 0.9 }" /> ``` Independent transforms perform great, but Motion's hybrid engine also uniquely offers hardware acceleration by setting `transform` directly. ``` <motion.li :initial\='{ transform: "translateX(-100px)" }' :animate\='{ transform: "translateX(0px)" }' :transition\='{ type: "spring" }' /> ``` **SVG note:** For SVG components, `x` and `y` **attributes** can be set using `attrX` and `attrY`. ### Transform origin `transform-origin` has three shortcut values that can be set and animated individually: * `originX` * `originY` * `originZ` If set as numbers, `originX` and `Y` default to a progress value between `0` and `1`. `originZ` defaults to pixels. ``` <motion.div :style\='{ originX: 0.5 }' /> ``` ### CSS variables Motion for Vue can animate the value of CSS variables, and also use CSS variables as animation targets. #### Animating CSS variables Sometimes it's convenient to be able to animate a CSS variable to animate many children: ``` <motion.ul :initial\="{ '--rotate': '0deg' }" :animate\="{ '--rotate': '360deg' }" :transition\="{ duration: 2, repeat: Infinity }" \> <li :style\="{ transform: 'rotate(var(--rotate))' }" /> <li :style\="{ transform: 'rotate(var(--rotate))' }" /> <li :style\="{ transform: 'rotate(var(--rotate))' }" /> </motion.ul\> ``` **Note:** Animating the value of a CSS variable **always triggers paint**, therefore it can be more performant to use `[MotionValue](./vue-motion-value)`[s](./vue-motion-value) to setup this kind of animation. ### CSS variables as animation targets HTML `motion` components accept animation targets with CSS variables: ``` <motion.li :animate\="{ backgroundColor: 'var(--action-bg)' }" /> ``` #### SVG line drawing Line drawing animations can be created with many different SVG elements using three special properties: `pathLength`, `pathSpacing` and `pathOffset`. ``` <motion.path :initial\="{ pathLength: 0 }" :animate\="{ pathLength: 1 }" /> ``` All three are set as a progress value between `0` and `1`, `1` representing the total length of the path. Path animations are compatible with `circle`, `ellipse`, `line`, `pat�ing a transition -------------------- `transition` can be set on any animation prop, and that transition will be used when the animation fires. ``` <motion.div :whileHover\="{ scale: 1.1, transition: { duration: 0.2 } }" /> ``` ### Value-specific transitions When animating multiple values, each value can be animated with a different transition, with `default` handling all other values: ``` // Motion component <motion.li :animate\="{ x: 0, opacity: 1, transition: { default: { type: 'spring' }, opacity: { ease: 'linear' } } }" /> // animate() function animate("li", { x: 0, opacity: 1 }, { default: { type: "spring" }, opacity: { ease: "linear" } }) ``` ### Default transitions It's possible to set default transitions via the `transition` prop. Either for specific `motion` components: ``` <motion.div :animate\="{ x: 100 }" :transition\="{ type: 'spring', stiffness: 100 }" /> ``` Or for a group of `motion` components [via](./vue-motion-config#transition) `[MotionConfig](./vue-motion-config#transition)`: ``` <MotionConfig :transition\="{ duration: 0.4, ease: 'easeInOut' }"\> <App /> </MotionConfig\> ``` Transition settings ------------------- #### `type` **Default:** Dynamic `type` decides the type of animation to use. It can be `"tween"`, `"spring"` or `"inertia"`. **Tween** animations are set with a duration and an easing curve. **Spring** animations are either physics-based or duration-based. Physics-based spring animations are set via `stiffness`, `damping` and `mass`, and these incorporate the velocity of any existing gestures or animations for natural feedback. Duration-based spring animations are set via a `duration` and `bounce`. These don't incorporate velocity but are easier to understand. **Inertia** animations decelerate a value based on its initial velocity, usually used to implement inertial scrolling. ``` <motion.path :animate\="{ pathLength: 1 }" :transition\="{ duration: 2, type: 'tween' }" /> ``` #### Spring visualiser TimePhysics Duration Bounce Use visual duration ### Tween #### `duration` **Default:** `0.3` (or `0.8` if multiple keyframes are defined) The duration of the animation. Can also be used for `"spring"` animations when `bounce` is also set. ``` animate("ul > li", { opacity: 1 }, { duration: 1 }) ``` #### `ease` The easing function to use with tween animations. Accepts: * Easing function name. E.g `"linear"` * An array of four numbers to define a cubic bezier curve. E.g `[.17,.67,.83,.67]` * A [JavaScript easing function](./easing-functions), that accepts and returns a value `0`\-`1`. These are the available easing function names: * `"linear"` * `"easeIn"`, `"easeOut"`, `"easeInOut"` * `"circIn"`, `"circOut"`, `"circInOut"` * `"backIn"`, `"backOut"`, `"backInOut"` * `"anticipate"` When animating keyframes, `ease` can optionally be set as an array of easing functions to set different easings between each value: ``` <motion.div :animate\="{ x: \[0, 100, 0\], transition: { ease: \['easeIn', 'easeOut'\] } }" /> ``` > _I usually use the_ `_"easeOut"_` _curve for enter and exit transitions. The acceleration at the beginning gives the user a feeling of responsiveness. I use a duration no longer than_ `_0.3_`_/_`_0.4_` _seconds to keep the animation fast._~ Emil Kowalski, [Animations on the Web](https://animations.dev/) #### `times` When animating multiple keyframes, `times` can be used to adjust the position of each keyframe throughout the animation. Each value in `times` is a value between `0` and `1`, representing the start and end of the animation. ``` <motion.div :animate\="{ x: \[0, 100, 0\], transition: { times: \[0, 0.3, 1\] } }" /> ``` There must be the same number of `times` as there are keyframes. Defaults to an array of evenly-spread durations. ### Spring #### `bounce` **Default:** `0.25` `bounce` determines the "bounciness" of a spring animation. `0` is no bounce, and `1` is extremely bouncy. **Note:** `b ''�Q̀����&=ON0itselfL�7jankyE�C�)vascriptB I� V�w[iu0u42jcE�$� obE �� �f�inedN � ##sB�pustC�q .�G .�Ia-ifyE7+�contentEC7keepE�w�m�ZsC�+yC�<boardD �'�. �*�9frameB��n. �v sB� �j� ^": �H "^lu �:`U< indC� �8�y�owalskiM �_�ClL�U abelB�o� �EledB �B7rgelyE�.�rB��fstM �c |testB�& �{�<�youtE�   0 B   A(" $  >(  + 0@ I;n2&� 0 D"  C(" %  >( + 0@ I;n2&� groupE�0 �* idE;Z<U�uAZ>U�arootE �8 �2sJ  �wcrollE � � zyPP "1eadPingJrnG  �0veG�> �infoQ�sD� 8oV9� 8k\ �hingQ�ZftC�E�N�+�-�Q�+��W�8gacyPngthB��O �S � ssE �q �W�^�:�.onsE��jtC�T �OhargicB��}�XsE �( �(velH3�3ragedE�h�NingGiB �)A�%��i5>A&�[~:�@�Y�[`Tg�[�68*g  �:=braryO�\�lfetimeN�Q�N�^keB ;�Ez�e �R �L�5�h2%��[�f�% �O�)�Z2%��) A�U� � �L  �y mitsE�C�)neB �a1 �"8 �l arB �='�@�4 � �8s�e)�kF�"�TedF�q �sstC �C�'�g1� �menerP sD ! !BttleE�T !�veE �D �*lB�O ���=�t��# �"oadingQ #2ckD�p�~ingD�k�ygB�4 �&hJ ��s� 1 _, �<inN�!ngB��!��l�LerM�R/okE��}sE��tpB �> �= �z sesD �Q�W �T�bwH2mL �R adeC� � gicE� �oinE�\�BZkeC�r� � sB�7�R�) �2��mnageE�Y�?mentN�'sP@ualC�YyC �He� �~�p�pN F�valueN E�rginQ*� sQ� kE��skB<{sB�M�,� &�[�j�g}#tchESGedQ�#sE�<�0ingE��hM��@tE��yxM��5!  imumM�GyE��|eaningH�sD �G �H�h �U �.�{surablyE��kedC��|�mentsGringE �%( �(etG�asG �s%mbersN�hipO�O�_thodB�.iceD�3�6rointeractionsEh\dE�2�dleG�AghtE�V^�/�<^�/�~rateN y�ionN x� llisecondsH o�rnM�� #  iB ?d�@�c mumH��%usG�dtesN �##rrorB�V �xF�W�%2�erL�ingB�~odalC�=�U  �U  ernB�WifiedM�+ytargetM �.J)reB9�m�>1�j�f��e�y�A�( �N�@�.�P�t�,�( �P� �W�  ��1%� phingL�,stB�e�P��HlyB�3�%� tionB6T�d � %�;W�E �$ f%E '! /=#&"'LR// yB; D0 3%�KA:#Y" 4 ` #"!N<#' &TO�/E >;�;D 7< "=0'�&H 0 3%�KA $Y" 2 ^"!M>#* &VOq/E >;�;B < )R%   8 .  9`%".t�dGSA#%b4#"%N/$B,  F% <% < �5D  q, |�SgconfigM �* !0 ;  !�% + * 4 "$ T 3*" 9-" - "  &  )       o�1 ""�V̀����0IQ�a0givenE�y�usM�FlobalHXradientsB?eatC �9�M�O ��]idE�#� �7VoupE �Mi �Gi�!edE�H�DwingO�[�ksapNw� uaranteedD�#�&ideH�+ ��sN d�hB�4alfB�`ndL�leEeYrsD�4�B�sE�6�ingM`+�rppenB�4� �&�WsE r� f� rdwareC�TuRsB � �; �{�[ �7K�^�M� �+M�b�9~�} �>veC�& ��$ �v� ��/ �q��eaderF� ightC�C � �L�D��G��R�0��G �_lpN� xC � 2iddenC�b�0)G V�� �n "ghG erB �\0 �w�R�d�+stE*storicalH�nookC�c���/ �{rizontalG�YursN �##verC�z f�&  i�/ %�P     vedP � ndI�DsD��tartI�BwB�? �} ��{everC��*�irefD�[�islaC � 3tmlB"A ����^UelementI�tpsB�J�?L % �"��'�?�U N �%��k'�?��d�0��##k��` �9~=De �$ybridB*=MG&V��OPiC�/ �6�3 convariantsD�� dD�G�S �ealC�NsE�Z�@fB��dpF"�Q'�p��4�E�{ :�NV� �C) �W�%�fuc9�~ :�@: Q�>�-)&�8�\� $�D$ �)�`ramesQ�^mageB=| �8 �sE�L�2 �VgE�E�+ mediatelyB�s� � �1$plementB�~�~�d� ationE�*�ortBW�\X 7� �5y '�:�1 �2�% s eantH�g�tedBQwssibleE�T�:roveE�wmentsN knB2�)�� �"�}uo-E"U`0[IB�GC^�I�)� ��`(�y�7�t=D�c �&'�:Hn+�Bj( �"�`(�o�;�t=D�c �&� �\�|s]r�r"dh� ##>p/B�[7 !2cludeO�z� dE �f �LingH!orporateB �P � �mrectlyE��reasedO:dibleB+��e definitelyB�y�n �?�dpendentB3�H lyB� �)xC� �v�ividualC�.�, lyB�1�ustryJertiaB!�.E�T�W�KE�v&YlB� �finityB �0 �V �j QluenceM�oG�~ �PrmationG0�v �IitialB�y�+�g$�Quro� B1yoZ [57� [1<�8��`�O�bUlyC�AlineE�P�LnerhtmlC�xputD�8�X�6�;�X�AsideQ�tanceB ���u�n�G �4)8�|�I�:�QtN �##lyC�eadD�.�W�<ructionsL� tegrationsN [�ractionE�E�+ sC�R veD��westedE�t�Z ingE�k�QpolatingL�ruptibleE�.� ngC��/� onN*�qsectionG�e A� observerQ �centryQ�0 sG �ZEoB� �Mx$uitiveL�_ lyL�FviewC�  C  '�4 /3 : ,0  =optionsKi>oQ�bsB6�%�~�D �6�N�d@F' /�hn^_�2�AJZhO�L*� �fHF88\$�L �?" � �c-YID~�0 I`MZhO�W(�("�l2F88\$�Lu?" W[ $�K�5@! �iQ�4$ �,5 �. <r�/%h�}P<doneH �P nE �E�+ �A�onE D�, 8�penE���` w��jselectedE�I�AvisibleC�;tB&�>xef� �Z�6 }^�d>�=g\� w�M�M�]!e ,O_:���>"C�""wG�>+�U w�?�� �M�]!Y 0 0_<� ��>"C�""sM�/ ^�d�C�O ��$�ns# �!�%�'HemB�<�~b ��6V�u%sB�f�9�,� rationB �^�6 �sB�x�)�6\�.�5�l�_I� ��7��b�cI�}�@<�T��f�e�j#  % (M0 3 -  " \  . }#� $!R �Q    )Q  E     G �j�c1 !!�Ẁ����2L1�y"#8-(�w)M:M C3�C��?)�*(BBx.$,�ej7�W�X� �;%".@�7�+ a�%;= ��-(BB�.$$�]l9�Y�{X� �;%"*F�P5�D�9�79/5!' I6>^ -  "5"< 0elementsB rw1Z��14�,$�" � V!&E�8(�Ci`J�*}E#�6�% �V!,7�>(�EiJJ�*}E�k�  FJ �QlipseB��Y �/milM �^�CkowalM�ulatePdD�5�8nB�N �&��FY R �)��,�Q �=~ He ablesGtcouragedN� dB�-� "�j#� > �t�V*! � 2 �f� �:$�-� edD�q�tventP�ringD�X�[sB�c�a�o�P�B�r�P�r�jgineC�PQhancedC�'sureE �H �DterC �)B�6 �9�9 �= �{�/ �edF� �>infoQ�nsC��Y%"PU8�O%"L[ �}ireH�e�;lyC�k �qualsD �_ �m�R speciallyC�; vtcB8 ��� �venCq ?lyB�M �+tD !�)�dY !�)�oYA�;sD�- s�'K�Q�0 s�2K�7 $� � targetP�>rO�Z�jyB�'�� 3oneN � ##xampleC��c�x�!sE��m�x�?��*�D�RceedsM�\ptB�lusiveN �=istE�(�ingB�U�>�2�rtC� )�~�t�?�)pandN�gectE�b�^�GriencesDlainingE��hicitlyL��joreB"ressedG�~tendQ �3sDsivelyE��wremelyB�j�N�Bf00B�t�H�e�K�5\akeP*lseC �o�b�d�Q�e�]�I � %qsNe�shionH�tM�]eatureNg�sE�j�P�ingO�x�displacementmapLFedbackB�[ �xlC��T�: ��WingM�JsE�A�' gaussianblurD�J�V turbulenceB� C�[wE�%� ffB�8�-(�VilesizeE�o�U�[`lLXterB� �-  �)+ �:ingP sD��"@(neL�4ishM�kedB�Z��wsB � �areB�4 �&Bu2 �)Bu2�L� [dP��QsMCingD�}�  stC�0 �Q�&�p �T�1�l�ak�tE�c�IxedE�) �v�# �blexE :  .  �ibilityC�:leJipE owC�wtwubberL �ocusC�}�4 �L  �7 �W  edD�?�BllowingG�3rB& #�X�0�-H�y�$2 ;�/?�E �`3` �G �n�i$(4�R&R(R�e)�/OyW �M{D )l�I� |1l�8 �q�t"N�V&T(R�Q)�/OyW �O{2HCd�m&�YRx�V�3F�M� J;>< P�8 ceB�q�f�7everH�qwardB�R �urB�A�"�$�h�/rameN0�rE �{� �aatesE�a�] usercontentN �TeelyC�7omB(R �Bh�7W�;� �j ,���p��Hg`�[N�{�>�8 '��g �P[`�aN�| �4�%��Z  z�0 j fxullD�e j��~�`�s ^�x�OnctionB&�\�?�� �k�  �^/1�4 �$�P9)N�e �q�U�l � �Y+9�'r alityH �: sB�z�% �{*"�� �X�rtherD �Q �Q�TtureE�i�OyiE��ngB �< 7 �cainC�MsD�$�2�Q�aeneralC�#lyLteH� dD�2�5�-ionH�(oorHM stureB�O&"G:Q ?E�X&"G:Q ?E�c �'D%�sB�V�= y��p! |��{!�s #�G<tB�E�,��� ��##�) elementbyidB}�}!�5 ��previousF�sB �*'ithubN�F�i� E T 3= 3"1: 9 $  ( 7   !  3; *�x " �1�-  dK0( !!�Ẁ����2S o�� /�3D�*�%W�� �-�'W�q �'\��SHV0cubicB�F �m�!rrentB��'$a �i�' �| �'��*/lyB�R �j� �m�m�wspeedB �q sorN �A �j �zveB �9� �V�NsC� stomC �0 �8isedE��zeM&xC �@��e� dL�E�s ampingB�K�,x�3%�m�R ��h�gf=�ngerC�`taG�4eE�1�ysN �## eactivatingQ)celerateB�s � sM� ionM�kidesB�y �>larativeC�KfaultB.�>�"p=��O�"%2/��U�+�5 �J{�>��J�v-!�`^'  �M��6� �0P<_ 4y��D$m� $&21"HN R �)�� A)jsB�H��(�&�t transitionB �leatsE�)�ineB�]�i���:@�&F�QC�+�kdB �� �y�m�M �%Hmp�E �<�[�%HsMingB��4tionB�;�_q �# sB�-greeE�E�+layB�5 �6�|� �)� ��C: .�childrenC�[ � .&sO\taB�B��*��OscribesG�Y�LtailedG.�sE �x5�/ �^5ectE��� �(EedD��E��AingQonP �'�J sD�:�[�:�f �rminesB�\�@�4vB�S % �f�C��##�c�seloperB�K �#��CV O �&��)�N �:~ Ee icesPialogE�p�gdE��}ffF �~erenceE� � sE�2� tB�}�L�b� �S� �(� �  \�L �t) lyC�D �%sD��icultE �Wz �=zrectionD �j# �o� �x#�L lockI�lyBs �Y�"� �)  0�} �+sableC�gdD �I �IcordN �2verF� '�\reteN�playC �]�O�KtanceB�W�m�6�fortE�i*�\�e*�FionE�n0�_�j0�IributionO%vB � ($T~�8�_='�F�g�xKA:@� &,AN<`(.�X�M] Z50 � e2�.�{KADA� &AM>b(.�Z�7] Z15 �)6 �<[0"%R�dGS�#%b4#"%N/$�DoC �G�V ��1�8 ��2ZcsB�P� % �(��H�[ T �+��.�W�S �?~ Je umentB|�|!�5 � �C=esE�}�4"�c�4"nD�}� ��rmC2�_"�k�{��q�dnB�h � �|�Y& �. �w�Z&�eHyJ tE��ubleB�tsB�cwnC�x ubp" �x xbp" �ZragC�|&� 6>E n&� 6HF n�Y4#"%  constraintsD�p!�s&# directionlockD �} � elasticD�U�cgableD� �z���edD�y�ingD�D�RmomentumD�`�c transitionD�g�j�B0#"%wbacksE �  � ingB�b �#  �lnL �opsB�=�%�JurationBb� �0&8!^kE #�(�oA/�-/{( �S�9�#�S �%=#'�jNUV �%?><h# % y ��OC1J%. sB �?� �-ingD��l � ��!�v �vcuqx74mh8wmjkmhiom2yli4N �WxN v�ynamicC� �<eB �;�0�z� �}� 6 �bachB�:C6�S�A(�X7.�OB !�e��S�+ !�s��> � sU�VN�!$�+6 �HrlyN�seB�8�?�;D�%�?�3�7]6�#F�% inB �c( � *outB �9�. �5�[outB�v�p(�& � *�5ierB �n�M�+ � � stE�1�-lyC�ngB�8z � �'�U�  ��!�  sB�~ �'yF�O �yditB�;�-�ingN�LffectE�'� Q{sE �l ��b �R �b�6 ortlesslyJitherBo�{�<� �F ^�<[ a�<[�M�+EFo lasticityD�N�\ementB:xI�j0.�oa:*  8   �.!;F L"! !+J  >% ;  % �.&W$%0  )G& �&" 0k =" E 4= ""�V̀����0EI�T�;0borderE�]  �C  radiusE�.�M] �.�7] thB c�=$�z��#�$�}��#�.tomC�H�z �=�]�}�7unceB�f?�2 T$$�n�-  �+ �g V�J$dampingM�  stiffnessM �g"%inessB�^�B�6yB �kG �"/ �CIdGariesM� �F8xB{� � �` �F�+ ~geometryB�shadowE��reakE�i�OokenE��h%wserB (��1�L�4�G>�fW^sB�Xy�R�i1�7�N�S1uildB#uiF�tB�$�A�n�D ;lkB�%��mpM �,$tB �C�+�L�Ca_� �V�g��}�l�R� ]�Z� �* \�O�$tonC �?�&M0V�0 �XP0V�; �P.variantsD��yB$p�+,|�+9��,&x�`�� ��,}?�.�If*/ 4J�c� ��x !�* !U�>�Lq*/ 4>�i�w��F��3�]@  +N��%calcC�VulateOZ dB�B �U* ionsQVlG�x �&backB�,��U �� ��+8!{ Ef)< sB�1� XedG� �emeraB � nB> !H$�!L` N#'vX"�)r�5>@. 3< g*R1k7"#H4�& �4;(?�^�&1H�>,/7"Z$�vD�$;T�>a�)�);?F8$�g5,9& (U+B�^�&1 L�>,#7"\$�xF�;T�>a�%�*P�C�5$3&q~ZU�(�+�N v@[U�; ZcelB�r���q �� hoverP �lingP�sB�notB�(pableBh!!tureD�j�xreE�� ouselG�  �54sesH6penterG�S �A<�r { hallengesE��jngeB�H� �m�; p�,�{ d��f��dB�7 �dp�]�+ �g{�W�'sC_� � �T�p q}� �>�a� ingE��5T���'T�nelE�&� eapE �| �bckingN �##outF�Q�SildD � �h�q � �s�m �Y�FrenC�I�B:; w�i�&(�  z�t� (�"�WkooseM ircinB�f �outB�h �leB �q �X�i =�LoutB�g � lassicallyE�9�eanP>erN$�mupG�vrG�ZickD �O! �R! �S�entxP�TyP�VosesE�f�^odeE �J�W�glorB�s��sB F�r � "�\�*umnsE�$�mE � �d� ��d� �UbiningC�i�I�/eN� sBmittedB� parisonNh�tibleB� �VleteB� Z sB�txB$� x�iityE��l�donentC(%�O#?�@ �E Z[S | �3 �]O/@ C""�E Z[W � �' �]O/@ h( "�z G sC �%H�*�"J�z 2�77�z2�\ 2�E7�u1�H � ��h�x rehensiveB*nferenceE��igM �(urationF�O�Q edB�G�5�FsideredF�� �eoleB�3 �&hJ ��s� 0 _, �<tB@z�_D)Y � C*-/@\)9:M$�&n V*pH�0��`�6�! /2 �+�V[!M �?�Z�6�&6 �l�_ .)& i�,}tQ%antM�draintH�{ �&$ sD�iH"�lM"" refD �3  �@ tainerF�.%�w%7|!#& "%5� �! sE�*�$ingC � �1sG� �HentC�& 8�i ,�[�3inueQ� sH�?ractQ�stG(olB� �Z dlingB   �wsB,�e�J9 > venientC�= CrsionC�!ordinateB�B�4�rnerL�XrectE �l0 �h0edE�@�&ionE �T�v �P�`lyD�  �(� �(sE�v�\uldG�FntC �Q rsesF�reateB�_�f�j�]� �P �p� dB�$ �)� ���$�sG  ingB   � 9�_onL�orE��zossQ�\fadeE �]�& �S��x sE�@�&�A ingE�Y�?ssB@8.  &"?%631- ( V4�  ;�)  "7/@#.9   '  �Q /� 4$    B) &   ""�V̀����0 s28.1J.0� �*�8H�4X9B-Y�z  �'�\ �98:�~BG9 DK'/>� �/ a�l��I  :J�| 0animatableCieB�,      4  + G  B d(]1KQ"#8-�X )9:M$n  ? _ "VK O"g'  NBS 4�T"# E"�Y0$);5( JP(�m��G%(� �' �) H"�d. );5* LR(�Y��G%(�"<  � 0l :#@"� 0adGSA#%�A:/$D<�T�0 k� �ddB�e�~�w3�N�q  }�^ q�PYnumberO�m�}presenceC �"�og�e gsE �#� � �viewN��OK5ingBj�;1�!�rE�7�n�q&$�<1(�=Md>K`�=D"�J3(�?MN>K`�=D�a I�GTonB�4D�^txwz�47� "  V 9          2�5X�WMM&�!�a- �,.li1�WY �K= +�@  n e�[Q� ?Y- �,� k3�!AY �K= +�AT2 ���09�:$ z%Z  $'��4 @j�p sBB  �X)�%n  1��J�K�E 2 �j0+\�N> aR� .�{F">S`�D} �  �r\/n2H-"#5�)  n." �:@�K:MSd�F � �r\/n2H-"#5�+  `�v>�M  ;��?w �6 2$n~� s<e !*otherC���1�C�-ticipateB�l �yB�{�Q,�b�]h Y�k�@� `�[ �p�k��5n�@�* V�c �r�7 7�<�thingEf9Z9[piB�R�/�  �7 <a �K�dI V � <a �K�f&!o~�W   �A~C b sB)�j�?pM�6earB���vliesD�3�6yE�U�Q � ropriateC�g �kreB&g���s )Jl4�A) ��)�& �Rt�Q�ZW��c �O; �]��)�Lv�Q�ZW��e �U�N 3L�!. � �paG �]^nD� ��o�$ �k�ogumentC�*�PoundC�< �R�@ �8�@ �?<rayB�*�:V �,�3 �f<� q� ttefactsP$sB&�yt�h�&Q|�SG& -(�~�+\7�JF�� �(C_1 �F>�ss �-�d.�I �5� /� �f5 p�Bb1 �FC�s P �-�N.�I �7!4r(�&`��x�! � ym �t� �~pectE�T�:sociatedD���yncB� tB.�V �'> --���&�? j�{��&�C N��tachesPQingPKrN P�effectN O�ibuteL �ig sC�o�� b�6*scaleL�KxC�t �H yC�v �IutoC �f  maticN�# allyB �Q�r c�S��B�?�^��6�E�H �#[?4vailableB �^� �waitB � byE�3�xisB���!�<'$�H �H +1D(� !�G'backE�j� �`� groundcolorB �6-(��M �G �^�J �.inB�i �outB�k �outB�j �wardsB�T �rF�Q�SsedB�?�S �[!�s�_�9�Y �\��j frequencyB� �]icC&allyC0sB�heB6P�k}NHwX!.5�0)r�9�4 (v3Qn@<1�'q��K;(\�V _I@9A,|"ZH�'_�<+�i�{��b@M�I�pf5.8&} + �_�V _I�A,p"\H�'a�&+�i�{��* �]$4 qZT0/�M�+ 9@vp+ �$VcauseE �"�P ��PomesC�nforeB�+�Q>�S�;��V�!�childrenC�u �XginningM�EhavingE�c�IorM&urB�4 �c sP&indE �y�7 �_�7ingB��r �3lowB �> �& �KnefitsE�,�, ��, stG�N RtterE �X�  �>� weenB�}�(�.3�)�L�4�k�Y,!�| �8�" ��2�E�g !�n �:n �"h �[�/ �r �yondQ�GzierB�G �n�"gC� indGtB�1�#� lockC��O�5edE�rsE�D�*urB��H��X.&_�c�2%ap � #0�H P   H98C �g 3�   �ness`, `damping` and `mass`, and these incorporate the velocity of any existing gestures or animations for natural feedback. Duration-based spring animations are set via a `duration` and `bounce`. These don't incorporate velocity but are easier to understand. **Inertia** animations decelerate a value based on its initial velocity, usually used to implement inertial scrolling. ``` animate("path", { pathLength: 1 }, { duration: 2, type: "tween" }) ``` ### Tween #### `duration` **Default:** `0.3` (or `0.8` if multiple keyframes are defined) The duration of the animation. Can also be used for `"spring"` animations when `bounce` is also set. ``` animate("ul > li", { opacity: 1 }, { duration: 1 }) ``` #### `ease` The easing function to use with tween animations. Accepts: * Easing function name. E.g `"linear"` * An array of four numbers to define a cubic bezier curve. E.g `[.17,.67,.83,.67]` * A JavaScript easing function, that accepts and returns a value `0`\-`1`. These are the available easing function names: * `"linear"` * `"easeIn"`, `"easeOut"`, `"easeInOut"` * `"circIn"`, `"circOut"`, `"circInOut"` * `"backIn"`, `"backOut"`, `"backInOut"` * `"anticipate"` When animating keyframes, `ease` can optionally be set as an array of easing functions to set different easings between each value: ``` animate( element, { x: \[0, 100, 0\] }, { ease: \["easeIn", "easeOut"\] } ) ``` #### `times` When animating multiple keyframes, `times` can be used to adjust the position of each keyframe throughout the animation. Each value in `times` is a value between `0` and `1`, representing the start and end of the animation. ``` animate( element, { x: \[0, 100, 0\] }, { times: \[0, 0.3, 1\] } ) ``` There must be the same number of `times` as there are keyframes. Defaults to an array of evenly-spread durations. ### Spring TimePhysics Duration Bounce Use visual duration #### `bounce` **Default:** `0.25` `bounce` determines the "bounciness" of a spring animation. `0` is no bounce, and `1` is extremely bouncy. **Note:** `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set. ``` animate( "section", { rotateX: 90 }, { type: "spring", bounce: 0.25 } ) ``` #### `visualDuration` If `visualDuration` is set, this will override `duration`. The visual duration is a time, **set in seconds**, that the animation will take to visually appear to reach its target. In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after. This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations. ``` animate( "section", { rotateX: 90 }, { type: "spring", visualDuration: 0.5, bounce: 0.25 } ) ``` #### `stiffness` **Default:** `1` Stiffness of the spring. Higher values will create more sudden movement. ``` animate( "section", { rotate: 180 }, { type: "spring", stiffness: 50 } ) ``` #### `damping` **Default:** `10` Strength of opposing force. If set to 0, spring will oscillate indefinitely. ``` animate( "section", { rotate: 180 }, { type: "spring", damping: 300 } ) ``` #### `mass` **Default:** `1` Mass of the moving object. Higher values will result in more lethargic movement. ``` animate( "feTurbulence", { baseFrequency: 0.5 }, { type: "spring", mass: 0.5 } ) ``` #### `velocity` **Default:** Current value velocity The initial velocity of the spring. ``` animate( ".my-element", { rotate: 180 }, { type: "spring", velocity: 2 } ) ``` #### `restSpeed` **Default:** `0.1` End animation if absolute speed (in units per second) drops below this value and delta is smaller than `restDelta`. ``` animate( ".my-element", { rotate: 180 }, { type: "spring", restSpeed: 2 } ) ``` #### `restDelta` **Default:** `0.01` End animation if distance is below this value and speed is below `restSpeed`. When animation ends, the spring will end. ``` animate( ".my-element", { x: 200 }, { type: "spri ""�V̀����0\00B�s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$B��HR ��d9In V  v?W� �'W�p�� =]jvM4-��2�g$%9w9,p %2Z� �'b�ny�! ?]kwI1$f�<A- p3 ;�N/%. "S%] !N;0#" #LI )&* @ b�&�00B �9�&1F�7�fB�z�g�7Y1B�S�2 �F6N �##degC�Nf0F�f�6pxC �1<z �=vhC�1Bn�t�3D#X4�)/P/q/1i D( ;,   #<>"~4W�mW�(�br! 5n V.wPk� � x�!` TZ�+��1�n0�L'Sk� �$ x�`kZy�s+:-%�)21�)�Z� H&c'&�}&I �d�.0B��DI�Q�g�G�W  �3�Z0B0�0DGBCd?�1�{G-1>�  �T�RaaN�b�mL�2� `<�8�~�� 0 % m�d�5#"#pxB� �3�.�l�g!�f� �>vwC�W24N �\pxB���M�<24N � ##kbE��w7B�K �r80B�f0" �D6A#%�y/$�;kbB kbG pxE�A�'2B:�%���+"n/�:Z/��T�V�'Qo� �2H�:To� �!2F� 3�Z��#�1Wb�G0C�4 �A�M�W�=0B�]�v�F ��u0N�^pxJ�r20C �j3O�)5B �Z*T �I�w �2,V �##5B�  �q3B� �/�M�;�I�1) �c;Q �!%=& �f;Q �%?�4�#E�)f0F�4�0B�>a�f��  ��I2O�(60B �1�dndegB�A�QdF�wkbB 4M �3�&hD00H�L44B� 5B:� �TW�A�_GX�zt 0 Q@  �"�<�<�/6�c�H�& �4�W�3�4{%�,0B�j�X i�}� 0C�A �ipxE�m�gpxG�hkbQ cpxJ �O67B �L �s700M�`1M5H�J8B��)�&�00H�avwE�x3B�M �t9C�G X�  [� �+0B �}Q �L( �VSdegG�2aBN�v#.a&� �Q1S N?2.�P� ,"$6@;Jn&8�c3/Vji?_(%I��6 3"6�)MM66>t1 T ��Q^> :UZJA6$ �kD* ]� YH5�5:'~M.4 "3"6�M66@P1 X ��=^> :UZJA6$ �mD/ a�d=HD0-G31] K2;4.-I{ +& �<�Sa �(-S$�=X^`W�ObE�%� leC�@�1��4�outE�(� ���^�2veF��a�ysoluteB �j�O��DcademyE��i celeratedGv ionC�U�F�BptB �b��  � ��9 n�@edG �o�sB �7 �^!KDssC�N �##�@�S�cibilityD�!�$ leD �(�) �+�4ordionE�_11�3untE�(�M�(�9rossE �() �"+ �Q� tionC� �!  �$ veC�KN� sE�^�DualD�+�w�.�]ddD�/��=��4�7edE�5�) ventlistenerP�?ingE�)�tionallyB1 �?4�?q ��justB� �qingM�avancedE] 4QtageB(LffectB�P���ZingM�msM �q$terB�A�v�i�P>�'��P childrenC� �bgainB�5stM �-$imsN�`llB�u� h�>�"�IY �2��#\�L�la� U�;owE�]�CingC�*sM�1mostCphaN0�yreadyC�d�v�\ �##soB���B �[xa�8#�R:�l�w��a�j �!K-�o�s�l�a�l`�M��C �s�= �#ternatesB�P � waysC�s �mountG$=,�lnB(�))�P� :V�,�+-�3z�!�T"�R�<+��;{H} %41� �)�Q�T"rR�1-� �;{H} %0��T�<� �]�+$�� '- � �a �dBZ   #� �od�%rT= B�y �~"7'<� # �  ��VNl��. c;#@"TB-9 28.181��(h48H�4X9B-Y�x  �B$ s&�Y�s($'x�*- Y0 f;#@"TB' ? �=   �p0g5  ! l# #N%   f     �R")1 )()  ! Q !~�+tion"`: ``` import { inView } from "motion" ``` `inView` can accept either a selector, `Element`, or array of `Element`s. ``` // Selector inView("section", callback) // Element const box = document.getElementById("box") inView(box, callback) ``` By default, the provided callback will fire just once, when the element first enters the viewport. ``` inView(element, () \=> { console.log("Element has entered the viewport") }) ``` This callback is provided the matched element and [an](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) `[IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)` [object](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) which contains information on the intersection. ``` inView("a", (element, info) \=> { console.log("The link ", element, " has entered the viewport") }) ``` ### Leaving the viewport A function returned from this callback will fire when the element leaves the viewport. ``` inView(element, (element, enterInfo) \=> { const animation = animate(element, { opacity: 1 }) // This will fire when the element leaves the viewport return (leaveInfo) \=> animation.stop() } ) ``` Additionally, the gesture will also continue to fire as the element enters/leaves the viewport. ### Change viewport By default, `inView` detects when the provided element(s) enter/leave the default viewport: The browser window. But it can also detect when the element(s) enter/leave the viewport of a scrollable parent element, by passing that element to the `root` option: ``` const carousel = document.querySelector("#carousel") inView("#carousel li", callback, { root: carousel }) ``` ### Stop detection `inView` returns a function that, when fired, will stop viewport detection. ``` const stop = inView(element, callback) stop() ``` Options ------- ### `root` **Default:** `window` If provided, `inView` will use the `root` element's viewport to detect whether the target elements are in view. Otherwise defaults to the browser window. ``` const carousel = document.querySelector("#carousel") inView("#carousel li", callback, { root: carousel }) ``` ### `margin` **Default:** `0` One or more margins to apply to the viewport. This will extend or contract the point at which the element is considered inside or outside the viewport. `margin` can be defined in pixels or percentages. It can accept up to four values in the order of top/right/bottom/left. ``` inView(element, callback, { margin: "0px 100px 0px 0px" }) ``` Positive values extend the viewport boundaries beyond the root whereas negative values will pull it in. **Note:** For browser security reasons, `margin` [won't take affect within cross-origin iframes](https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-rootmargin) unless `root` is explicitly defined. ### `amount` **Default:** `"some"` The amount of the target element that needs to be within the viewport boundaries to be considered in view. This can be defined as `"some"`, for some of the element, or `"all"`, for all of the element. Additionally, it can be defined as a number proportion between `0` and `1` where `0` is `"some"` and `1` is `"all"`.[{"title":"Code Example 1","description":"","code":"inView(\"#carousel li\", (element) => {\n animate(element, { opacity: 1 })\n})","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 2","description":"","code":"import { inView } from \"motion\"","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 6","description":"","code":"inView(element,\n (element, enterInfo) => {\n const animation = animate(element, { opacity: 1 })\n \n // This will fire when the element leaves the viewport\n return (leaveInfo) => animation.stop()\n }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation","scroll"]}]["js","scroll","inview","animation","gesture","motion"]2025-08-29 11:54:102025-08-29 11:54:10�gth`, `pathSpacing` and `pathOffset`. ``` animate("circle", { pathLength: \[0, 1\] }) ``` All three are set as a progress value between `0` and `1`, `1` representing the total length of the path. Path animations are compatible with `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline` and `rect` elements. ### Single values By passing a `to` and `from` value, the hybrid `animate` will output the latest values to the provided `onUpdate` callback. ``` // Numbers animate(0, 100, { onUpdate: latest \=> console.log(latest) }) // Colors animate("#fff", "#000", { duration: 2 onUpdate: latest \=> console.log(latest) }) ``` ### Motion values By passing hybrid `animate` a [React motion value](./react-motion-value), it'll be automatically updated with the latest values. ``` const x = motionValue(0) animate(x, 200, { duration: 0.5 }) ``` ### Objects Objects can be animated much in the same way as HTML & SVG elements. ``` const values = { x: 100, color: "#f00" } animate(values, { x: 200, color: "#00f" }) ``` Any object can be animated, for instance an `Object3D` from [Three.js](https://threejs.org): ``` const camera = new THREE.Camera() animate(camera.rotation, { y: 360 }, { duration: 10 }) ``` ### Timeline sequences The **hybrid** `animate` function can also accept complex animation sequences. ``` const sequence = \[\] animate(sequence) ``` A **sequence** is an array of `animate` definitions: ``` const sequence = \[ \["ul", { opacity: 1 }, { duration: 0.5 }\], \["li", 100, { ease: "easeInOut" }\] \] ``` Each definition will, by default, play one after the other. It's possible to change when a segment will play by passing [an](https://motion.dev/docs/animate#at) `[at](https://motion.dev/docs/animate#at)` [option](https://motion.dev/docs/animate#at), which can be either an absolute time, relative time, or label. ``` const sequence = \[ \["ul", { opacity: 1 }\], \["li", { x: \[\-100, 0\] }, { at: 1 }\] \] ``` Each segment can accept all `animate` [options](https://motion.dev/docs/animate#options) (except `repeatDelay` and `repeatType`) to control the duration and other animation settings of that segment. ``` const sequence = \[ \["ul", { opacity: 1 }, { duration: 1 }\] \] ``` Both `type: "keyframes"` and `type: "spring"` transitions are supported. It's also possible to override transitions for each value individually. ``` const sequence = \[ \[ "ul", { opacity: 1, x: 100 }, { duration: 1, x: { duration: 2 }} \] \] ``` Sequence durations are automatically calculated, but it's also possible to pass any `animate` [option](../#options) to change playback as a whole: ``` animate(sequence, { duration: 10, repeat: 2 }) ``` You can also define default transition settings to be passed to all items in the sequence with the `defaultTransition` option: ``` animate(sequence, { defaultTransition: { duration: 0.2 } }) ``` Any value supported by `animate` can be animated in sequences, mixing HTML & SVGs, motion values and objects in the same animation: ``` const color = motionValue("rgba(255, 0, 0, 1)") const box = new THREE.BoxGeometry() const sequence = \[ \["li", { x: 100 }\], \[box.position, { y: 10 }\], \[color, "#444"\] \] ``` ### Stagger When animating more than one element, it's possible to stagger animations by passing the `[stagger](./stagger)` function to `delay`. ``` import { stagger, animate } from "motion" animate(".item", { x: 300 }, { delay: stagger(0.1) }) ``` Options ------- Animations can be configured with transition options. By default, provided options will affect every animating value. ``` animate( element, { x: 100, rotate: 0 }, { duration: 1 } ) ``` By providing named transitions, these can be overridden on a per-value basis: ``` animate( element, { x: 100, rotate: 0 }, { duration: 1, rotate: { duration: 0.5, ease: "easeOut" } } ) ``` #### `type` `type` decides the type of animation to use. **Mini** `animate` can either animate with the default keyframes animation, or `spring`: ``` import { animate } f�rom "motion/mini" import { spring } from "motion" animate( element, { transform: "translateX(100px)" }, { type: spring, stiffness: 300 } ) ``` **Hybrid** `animate` has all animation types built-in, and can be set to `"tween"`, `"spring"` or `"inertia"`. **Tween** animations are set with a duration and an easing curve. **Spring** animations are either physics-based or duration-based. Physics-based spring animations are set via `stiffness`, `damping` and `mass`, and these incorporate the velocity of any existing gestures or animations for natural feedback. Duration-based spring animations are set via a `duration` and `bounce`. These don't incorporate velocity but are easier to understand. **Inertia** animations decelerate a value based on its initial velocity, usually used to implement inertial scrolling. ``` animate("path", { pathLength: 1 }, { duration: 2, type: "tween" }) ``` ### Tween #### `duration` **Default:** `0.3` (or `0.8` if multiple keyframes are defined) The duration of the animation. Can also be used for `"spring"` animations when `bounce` is also set. ``` animate("ul > li", { opacity: 1 }, { duration: 1 }) ``` #### `ease` The easing function to use with tween animations. Accepts: * Easing function name. E.g `"linear"` * An array of four numbers to define a cubic bezier curve. E.g `[.17,.67,.83,.67]` * A JavaScript easing function, that accepts and returns a value `0`\-`1`. These are the available easing function names: * `"linear"` * `"easeIn"`, `"easeOut"`, `"easeInOut"` * `"circIn"`, `"circOut"`, `"circInOut"` * `"backIn"`, `"backOut"`, `"backInOut"` * `"anticipate"` When animating keyframes, `ease` can optionally be set as an array of easing functions to set different easings between each value: ``` animate( element, { x: \[0, 100, 0\] }, { ease: \["easeIn", "easeOut"\] } ) ``` #### `times` When animating multiple keyframes, `times` can be used to adjust the position of each keyframe throughout the animation. Each value in `times` is a value between `0` and `1`, representing the start and end of the animation. ``` animate( element, { x: \[0, 100, 0\] }, { times: \[0, 0.3, 1\] } ) ``` There must be the same number of `times` as there are keyframes. Defaults to an array of evenly-spread durations. ### Spring TimePhysics Duration Bounce Use visual duration #### `bounce` **Default:** `0.25` `bounce` determines the "bounciness" of a spring animation. `0` is no bounce, and `1` is extremely bouncy. **Note:** `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set. ``` animate( "section", { rotateX: 90 }, { type: "spring", bounce: 0.25 } ) ``` #### `visualDuration` If `visualDuration` is set, this will override `duration`. The visual duration is a time, **set in seconds**, that the animation will take to visually appear to reach its target. In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after. This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations. ``` animate( "section", { rotateX: 90 }, { type: "spring", visualDuration: 0.5, bounce: 0.25 } ) ``` #### `stiffness` **Default:** `1` Stiffness of the spring. Higher values will create more sudden movement. ``` animate( "section", { rotate: 180 }, { type: "spring", stiffness: 50 } ) ``` #### `damping` **Default:** `10` Strength of opposing force. If set to 0, spring will oscillate indefinitely. ``` animate( "section", { rotate: 180 }, { type: "spring", damping: 300 } ) ``` #### `mass` **Default:** `1` Mass of the moving object. Higher values will result in more lethargic movement. ``` animate( "feTurbulence", { baseFrequency: 0.5 }, { type: "spring", mass: 0.5 } ) ``` #### `velocity` **Default:** Current value velocity The initial velocity of the spring. ``` animate( ".my-element", { rotate: 180 }, { type: "spring", velocity: 2 } ) ``` #### `restSpeed` Q>� � w � � � � m���x���� Q�6�X )!�G3%3Code Example 7vueanimations<motion.path :animate="{ pathLength: 1 }" :transition="{ duration: 2, type: 'tween' }" />["vue","animation"]intermediate2025-08-29 11:54:11�4�W )!�C3%3Code Example 6vueanimations<MotionConfig :transition="{ duration: 0.4, ease: 'easeInOut' }"> <App /> </MotionConfig>["vue","animation"]intermediate2025-08-29 11:54:11�;�V )!�?E%3Code Example 5vueanimations<motion.div :animate="{ x: 100 }" :transition="{ type: 'spring', stiffness: 100 }" />["vue","animation","spring"]intermediate2025-08-29 11:54:11� �U )!�]E%3Code Example 4vueanimations// Motion component <motion.li :animate="{ x: 0, opacity: 1, transition: { default: { type: 'spring' }, opacity: { ease: 'linear' } } }" /> // animate() function animate("li", { x: 0, opacity: 1 }, { default: { type: "spring" }, opacity: { ease: "linear" } })["vue","animation","spring"]intermediate2025-08-29 11:54:11�9�T )!�9G%3Code Example 3vueanimations<motion.div :whileHover="{ scale: 1.1, transition: { duration: 0.2 } }" />["vue","animation","gesture"]intermediate2025-08-29 11:54:11�m�S )!�53%3Code Example 2vueanimations// Motion component <motion.div :animate="{ x: 100 }" :transition="transition" /> // animate() function animate(".box", { x: 100 }, transition)["vue","animation"]intermediate2025-08-29 11:54:11�6�R )!�3G%3Code Example 1vueanimationsconst transition = { duration: 0.8, delay: 0.5, ease: [0, 0.71, 0.2, 1.01], }["vue","animation","stagger"]intermediate2025-08-29 11:54:11��Q )�3Code Example 9jsgesturesconst cancelPress = press(element, callback) cancelPress()["js"]beginner2025-08-29 11:54:10�<�P )�{3Code Example 8jsgesturespress(element, () => { return (endEvent, info) => { console.log("press ", info.success ? "end" : "cancel") } })["js"]beginner2025-08-29 11:54:10�K�O )�3Code Example 7jsgesturespress(element, (element, startEvent) => { console.log("press start") return (endEvent) => { console.log("press end") } })["js"]beginner2025-08-29 11:54:10�^�N )�7%3Code Example 6jsgesturespress("div:nth-child(2)", (element, startEvent) => { console.log("Pressed", element) console.log("At", startEvent.clientX, startEvent.clientY) })["js"]intermediate2025-08-29 11:54:10q�M )g3Code Example 5jsgesturespress("a", () => console.log("link pressed"))["js"]beginner2025-08-29 11:54:10�!�L )�E3Code Example 4jsgesturespress( document.getElementById("my-id"), () => { console.log("my-id pressed!") } )["js"]beginner2025-08-29 11:54:10b�K )I3Code Example 3jsgesturesimport { press } from "motion"["js"]beginner2025-08-29 11:54:10�H�J )�s1%3Code Example 2jsgesturespress("button", (element) => { animate(element, { scale: 0.9 }) return () => animate(element, { scale: 1 }) })["js","animation"]intermediate2025-08-29 11:54:10�<�I )�{3Code Example 1jsgesturespress("button", (element) => { console.log("press started on", element) return () => console.log("press ended") })["js"]beginner2025-08-29 11:54:10�/�H )�3C%3Code Example 6jsscrollinView(element, (element, enterInfo) => { const animation = animate(element, { opacity: 1 }) // This will fire when the element leaves the viewport return (leaveInfo) => animation.stop() } )["js","animation","scroll"]intermediate2025-08-29 11:54:10a�G )K3Code Example 2jsscrollimport { inView } from "motion"["js"]beginner2025-08-29 11:54:10��F )�#1%3Code Example 1jsscrollinView("#carousel li", (element) => { animate(element, { opacity: 1 }) })["js","animation"]intermediate2025-08-29 11:54:10� �E )�-3Code Example 8jsgesturesconst cancelHover = hover(element, callback) cancelHover()["js","gesture"]beginner2025-08-29 11:54:10�>�D )�k-3Code Example 7jsgestureshover("a", () => { console.log("hover start") return (endEvent) => { console.log("hover end") } })["js","gesture"]beginner2025-08-29 11:54:10, "#000", { duration: 2 onUpdate: latest \=> console.log(latest) }) ``` Controls -------- `animate()` returns animation playback controls. These can be used to pause, play, cancel, change playback speed and more. ``` const animation = animate(element, { opacity: 1 }) animation.time = 0.5 animation.stop() ``` ### `duration` Returns the duration of the animation. This is the duration of a single iteration of the animation, without delay or repeat options. It is **read-only**. ``` const animation = animate(element, { opacity: 0 }) const duration = animation.duration ``` ### `time` Gets and sets the current time of the animation. ``` const animation = animate(x, 100, { duration: 1 }) // Set animation time to 0.5 seconds animation.time = 0.5 // Get animation time console.log(animation.time) // 0.5 ``` ### `speed` Gets and sets the current playback speed of the animation. * `1` is normal rate. * `0.5` is half rate. * `2` doubles the playback rate. * `-1` reverses playback. ``` const animation = animate(element, { opacity: 0 }) const currentSpeed = animation.speed // Double current speed animation.speed = currentSpeed \* 2 ``` ### `then()` A `Promise`\-like API that resolves when the animation finishes: ``` const animation = animate(element, { opacity: 0 }) // Async/await await animation console.log("Animation complete") // Promise animation.then(() \=> { console.log("Animation complete") }) ``` **Note:** When an animation finishes, a new `Promise` is created. If the animation is then replayed via the `play()` method, any old callbacks won't fire again. ### `pause()` Pauses the animation until resumed with `play()`. ``` const animation = animate(element, { opacity: 0 }) animation.pause() ``` ### `play()` Plays an animation. * If an animation is **paused**, it will resume from its current `time`. * If an animation has **finished**, it will restart. ``` animation.pause() // Will resume from 1 second animation.time = 1 animation.play() // Will play from start await animation animation.play() ``` ### `complete()` Immediately completes the animation, running it to the end state. ``` animation.complete() ``` ### `cancel()` Cancels the animation, reverting it to the initial state. ``` const animation = animate(element, { opacity: 0 }) animation.cancel() ``` ### `stop()` Stops the animation. Any values being animated via the Web Animations API will be committed to the element via `style`. Stopped animations cannot be restarted. ``` const animation = animate(element, { opacity: 0 }) animation.stop() ``` Previous [ Get started with Motion ](./quick-start) Next [ scroll ](./scroll) Level up your animations with Motion+ ------------------------------------- More than 180+ Motion examples, exclusive APIs like [Cursor](./cursor), private Discord and GitHub, and powerful VS Code animation editing tools. One-time payment, lifetime updates. ![](https://framerusercontent.com/images/dvcUQX74Mh8wmjKmhIoM2Yli4.png?scale-down-to=1024&width=2000&height=2000) ![](https://framerusercontent.com/images/dvcUQX74Mh8wmjKmhIoM2Yli4.png?scale-down-to=1024&width=2000&height=2000) ![](https://framerusercontent.com/images/dvcUQX74Mh8wmjKmhIoM2Yli4.png?scale-down-to=1024&width=2000&height=2000) [ Get Motion+ ](../plus) [ Get Motion+ ](../plus) [ Get Motion+ ](../plus){"props":[],"methods":[{"name":"animate","signature":"animate()","description":"animate method"},{"name":"then","signature":"then()","description":"then method"},{"name":"play","signature":"play()","description":"play method"},{"name":"pause","signature":"pause()","description":"pause method"},{"name":"complete","signature":"complete()","description":"complete method"},{"name":"cancel","signature":"cancel()","description":"cancel method"},{"name":"stop","signature":"stop()","description":"stop method"}],"types":[]}["js","animations","animate","animation","gesture","scroll","spring","keyframes","timeline","stagger","motion","transition"]2025-08-29 11:42:082025-08-29 11:42:08 � \������������~tj`VLB8.$�������������zpf\RH>4*   � � � � � � � � � � � � � v l b X N D : 0 &    � � � � � � � � � � � � � | r h ^ T J @ 6 , "    � � � � � � � � � � � � � x n d Z P F < 2 (   � � � � � � � � � � � � ~ t j ` V L B 8 . $    � � � � � � � � � � � � � z p f \� � �!���� � ����~�}�|�{�z�y�x�w�v �u�t�s�r�q�p�o�n+�m%�l �k �j �i�h �g�f�e�d�c �b �a �` �_ �^ �]�\ �[ �Z �Y�X �W �V �U�T �S�R�Q�P �O�N�M�L �K�J �I�H�G�F�E�D �C�B�A �@�? �>�=�<�;�: �9�8�7 �6�5�4�3'�2!�1 �0 �/ �.�- �,�+�*�)�( �' �& �% �$ �# �"�! �  � �� � � �� ���� �������� � � � � ���� �������~�}�|�{,�z�y�x �w�v�u�t �s�r�q �p�o�n�m �l �k�j�i �h�g �f�e�d%�c �b�a�` ���e������N �5�KBt0option8�`r8��) G chestrate8�O ing8� on8�Digin8 �wx8 � y8�z8 �ther8� ur8�Gt8 �cver8�hride8�Twn8�Rpaint8�trent8�ess8 �&!ed8 �m�Qing8�2th8�clength8 �guse8� erform8�/�*ant8 �z�tspective8�!hysical8�5s8�?ixels8�lace8�2y8� back8 �j% ositioned8�zsible8�[werful8� re8 �esence8 �`ogress8 ��[p8=�:�c�Nagate8�R ion8�~erties8�6s8�(�m�^vided8�6s8 �7�'re8 �|�ract8`  �ZZV2>u1�'/~vE cipes8 �v f8�)erred8�~moved8 �Under8 �4�ed8�peat8�Tlace8�xsolved8�Ps8�turn8�C�c;using8�gba8� 2�n ight8�Eotate8��5 x8�y8�z8�s8�YvpH�XPam8�qe8�,cale8�-�xd�- x8�y8�ing8ope8 � econds8� tion8�0likoff8�rquence8� s8�ries8�t8�,G ��V�status8�;ting8�V�X�,i�2up8�hadow8�ortcut8 �|�uld8�ximple8 �7 ultaneously8�bngle8 �G�skew8 �x8�y8� nappy8�)o8 �Y�Bmetimes8�9��paced8�Meed8 �ring8�e�[tagger8� rt8�as8�te8�'�#�)us8 �: op8 �&>rings8 � yle8�' o; uperpowers85ports8 }�;vg8�f�{�s8 t8 t�ake8�ep8�8rget8g�4+Is8�5\�OXRhan8�mt8r��U�Ne8FCH�EC*# > b �.E\/S+refore8�use8 �y�<y8�{R'�}is8&-�N��*d)�,Dp� ose8 q�ree8�{ough8 ��out8�O��?idy8�1me8�s8�[#o8: QO-9g %8 r�<i:", �;zp8�Cransform8� Lb perspective8�" s8 �* ition8(�cp� �b$!�l  s8 � 2��late8� x8 �]ees8�iggers8�swo8�)ype8��9�Ls8 �=ui8  �Sl8�J!�8(�Qniquely8�Qlike8�pdate8@se8 �0N�(�Nanimate8 �l*d8�veffect8 �Eful8 �D�@ motionvalue8 �L state8�<ing8 �r�0ually8�Xvalue8.Y10�IE.`��s8A*<�\�F8BQhr8�Z9�5 iable8 �D/ s8�# Vnt8 �*n s8> �=   +/:.%e8�.ia8�T5�\�)�'ewport8�"sibility8 �ble8��J. � 7.want8�My8 �9�s8 e8� �. �{hen8W�i�K�Ure8�ras8�@ver8�ich8�i�Sle8�ohover8 �?�ginview8�2`�:tap8 �C�jidth8 �All8 a�E�d4�Q7�e4th8,3�I�) o�'�O>�!x8(�??#;�O+�=� �\y8�@T]#�4ou8"&�n�&7"#��4r8 �G�Xz8�          7                  (   "         $       � ��-������^� +�0syntax?�-t? �Pag? o hat??�@ie?4 /5 . :."/')I-5"n?}re?�*se?�gis?"-I��Uree?�imes?�Fny?9o?$ �Y1s0�+ol?�%s?�ransform? �Vf- s?�Bigger?�Ned?�Kweak?�(o?`ype? �/�5unique?p?�<rls?�hs?�ye?�pd?�ing?� v0? �talue?�\s? �s�Uriable?�Fe?�rsion? ?�/ ia?vewport?�Ts?� code? �,waits?�5ys?ae?� b?�{flow?�'gl?  0hat? �-�nen?�Z�jich?�aidth? �(ll? �'Bth? "cP�LKorking?�ld?�Nry?�Sww?�zx?�Cy? ��arn?iou? $. ?)4i1Yy<r?W+�� z?�             �umber)` and functions like [splitText](./split-text). Examples featuring `press` include: Motion's `press` function detects press gestures, firing events when they start, end or cancel. It's different to native browser events like `"pointerstart"` etc in that `press` automatically filters out secondary pointer events, like right clicks or a second touch point. It also expands on `"click"` by being great for accessibility. Every element with a press gesture automatically becomes keyboard accessible via focus and the enter key. ``` press("button", (element) \=> { console.log("press started on", element) return () \=> console.log("press ended") }) ``` `press` is also: * Clean: Automatically manages event listeners * Convenient: Accepts either elements or CSS selectors for attaching multiple listeners at once * Lazy: Attaches only the listeners needed It can be used to fire any function, but also to start and stop animations: ``` press("button", (element) \=> { animate(element, { scale: 0.9 }) return () \=> animate(element, { scale: 1 }) }) ``` Video overview -------------- Usage ----- ### Import `press` can be imported via `"motion"`. ``` import { press } from "motion" ``` ### Press start `press` can detect press start gestures on either a `Element`/array of elements: ``` press( document.getElementById("my-id"), () \=> { console.log("my-id pressed!") } ) ``` It also accepts CSS selectors to detect press start on multiple elements: ``` press("a", () \=> console.log("link pressed")) ``` The callback is provided the element being pressed, and the triggering `[PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)`: ``` press("div:nth-child(2)", (element, startEvent) \=> { console.log("Pressed", element) console.log("At", startEvent.clientX, startEvent.clientY) }) ``` ### Press end The press start function can optionally return a function that will be called when the press gesture ends: ``` press(element, (element, startEvent) \=> { console.log("press start") return (endEvent) \=> { console.log("press end") } }) ``` The press end callback is passed a second argument, `info`. It currently has one property, `success`. If `true`, the press was successfully completed, like a click. If `false`, the press ended outside the element. ``` press(element, () \=> { return (endEvent, info) \=> { console.log("press ", info.success ? "end" : "cancel") } }) ``` When using keyboard accessibility, `success` will be `false` if the element is blurred while the enter key is held. ### Cancelling gesture `press` returns a function that, when fired, will cancel all active event handlers associated with the gesture. ``` const cancelPress = press(element, callback) cancelPress() ``` Options ------- ### `passive` **Default:** `true` If set to `false`, it'll be possible to call `event.preventDefault()` but the gesture will be less performant. [Learn more about passive events](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive). ### `once` **Default:** `false` If set to `true`, each provided element will fire their gesture only once. Motion+ examples ---------------- [Motion+](./react-use-velocity) is a one-time payment, lifetime membership that gains you access to the source code of an ever-growing library of [premium examples](https://examples.motion.dev), as well as premium components like `[Cursor](./cursor)` and `[AnimateNumber](./react-animate-number)` and functions like [splitText](./split-text). Examples featuring `press` include: Motion's `press` function detects press gestures, firing events when they start, end or cancel. It's different to native browser events like `"pointerstart"` etc in that `press` automatically filters out secondary pointer events, like right clicks or a second touch point. It also expands on `"click"` by being great for accessibility. Every element with a press gesture automatically becomes keyboard accessible via focus and the enter key. ``` press("butt�spring-value) ### Renderers * [attrEffect](./attr-effect) * [propEffect](./prop-effect) * [styleEffect](./style-effect) * [svgEffect](./svg-effect) ### Integrations * [CSS](./css) * [Squarespace](./squarespace) * [Webflow](./webflow) * [WordPress](./wordpress) ### Guides * [FAQs](./faqs) * [Feature comparison](./feature-comparison) * [Improvements to Web Animations API](./improvements-to-the-web-animations-api-dx) * [GSAP migration](./migrate-from-gsap-to-motion) * [Performance](./performance) * [Upgrade guide](./upgrade-guide) Motion's `press` function detects press gestures, firing events when they start, end or cancel. It's different to native browser events like `"pointerstart"` etc in that `press` automatically filters out secondary pointer events, like right clicks or a second touch point. It also expands on `"click"` by being great for accessibility. Every element with a press gesture automatically becomes keyboard accessible via focus and the enter key. ``` press("button", (element) \=> { console.log("press started on", element) return () \=> console.log("press ended") }) ``` `press` is also: * Clean: Automatically manages event listeners * Convenient: Accepts either elements or CSS selectors for attaching multiple listeners at once * Lazy: Attaches only the listeners needed It can be used to fire any function, but also to start and stop animations: ``` press("button", (element) \=> { animate(element, { scale: 0.9 }) return () \=> animate(element, { scale: 1 }) }) ``` Video overview -------------- Usage ----- ### Import `press` can be imported via `"motion"`. ``` import { press } from "motion" ``` ### Press start `press` can detect press start gestures on either a `Element`/array of elements: ``` press( document.getElementById("my-id"), () \=> { console.log("my-id pressed!") } ) ``` It also accepts CSS selectors to detect press start on multiple elements: ``` press("a", () \=> console.log("link pressed")) ``` The callback is provided the element being pressed, and the triggering `[PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)`: ``` press("div:nth-child(2)", (element, startEvent) \=> { console.log("Pressed", element) console.log("At", startEvent.clientX, startEvent.clientY) }) ``` ### Press end The press start function can optionally return a function that will be called when the press gesture ends: ``` press(element, (element, startEvent) \=> { console.log("press start") return (endEvent) \=> { console.log("press end") } }) ``` The press end callback is passed a second argument, `info`. It currently has one property, `success`. If `true`, the press was successfully completed, like a click. If `false`, the press ended outside the element. ``` press(element, () \=> { return (endEvent, info) \=> { console.log("press ", info.success ? "end" : "cancel") } }) ``` When using keyboard accessibility, `success` will be `false` if the element is blurred while the enter key is held. ### Cancelling gesture `press` returns a function that, when fired, will cancel all active event handlers associated with the gesture. ``` const cancelPress = press(element, callback) cancelPress() ``` Options ------- ### `passive` **Default:** `true` If set to `false`, it'll be possible to call `event.preventDefault()` but the gesture will be less performant. [Learn more about passive events](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive). ### `once` **Default:** `false` If set to `true`, each provided element will fire their gesture only once. Motion+ examples ---------------- [Motion+](./react-use-velocity) is a one-time payment, lifetime membership that gains you access to the source code of an ever-growing library of [premium examples](https://examples.motion.dev), as well as premium components like `[Cursor](./cursor)` and `[AnimateNumber](./react-animate-n ""�VȀ����0b�n�A�"�A�"�A5a%�Y 2�  �^�a%�Y 2� 0await9 � by<�3xis8����!�<'�back3� �_�_ �j�  groundcolor4�E�a�a �r  � ��  �6-(��M �G �^ �r  � �� in3�!�_�_�iout3�#�_�_�kout3�"�_�_�jwards9�Tr=�Qsed5 �!�?�S �[!�s �! frequency9�ic5�S��+<&�S��+<ally8/0/s6�! �!s9�he2(�D �C �C .�t�b�H�b�H�b(� #G�S#G�S#G jU8t�=1 �i�R&u3Qn@<�q��9(6P�k}NHwX!.5�0)r�9�4 (v3Qn@<1�'q��K;(\�V _I@9A,|"ZH�'_�<+�i�{��b jU8t�=1 �i�R&u3Qn@<�q��9(cause4��a�a �"�Pome3�))�8)�8)s8� �n� fore5�6�+�Q>�S�;�6children8��u�ginning3�9�_�_having<�cour9�4ind< �y�7ing8�1��r�1low9 �>nefits<�,�, st64�/�x 4�/�xtter5�?�D �X� �?�Dween5 �, �K �(�L�[�}�(�.3�)�L�4�k�Y,!�| �8�" �, �K �(�L�[zier3�G�_�_��G�g8�� �it9�1lock8���O�ed<�rs<�Due8 �X �X r9��Horder<�]  radius<�.�M] th2�f��� �_�_�K�_ c�=$�z��#�K�_tom8�G�H�z�Gunce9�f?�2 Tiness9�^y9 �kGx5�n� ���{� � �`�n� ���es6 � �geometry9�shadow<�reak<�is4��a�aoken<�wser5+ (��1+s8x�Xy�R�i1xuild9#ing5  ui8�x��xt3�8c�~c�~c�$�lk9�%t3�Q�$�=�$�=�$�@�a�a �8� �$��.�!+�9�K��A_| �C�+�L�Ca_� �V�g� �8� �$��.�!+�9�K��A_|ton5 �y  � �>�d �?�&M0V�0 �X �y  � �>�dvariants;�y2�F��4�A>�R�)>�R�)>�R"�'5�)�5�)�5�)6�R�I I��E�/(w�`�N� ��,�]1�)$p�+,|�+9��,&x�`�� ��,}?�.�If*/ 4J�c� ��x6�R�I I��E�/(w�`�N� ��,�]1�)calc8�U�V�Uulated4��a�a�Blback9�,� s9�1ed2�]���M�a�a�{ �{mera9 � n2*�**v**v**:�<"�b�"�b�"�b.�`*#G�+*#G�+*#GXT.�&%9O4b 118IV�F� +�]<?. 3< g*RZ7"#F4�& �9(> !H$�!L` N#'vX"�)r�5>@. 3< g*R1k7"#H4�& �4;(?�^�&1H�>,/7"Z$�vD�$;T�>a�)�);XT.�&%9O4b 118IV�F� +�]<?. 3< g*RZ7"#F4�& �9(cel9�r��s9�not9�( pabilities5�%�'�%�'le7h!ture;�jre<�ses3�k�_�_�D�a�a�> �>dn6 �6 �6 hallenges<�nge3� �H��H��H*�Rc�]c�]c��/�?�C�H� �m�; p�,�{�/�?�Cd3�[�_�_�7 �dp�]�+s4�h>�%>�%>�-�L^_� � �T�p�-�L^ing<��5T�nel<�&eap< �| ckmarkpath8�d �dout=�Qild8�= � �h�q�=ren8�H�`:-�I�B:; w�i�&(� �H�`:-ircin3�$�_�_�fout3�&�`��`��`�O�h�Ole8�| �q �X�i�|out3�%�_�_�glamp2�6�q�qss6� �ically<�9ean4�^�a�ar6�c �cick; �O!oses<�fode2�b��C�<�AG�Qs�$n�I�Q�G�Qs�$n�I�Q�lor4.�v�?��?��?�E� �s���E� s2 � ���J � " F�r � "�\�J � "umns<�$m2 �. �G �L<�b �|*  k| �y � �d�<�b �|*  k|? 'c 9= �1  &m"  K P '"  � N�c $�^ $ %i&M  3' ]BA �> setIsOpen(true)} // This transition will be used when the modal closes transition\={{ type: "spring" }} \> Open </motion.button\> <AnimatePresence\> {isOn && ( <motion.dialog layoutId\="modal" // This transition will be used when the modal opens transition\={{ duration: 0.3 }} /> )} </AnimatePresence\> </\> ``` ### Animating within scrollable element To correctly animate layout within scrollable elements, we need to provide them the `layoutScroll` prop. ``` <motion.div layoutScroll style\={{ overflow: "scroll" }} /> ``` This lets Motion account for the element's scroll offset when measuring children. ### Animating within fixed containers To correctly animate layout within fixed elements, we need to provide them the `layoutRoot` prop. ``` <motion.div layoutRoot style\={{ position: "fixed" }} /> ``` This lets Motion account for the page's scroll offset when measuring children. ### Group layout animations Layout animations are triggered when a component re-renders and its layout has changed. ``` function Accordion() { const \[isOpen, setOpen\] = useState(false) return ( <motion.div layout style\={{ height: isOpen ? "100px" : "500px" }} onClick\={() \=> setOpen(!isOpen)} /> ) } ``` But what happens when we have two or more components that don't re-render at the same time, but **do** affect each other's layout? ``` function List() { return ( <\> <Accordion /> <Accordion /> </\> ) } ``` When one re-renders, for performance reasons the other won't be able to detect changes to its layout. We can synchronise layout changes across multiple components by wrapping them in the `[LayoutGroup component](./react-layout-group)`. ``` import { LayoutGroup } from "motion/react" function List() { return ( <LayoutGroup\> <Accordion /> <Accordion /> </LayoutGroup\> ) } ``` When layout changes are detected in any grouped `motion` component, layout animations will trigger across all of them. ### Scale correction All layout animations are performed using the `transform` style, resulting in smooth framerates. Animating layout using transforms can sometimes visually distort children. To correct this distortion, the first child elements of the element can also be given `layout` property. Open this sandbox and try removing `layout` from the pink dot to see the difference this will make: Transforms can also distort `boxShadow` and `borderRadius`. The `motion` component will automatically correct this distortion on both props, as long as they're set as motion values. If you're not animating these values, the easiest way to do this is to set them via `style`. ``` <motion.div layout style\={{ borderRadius: 20 }} /> ``` Troubleshooting --------------- ### The component isn't animating Ensure the component is **not** set to `display: inline`, as browsers don't apply `transform` to these elements. Ensure the component is re-rendering when you expect the layout animation to start. ### Animations don't work during window resize Layout animations are blocked during window resize to improve performance and to prevent unnecessary animations. ### SVG layout animations are broken SVG components aren't currently supported with layout animations. SVGs don't have layout systems so it's recommended to directly animate their attributes like `cx` etc. ### The content stretches undesirably This is a natural side-effect of animating `width` and `height` with `scale`. Often, this can be fixed by providing these elements a `layout` animation and they'll be scale-corrected. ``` <motion.section layout\> <motion.img layout /> </motion.section\> ``` Some elements, like images or text that are changing between different aspect ratios, might be better animated with `layout="position"`. ### Border radius or box shadows are behaving strangely Animating `scale` is performant but can distort some styles like `border-radius` and `box-shadow`. Motion automatically corrects for scale distor |c� � _ ? � , N +��=w |��h +!�'3Code Example 27reactanimationsitems.map((item, index) => <motion.div custom={index} variants={variants} />)["react"]beginner2025-08-29 11:54:05�k�g +!�K%3Code Example 26reactanimationsconst variants = { hidden: { opacity: 0 }, visible: (index) => ({ opacity: 1, transition: { delay: index * 0.3 } }) }["react","animation","stagger"]intermediate2025-08-29 11:54:05�i�f +!�K3Code Example 25reactanimationsconst list = { visible: { opacity: 1, transition: { when: "beforeChildren", delayChildren: stagger(0.3), // Stagger children by .3 seconds }, }, hidden: { opacity: 0, transition: { when: "afterChildren", }, }, }["react","animation","stagger"]advanced2025-08-29 11:54:05�B�e +!�m%3Code Example 24reactanimationsconst list = { visible: { opacity: 1 }, hidden: { opacity: 0 }, } const item = { visible: { opacity: 1, x: 0 }, hidden: { opacity: 0, x: -100 }, } return ( <motion.ul initial="hidden" whileInView="visible" variants={list} > <motion.li variants={item} /> <motion.li variants={item} /> <motion.li variants={item} /> </motion.ul> )["react"]intermediate2025-08-29 11:54:05�\�d +!� 7%3Code Example 23reactanimationsconst [status, setStatus] = useState<"inactive" | "active" | "complete">( "inactive" ); <motion.div animate={status} // pass in our React state! variants={{ inactive: { scale: 0.9 color: "var(--gray-500)" }, active: { scale: 1 color: "var(--blue-500)" }, complete: { scale: 1 color: "var(--blue-500)" } }} > <motion.svg path={checkmarkPath} variants={{ inactive: { pathLength: 0 }, active: { pathLength: 0 }, complete: { pathLength: 1} }} /> </motion.div>["react","animation"]intermediate2025-08-29 11:54:05x�c +!K73Code Example 22reactanimationsanimate={["visible", "danger"]}["react","animation"]beginner2025-08-29 11:54:05��b +!�+3Code Example 21reactanimations<motion.div variants={variants} initial="hidden" whileInView="visible" />["react"]beginner2025-08-29 11:54:05o�a +!Q3Code Example 20reactanimations<motion.div variants={variants} />["react"]beginner2025-08-29 11:54:05��` +!�3%3Code Example 18reactanimations<motion.button initial={{ opacity: 0 }} whileHover={{ backgroundColor: "rgba(220, 220, 220, 1)" }} whileTap={{ backgroundColor: "rgba(255, 255, 255, 1)" }} whileInView={{ opacity: 1 }} />["react","gesture"]intermediate2025-08-29 11:54:05�Z�_ +!�7%3Code Example 17reactanimations<motion.circle cx={500} animate={{ cx: [null, 100, 200], transition: { duration: 3, times: [0, 0.2, 1] } }} />["react","animation"]intermediate2025-08-29 11:54:05��^ +!i73Code Example 16reactanimations<motion.div animate={{ x: [null, 100, 0] }} />["react","animation"]beginner2025-08-29 11:54:05��] +!c73Code Example 15reactanimations<motion.div animate={{ x: [0, 100, 0] }} />["react","animation"]beginner2025-08-29 11:54:05��\ +!� 7%3Code Example 14reactanimations<AnimatePresence> {isVisible && ( <motion.div key="modal" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} /> )} </AnimatePresence>["react","animation"]intermediate2025-08-29 11:54:05��[ +!s7%3Code Example 13reactanimations<motion.div initial={false} animate={{ y: 100 }} />["react","animation"]intermediate2025-08-29 11:54:05�5�Z +!�;7%3Code Example 12reactanimations<motion.li initial={{ opacity: 0, scale: 0 }} animate={{ opacity: 1, scale: 1 }} />["react","animation"]intermediate2025-08-29 11:54:05�3�Y +!�77%3Code Example 11reactanimations<motion.div animate={{ x: 100 }} transition={{ ease: "easeOut", duration: 2 }} />["react","animation"]intermediate2025-08-29 11:54:05��X +!� 73Code Example 10reactanimations<motion.li animate={{ backgroundColor: "var(--action-bg)" }} />["react","animation"]beginner2025-08-29 11:54:05�tion on these properties, but they must be set on the element via `style`. ``` <motion.div layout style\={{ borderRadius: 20 }} /> ``` ### Border looks stretched during animation Elements with a `border` may look stretched during the animation. This is for two reasons: 1. Because changing `border` triggers layout recalculations, it defeats the performance benefits of animating via `transform`. You might as well animate `width` and `height` classically. 2. `border` can't render smaller than `1px`, which limits the degree of scale correction that Motion can perform on this style. A work around is to replace `border` with a parent element with padding that acts as a `border`. ``` <motion.div layout style\={{ borderRadius: 10, padding: 5 }}\> <motion.div layout style\={{ borderRadius: 5 }} /> </motion.div\> ``` Technical reading ----------------- Interested in the technical details behind layout animations? Nanda does an incredible job of [explaining the challenges](https://www.nan.fyi/magic-motion) of animating layout with transforms using interactive examples. Matt, creator of Motion, did a [talk at Vercel conference](https://www.youtube.com/watch?v=5-JIu0u42Jc&ab_channel=Vercel) about the implementation details that is largely up to date. Differences with the View Transitions API ----------------------------------------- More browsers are starting to support the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API), which is similar to Motion's layout animations. ### Benefits of View Transitions API The main two benefits of View Transitions is that **it's included in browsers** and **features a unique rendering system**. #### Filesize Because the View Transitions API is already included in browsers, it's cheap to implement very simple crossfade animations. However, the CSS complexity can scale quite quickly. Motion's layout animations are around 12kb but from there it's very cheap to change transitions, add springs, mark matching #### Rendering Whereas Motion animates the elements as they exist on the page, View Transitions API does something quite unique in that it takes an image snapshot of the previous page state, and crossfades it with a live view of the new page state. For shared elements, it does the same thing, taking little image snapshots and then crossfading those with a live view of the element's new state. This can be leveraged to create interesting effects like full-screen wipes that aren't really in the scope of layout animations. [Framer's Page Effects](https://www.framer.com/academy/lessons/page-effects) were built with the View Transitions API and it also extensively uses layout animations. The right tool for the right job. ### Drawbacks to View Transitions API There are quite a few drawbacks to the API vs layout animations: * **Not interruptible**: Interrupting an animation mid-way will snap the animation to the end before starting the next one. This feels very janky. * **Blocks interaction**: The animating elements overlay the "real" page underneath and block pointer events. Makes things feel quite sticky. * **Difficult to manage IDs**: Layout animations allow more than one element with a `layoutId` whereas View Transitions will break if the previous element isn't removed. * **Less performant:** View Transitions take an actual screenshot and animate via `width`/`height` vs layout animation's `transform`. This is measurably less performant when animating many elements. * **Doesn't account for scroll**: If the page scroll changes during a view transition, elements will incorrectly animate this delta. * **No relative animations:** If a nested element has a `delay` it will get "left behind" when its parent animates away, whereas Motion handles this kind of relative animation. * **One animation at a time**: View Transitions animate the whole screen, which means combining it with other animations is difficult and other view animations impossible. All-in-all, each system offers something different and each might be a better fit for your needs. In the future it might be that Motion also offers an API based on View Transitions API.[{"title":"Code Example 1","description":"","code":"<motion.div layout />","language":"react","difficulty":"beginner","tags":["react","layout"]},{"title":"Code Example 2","description":"","code":"<motion.div\n layout\n style={{ justifyContent: isOn ? \"flex-start\" : \"flex-end\" }}\n/>","language":"react","difficulty":"intermediate","tags":["react","layout"]},{"title":"Code Example 3","description":"","code":"<motion.li layoutId=\"item\" />","language":"react","difficulty":"beginner","tags":["react","layout"]},{"title":"Code Example 4","description":"","code":"<motion.div layout style={{ width: isOpen ? \"80vw\" : 0 }} />","language":"react","difficulty":"intermediate","tags":["react","layout"]},{"title":"Code Example 5","description":"","code":"isSelected && <motion.div layoutId=\"underline\" />","language":"react","difficulty":"beginner","tags":["react","layout"]},{"title":"Code Example 6","description":"","code":"<AnimatePresence>\n {isOpen && <motion.div layoutId=\"modal\" />}\n</AnimatePresence>","language":"react","difficulty":"beginner","tags":["react","animation","layout"]},{"title":"Code Example 7","description":"","code":"<motion.div layout transition={{ duration: 0.3 }} />","language":"react","difficulty":"intermediate","tags":["react","animation","layout"]},{"title":"Code Example 8","description":"","code":"<motion.div\n layout\n animate={{ opacity: 0.5 }}\n transition={{\n default: { ease: \"linear\" },\n layout: { duration: 0.3 }\n }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation","layout"]},{"title":"Code Example 9","description":"","code":"<>\n <motion.button\n layoutId=\"modal\"\n onClick={() => setIsOpen(true)}\n // This transition will be used when the modal closes\n transition={{ type: \"spring\" }}\n >\n Open\n </motion.button>\n <AnimatePresence>\n {isOn && (\n <motion.dialog\n layoutId=\"modal\"\n // This transition will be used when the modal opens\n transition={{ duration: 0.3 }}\n />\n )}\n </AnimatePresence>\n</>","language":"react","difficulty":"intermediate","tags":["react","animation","spring","layout"]},{"title":"Code Example 10","description":"","code":"<motion.div layoutScroll style={{ overflow: \"scroll\" }} />","language":"react","difficulty":"beginner","tags":["react","scroll","layout"]},{"title":"Code Example 11","description":"","code":"<motion.div layoutRoot style={{ position: \"fixed\" }} />","language":"react","difficulty":"beginner","tags":["react","layout"]},{"title":"Code Example 12","description":"","code":"function Accordion() {\n const [isOpen, setOpen] = useState(false)\n \n return (\n <motion.div\n layout\n style={{ height: isOpen ? \"100px\" : \"500px\" }}\n onClick={() => setOpen(!isOpen)}\n />\n )\n}","language":"react","difficulty":"intermediate","tags":["react","layout"]},{"title":"Code Example 14","description":"","code":"import { LayoutGroup } from \"motion/react\"\n\nfunction List() {\n return (\n <LayoutGroup>\n <Accordion />\n <Accordion />\n </LayoutGroup> \n )\n}","language":"react","difficulty":"beginner","tags":["react","layout"]},{"title":"Code Example 15","description":"","code":"<motion.div layout style={{ borderRadius: 20 }} />","language":"react","difficulty":"intermediate","tags":["react","layout"]},{"title":"Code Example 16","description":"","code":"<motion.section layout>\n <motion.img layout />\n</motion.section>","language":"react","difficulty":"beginner","tags":["react","layout"]},{"title":"Code Example 18","description":"","code":"<motion.div layout style={{ borderRadius: 10, padding: 5 }}>\n <motion.div layout style={{ borderRadius: 5 }} />\n</motion.div>","language":"react","difficulty":"intermediate","tags":["react","layout"]}]["react","layout","animations","animation","scroll","spring","motion","transition"]2025-08-29 11:54:062025-08-29 11:54:06 ""�VĀ����0�0class� �{�{ically�#�x�x�A�^�^eanup �z� � r�g�{�{�^� � ick�9!�$!�$!�t!�1!�1!�u��I��I�oses�P�x�x��^�^ode.�1�QsP�QsP�Qs�c0�(n�I�&n�I�&n�I$�s��Z��Z�'�1�:�0�h/ �Qm-�:0�=�s�c�Z�i�m�<lor(�/� �a� �a� (�w������(�z�zs�N�{�{�r "�N "�N "�J�r�C�r�C�r�+ "�O "�O "�F���L�c�cumns��x�x�:�^�^m6�&�b ��b ��b �?*�* �6* �6* �a*� | �Y| �Y| ��c�y�y�m �E �; �N$� �d��d��d����� �H �~ �n$�(�d�|�d�|�d�% �t����C �Gbines�����{�{ing�p�y�y� �z�z�3�x�x�Q�^�^es�t����{�{��p�p��3�3mitted�$�3�3panies�!��risonh�h�h�h�tible�Z�p�p��3�3�x�z�zlete�u����p�p�)�L�L"� Z�H Z�H Z ly�,�� s�x�3�3x�<�{�{"�w�w�w�w�w�w$�#�3�3"�9x�i�x�i�x�iity�p�x�x��^�^onentV1�4� &��4 &��4 &�d-��~|'�W�A|'�W�A|'�Wv1�4�'�h�^5)�h�^5)�h�^5 x-�� �O#?�@*�O#?�@*�O#?�@h1�4��E Z[S |�G�E Z[S |�G�E Z[S |b1�4�6 �]O/�O �]O/�O �]O/\1�4�C C"�\ C"�\ C"h-�|�E Z[W ��F�E Z[W ��F�E Z[W �^-��  �]O/�- �]O/�- �]O/R-��& h�+ h�+ hR1�4�+ "�z�] "�z�] "�z�:81�4�#G�:G�:G�b s$/�7�X���SL)��> �y�C �y�C �yT/�7�,H�*�`�*�j�H�*�`�*�j�H�*�`�*�j�6L )��H�*�"J�z�,H�*�"J�z�,H�*�"J�z$/�7�:�77j�77j�770/�7�2�\�n2�\�n2�\�@ /�7$)���E7i�E7i�E7()��_1�H�i1�H�i1�H )�*/�7� �|�|�R$/�7��n�n�msable �r rehensive*nference��x�x�$�^�^igD�7�7���K�{�{"<���G�+�G�+�G D�7 <� D�7 D�7 D�7 <� <� <� D�7$D�7��z�z�Buration �9���s�c�c e �F d�(���u�p�p�K�3�3�9�G�G�0��sidered ����<�c�cole����[�p�p4�7 �&hJ �O �&hJ �O �&hJ .��s��x�s��x�s�t�}���]�<�A�<�A�<�K�p�pF�MXx G+n@�Xx G+n@�Xx G+n@�>�~�_D)Y � C*-/@\)9:M$��_D)Y � C*-/@\)9:M$��_D)Y � C*-/@\)9:M$:�Hn V*pH�Pn V*pH�Pn V*pH"���E��E��J�x�x@� �! /2�k�! /2�k�! /2�/�V�6�V�6�V.�_!M �G!M �G!M �a�a�a�|�^�^.�X�&6�l�&6�l�&6�V��6�y�_ .)&�_ .)&�_ .)&ant�N��raint ��G�G�$�]$�]$ s"�SH"�TH"�TH""�M""�VM""�VM"" ref� �H �H �b �U �U tainer ���v%�{%7|!#& "%5� %7|!#& "%5� %7|!#& "%5�5�c�c� �h�h s��x�x�F�^�^ing�L�{�{�m �n �n �& �o �o �5� � s�J�p�p�� � ent��y�y�H�z�z�"�i��i��i�N�[��[��[inues �C�G�Grast �,� � ol�Q�y�y��3�3�|�z�z �e �ling�n�y�y ��3�3��z�zs � �7�>�{�{ ��<� �7�9 7 �o9 7 �o9 7 ,�i�.�.B���Y9 > �f9 > �f9 > � �7�Y � �7 � �7 �� �� �� � �7 � �7venient�&�y�y�_�z�zrsion� �y�y�C�z�zordinate�F�3�3�8�G�G���pilot �Ty�}���q�{�{� �p�p �e �x �7re����.�p�pner�B��rect�V0�J0�J0� 0�00�00ed�*�x�x�H�^�^ion�}�p�p�>�v��v��v�r�`��`��`ly�p�p�p�u�T�T�p(�R(�R(�0�a�a�"(�8(�8(s�`�x�x�~�^�^uld �J� � nt�? �h �h �s �e �e down �Ler�=�y5�,;Q�`-,+%H @�W�$� 5N� )%f392'�4(9 /<$ ""�VĀ����0��y0course�&���s�p�ps�5�5��y�y�5�5�5�6���5�5reate�2D�M�o��o��o$��y�y�@�c�3�3��z�z �:�T�x�x� ��a� � � �G�G�r�^�^ �!$�Z� �t� �t� �d�)�{�{�Z�y�y�(�3�3�K� �r� �r� �{�T�T�y���(� � �3�c�cs  � � � ing ��3�3�x���=�G�G��c�con�j��or�~�x�x��^�^ossfade�G�&�T�&�T�&�u��J��J� s�*�x�x�H�^�^ ing�C�x�x�a�^�^ss�,��0\�Q�J,�o�J,�o�J,�i�p�p^�X�� /s�_�� /s�_�� /sB\�g8.  � 8.  � 8.  d ��� /�3� �� /�3� �� /�3(���D��D�0�W��W��W��\�2\��; �/ �/ (�O��F��F�(�IW�q�W�q�W�q���ube��{�{ic�J�3�3 �W��rrent��v��v��v.�"�'$a�}�'$a�}�'$a� �'�U�'�U�'�f���'�c'�c'��G�G����ly� ���4��\��\��V�3�3��j�l�j�l�j�q�x�x�9�m�v�m�v�m��^�^speed�u �+ �+ sor&P�6�� � �,�8�o�o�N&H��>�d�d�&P�6�f    �1H��N,P�6�     aP�6�CP�6�  �4 �jH��H��xH��P�6�`P�6�/ve�|���=��$��$� "�@�N��N��Ns�6�y�y�/�z�zstom�) �q �q �O�R �p �p  �;ised�z�x�x�*�^�^ ing��{�{zex�g�v�v�b�w�w��x�x�$�^�^.�O� � � � � d4�/�s ��s ��s amping(�O�,x�~�,x�~�,x���.%�q�R �T�R �T�R �!�c�c:�R�gf=��R�gf=��R�gf=�nger��y�y��z�zta �8� � e��x�x�9�^�^ ecelerate�w�3�3 �z�� s�p�� ion�U��ides�}�3�3 �(��larative�B�y�y�+�m�z�z �B �kfault�z0�B0�B04�y��)��,��)��,��)���B�"p=��O�"%2/��"p=��O�"%2/��"p=��O�"%2/4�2�U�+�5�K�U�+�5�K�U�+�5�4{�[{�[{�(�x�x���:�N�v-!��v-!��v-!:�d^' �w^' �w^' �o��]��]��X�^�^�7�c�c�P�NP�NP�:�I 4y��D$m� $&21"HN� 4y��D$m� $&21"HN� 4y��D$m� $&21"HN� s�!����{�{�n�p�p��y�y�L�3�3�<�z�z�,� � ��� transition�p�/�/eats��x�x�1�^�^ine(�:�8!��8!��8!(�a�i��6�i��6�i�"�3�:�3�:�3�:�*�T�T(�*F�Q�iF�Q�iF�Q�e�a�a����U��config�)�p�pd�J���"�c��c��c���/��/����i��i��W�T�T�7�x�x�)H�DH�DH�q�G�G��a�a�g�^�^�&�[�&�[�&�[ nuxtconfig�{�p�ps�K����p�p �n��ing�[�y�y��3�3�V�z�ztion(�?�_q �\�_q �\�_q s�1�3�3gree�/�x�x�M�^�^s�0�{�{lay&.��Z�Z�Z��y�yP.�� �6�|�Q �6�|�Q �6�|�B�z�z �k��x�x.�.��1�^�^N�~��C: 8��C: 8��C: children�b�m�m�}�z�z (�w.&�.&�.&ta�F�3�3� �x�x�.�G�G�'�^�^�9��scribes �]� � �6��igned�&���c�p�ptailed .� � � s�b5�E5�E5�3�G�G�5�+5�+5ect��x�x�:�^�^ed�{�T�T�/�x�x�A�a�a�c�^�^s"�y:�[�C:�[�C:�["�4:�f�E:�f�E:�frmines�`�3�3�D�G�G���v�7�,����O�d�d��_�p�p �7(��B %� %� % ��7�(�7�;�7�z � � � � � �7"�7� �C�>�C�>�Celoper�b���y�{�{�O�3�3� ��D��D��-�x�x�Z � � �S�G�G�H��F��F��K�^�^ment�^� � ��{�{�a�p�pialog�Z�x�x� �^�^d��x�x��^�^ff �h� � erence�t�x�x�(�^�^ s��x�x�:�^�^ t�-��"��^�~�^�~�^�5N�-Y3)�Gu\�a1, Jj 2�S�� !#  �/76',)&�/q' ""�VĀ��� �0��4�G�4�G�4��3�3(�n�b���b���b��=� �o� �o� *�5�(� /�(� /�(� �t���F�L�5�L�5�L 0differently�;�y�y�f�z�z ���s��T�T�?�a�aicult�Az�z�z�_z�fz�fzrection�T#�3#�3#�Y������#�@#�@#�n�c�c lock �2�a�aly�p����~��~��~�9�p�p�B�"�Y�"�Y�"�w�3�3�{�"�Z�"�Z�"��x�x��)�k�)�k�)�� � �4�G�G��^�^�=�+�:�+�:�+sable�k���+�p�p��y�y� �z�zd�I� I� I�;I�I�Icord����+�4�*�=�J��7�m�]�T�c�g�6ver�4�{�{�u��'�~�c�cplay�]�]�]�:]�]�]�9�x�x�m�^�^t�X�{�{ance�[�3�3�q� � �:�G�G�P��ort"�S*�\�v*�\�v*�\"�*�F�r*�F�r*�Fion"�X0�_�m0�_�m0�_"� 0�I�i0�I�i0�Iv4�4�(*&&�v�(*&&�v�(*&&:�L7�$09 � 7�$09 � 7�$09 v�=~�8�D_>$�F90�X�~�8�D_>$�F90�X�~�8�D_>$�F90�X� (� (� (j�v~�8�_='�F�g�~�8�_='�F�g�~�8�_='�F�gF�bKA:@� �;KA:@� �;KA:@� p�,AN<`(.�X�M] �,AN<`(.�X�M] �,AN<`(.�X�M] @�D50 � e2�50 � e2�50 � e2�2� � F�KADA� �=KADA� �=KADA� p�@AM>b(.�Z�7] �%AM>b(.�Z�7] �%AM>b(.�Z�7] @�|15 �)6�15 �)6�15 �)6�&[�6[�6[�� %R�dGS�#%b4#"%N/$�c%R�dGS�#%b4#"%N/$�c%R�dGS�#%b4#"%N/$e�f���\�{�{�v�p�ping�J���Z�p�po�p�T�'�T�'�T�i�V�&�V�&�V�o�1�I�1�I�1�<�G�G�"�2�.�2�.�2cs�q� q� q�n�p�p.�T� %�~� %�~� %���D��D��2�x�x�;�p���_ � � �X�G�G�M��F��F��P�^�^�y�c�cument��{�{��3�3(�!�5�7!�5�7!�5 ation�u���!�{�{��p�pes"�g�4"�&�4"�&�4""��4"� �4"� �4"n�5�p�p�g�T�T�v�x�x�"�a�a��^�^m"� Y�s�PY�s�PY�s�D�p�p.��"�i�U�"�i�U�"�i.�T�_"�k��_"�k��_"�k�e�x�x�;�a�a��^�^n�S�{�{�l�3�3� �L �L (�f�Y&�g�Y&�g�Y&�P �Y �Y "��Z&�b�Z&�b�Z&�o��e (�}J �YJ �YJ t�p�x�x�$�^�^uble�x�3�3s�g�3�3wn ��C�{�{�h ���y�y�V �J��z�z�8*�_bp"�fbp"�fbp"�d �`�b��� �M �*�bp"�sbp"�sbp"�/ �j �y �} �Lrag� �7�U�� ���<�p�p � �7�f�y�y��� �z�zn� �7K� 6>E n� 6>E n� 6>E n�   ;� �7 � �7�LZ��.� 6HF n~� 6HF n~� 6HF n�� ��� �7 B� �7�4#"%�44#"%�44#"%  constraints"�Z!�!�!"�&#� &#� &# directionlock�g�P�P�-�]�]elastic�?�T�T��a�agable"�w�z�J�z�J�z(�2���L���L��ed�c�T�T�)�a�aing�.�T�T�t�a�amomentum�J�T�T��a�a transition�Q�T�T� �a�a@�,0#"%�0#"%�0#"%wbacks� �n �n �$ �T �T ing�2�{�{�f�3�3�E�x�x " �|�l�2�l�2�ln�m��iven �ops�A�3�3�)�G�G�4��ts�-�p�puration�9���"'�6"'�6"'��p�p4�<y�!�[�my�!�[�my�!�[�� �0&8!^kE #�(�oA/�-/{( �~ �0&8!^kE #�(�oA/�-/{( �~ �0&8!^kE #�(�oA/�-/{( :�u�9�#��r�9�#��r�9�#��=�T�T� � %=�%=�%=L#�+�jNU��jNU��jNU�x�a�a�9%?�~%?�~%?�(�{<h# % y ��OC1J%s<h# % y ��OC1J%s<h# % y ��OC1J% s�C��#��#� ���ing��T�T4�V � ��N � ��N � ��C�a�a"� ��X ��X �vcuqx74mh8wmjkmhiom2yli4 � � � �> �G �= �P �] �# �J � �p �g �v �z �Ix v� v� v� v�ynamic�}�y�y�&�z�z �&��ally� �{�{e��y�y�?�%�%�R�z�z(�d� �@� �@� (�� �B� �B� � ���Lo+!=� /f(: .++�%!M�1(*5pd �=�3)0B"9#�1H�& **�NĀ��� � ��q�q0each�s���|�{�{��p�p.�7.�!@�;7.�!@�;7.�!@L�>C6�S�A(�VC6�S�A(�VC6�S�A(.�z7.�OB� 7.�OB� 7.�OB� �e�q�e�q�e"�q�S�!�S�!�S�/� � �C�s�p�s�p�s"�$�>��>��>�ts�+s�+s:�?�VN�!$��VN�!$��VN�!$se�A�<A�<A�N�y�y4�<�?�;D�c�?�;D�c�?�;D�G�z�z�)�x�x�7� � �Y�^�^:�]6�#F�c]6�#F�c]6�#Fin�g(� (� ( �v*�W*�W*out�=�.��.��. ��[�&�[�&�[out�O�y�y"�z�p(��p(��p(�H�z�z �w*�R*�R*ier�r�M�h�M�h�M�/�G�G�u� �w� �w� st��x�x�O�^�^ly�p�{�{�1�y�y�*�z�zng ���{�{�5�y�y8 ��z �rz �rz �.�z�z �i � �� �G�G@�?� �2� �2� s��3�3 ���y���� �{�{��p�p�9���,�^�^�?�c�c�c��dit�?�3�3�1�G�G���ing�� � �3�<�2�E�\�L��?�u�e�\�k�o�>or��k��k��k�t�p�ps�}��ffectQ{Q{��x�xQ{Q{�/�^�^s��A �@�V �^ �^ �{��l�f� � �t �D �D ��c�c ortlessly ither�s�{�{�o�y�y:�s�{�<� �[�{�<� �[�{�<� �h�z�z"�H�<[�A�<[�A�<["��<[�N�<[�N�<["�yM�+� M�+� M�+ lasticity�8�T�T�~�a�aement$� �K�O�K�O�K�K(�/�!�/�!�/�!�E�Z��Z��Z:����)�/���)�/���)�(�|I�j0.�o1�y"#8-(�w)M:M }I�j0.�o1�y"#8-(�w)M:M }I�j0.�o1�y"#8-(�w)M:M :�U�C��?)�>�C��?)�>�C��?)4�(BBx.$�j(BBx.$�j(BBx.$r�n�ej7�W�X� �;V�ej7�W�X� �;V�ej7�W�X� �;H�|%".@�1%".@�1%".@�\R�;�+ a�%;=�,�+ a�%;=�,�+ a�%;=�"��E��E�:�O(BB�.$�l(BB�.$�l(BB�.$d�l9�Y�{X� �;�/l9�Y�{X� �;�/l9�Y�{X� �;B�4%"*F�P0%"*F�P0%"*F�P(��D�J�D�J�D�#��s �.�{�{4 �p �[h� �[h� �[h �y�Z�Z*�h�M$� �M$� �M$�"�vw1Z�7w1Z�7w1Z4�!�14�,$�M�14�,$�M�14�,$.� � V!�8 � V!�8 � V!l�|E�8(�Ci`J�*}EpE�8(�Ci`J�*}EpE�8(�Ci`J�*}E#�:� � .�G �V!�: �V!�: �V!r�67�>(�EiJJ�*}Er7�>(�EiJJ�*}Er7�>(�EiJJ�*}E�U���8 �hlipse��3�3�{�z�z ���mil�H�C�>�C�>�Ckowal�}��ulated��T�T�Z�a�an�)���F8�E8�E8�%�p�p�R�3�3���D��D��0�x�x�] � � �V�G�G�K��F��F��N�^�^ables �x� � d�O�{�{R�1� "�j#��e� "�j#��e� "�j#�"�( �t�| �t�| �t4�Z*!� *!� *!� ��"�T �f�p �f�p �f(�s�:$��:$��:$ed�[�T�T��a�aing�B�T�T�}�a�as��y�y�g�3�3��z�z"�Y�P�u�P�u�P�F�G�G"��P��P��P�\��gine��������m�m�7�4�>�4�>�4�9�y�y�r�z�z�U� � hance�h�� �Sd��y�y�I�z�zsure�2�f�f�f�L�Lter�;���V�{�{��p�p�RB�9B�9B�KB�:B�:B"�  �6 �6 �=� � "�[ �C �C �'��ed �m���!�c�cs�@������ ��_��_�� �y�y�%�z�z�C�x�x0�}%"PU�.%"PU�.%"PU�Y�<� � �q�^�^(�5%"L[�}%"L[�}%"L[ire �i�G�Gly�o���/�p�p��y�y� �z�zquals�I�O�O��\�\�<��sm�@�{�{pecially�$�y�y�]�z�z �`��tc�I��y��y��k�s�s�<�3�3�$�t�t��x�x��G�G�%�^�^ven�Z�y�y��z�z�3�^�^�)��ly�Q�3�3 ���th�7�h��a��Q�p�p h�7 a�Lh�7X!�)�dY*!�)�dY*!�)�dY h�7 h�7La�;!�)�oY)!�)�oY)!�)�oY a� a� h�7 h�7s�/�� $��n�p�p $�4� s�'K�V s�'K�V s�'K�;�x�x $� $�4�R s�2K�X s�2K�X s�2K�Y�^�^ry�Q�p�p�v�y�y"�'��y'��y'��/�z�z ���xample�~�{�{��p�p��y�y�!�z�z�g� � �b�� �z~%</"�I#i Kl}�$�M%y� [Q w�,+(V0�%? ""�VĀ��� �0� 0examples* �5�*���a(��M�y�y,( ��]�n�n& �5�b�� ��$ �5�   0 �5�:�x�x�    0 �5����;   !����S ��8 ��|�^�^�} ��C�c�c; �5� �5�mceeds�F��pt� �3�3lusive�z��~�%�.�$�7�D� �1�g�W�N�]�a�0ist��x�x�0�^�^ing�Y�3�3�(�x�x�T�^�^�\��t$�5�t�t�\� �Y �Y *�, )�: )�: )�1"�% )�9 )�9 )�h�x�x�B��^�^�)��pect�L�x�x��^�^�1��rience�l�� slaining�l�x�x� �^�^icitly�n��oreort�y0�B0�B0ressed �� � tends����>�p�p�m�T�T�%�a�asion����1�w�w��l�l�Rvely�{�x�x��^�^remely�z�y�y�n�3�3�2�z�z�R�G�G�,��'yjjb21tyw5kijoibnb4ic15ig1vdglvbi1hasj9�/���L�{�{�+�p�pf00�x�3�3�2�T�T�O���m�a�a�W�c�c�F��alse�t���4�l�l��i�i��j�j�L�T�T�N�x�x�U�G�G��a�a��^�^�3��qse�e�e�e�shion ��G�Gt�G��eatureg���{�{�R�p�pg�g�g�s*�G �W$ �W$ �W$�P�$P�$P�$�T�x�x�r�^�^displacementmap�0��edback�_�3�3 �b��l�(���"R�+R�+R�e�p�p�/�y�y�*�z�z�>�x�x�\�^�^��W�*�W�*�Wing�m�p�p �4��s�+�x�x�I�^�^ gaussianblur�4�T�T�x�a�a turbulence��3�3 �-���E��w��x�x�-�^�^ff4�<�-(�V��-(�V��-(�Vigma ��6U����6��6��6��6��6��6lesize�Y�x�x�w�^�^l�B��ter�@)�T)�T)��3�3�- �- �- �K+ �-+ �-+ �$��s�~�T�T�D�a�a�*��nd�w�{�{e���ish�U��ed�^�3�3�k�x�x��^�^s� �� �K��re�8�3�3�Bu�!Bu�!Bu����KBu�.Bu�.Bu�T�c�cs�-��ing�g�T�T�-�a�ast�p���\�{�{�Y�y�y�R�z�z�;�&�0�&�0�&�Z�x�x�v�1�2�1�2�1��^�^�K��t�M�x�x�k�^�^xed(� �v�n �v�n �v(�E �b�h �b�h �blex"�$ �k �k "�P �Q �Q ibility����#�y�y�\�z�zle ip ow�~�y�y��z�z�^�T�T��a�aubber���ocus����L�p�p�$�y�y��z�zF� �L  �; �L  �; �L  F�Y �W  �= �W  �= �W  ed�)�T�T�d�a�allow �o �>ing �7� � r2�m n&�8K n&�8K n&�8"��wc�%�wc�%�wc\�%TF G�<�aKTF G�<�aKTF G�<�a�  �m:�/?� �^3�1 �G �:�/?� �^3�1 �G �:�/?� �^3�1 �G �Ed� #�X�0�-H�y�$�i#�X�0�-H�y�$�i#�X�0�-H�y�$� �%;�/?�E �`3` �G �;�/?�E �`3` �G �;�/?�E �`3` �G �2��n�i��n�i��n�il�4�R&R(R�e)�/OyW<4�R&R(R�e)�/OyW<4�R&R(R�e)�/OyW&* �7{D �N{D �N{D @)�p�I� |��I� |��I� |<�5l�8 � l�8 � l�8 2�<�q�t��q�t��q�t`�p�V&T(R�Q)�/OyWb�V&T(R�Q)�/OyWb�V&T(R�Q)�/OyW �q{�j{�j{*�HCd�mHHCd�mHHCd�m^�zYRx�V�3F�M�$YRx�V�3F�M�$YRx�V�3F�Mce�u�3�3�j�G�G�!��ever �u�G�Gward�V�3�3 �x��ur�E�3�3� ���F�c�c�R��rame ��70� � ��70� � ��7 ��7 ��70�0� � � � ��7 ��7r ��6R����6��y�y��6"��6��r�r��6�1����X�X��6��6ates�K�x�x��^�^ usercontent� ���I�'�h�h�k��]�]�! �; �D �: �M �Z �  �G �} �m �d �s �w �Feely� �y�y�Y�z�zom6�[| t��#| t��#| t��n4z��1�2�+�s1�2�+�s1�2�+:� 2�C�h-s$ /;:GAv( <?\"* TF! "B j1+' ,x�w",�s�( ""�VĀ��� �0���m 2�C��m 2�C�<�y+�H��:9+�H��:9+�H��:lzz�\ �Bh�7W�;� �j � �Bh�7W�;� �j � �Bh�7W�;� �j <�1,���p;,���p;,���p"��H�s�H�s�HB�Q`�[N��L`�[N��L`�[N��64z���>�8��>�8��>�8&z� '�'�'4�@�g �P�u�g �P�u�g �P:�}`�aN�|�@`�aN�|�@`�aN�|�V�%�@�%�@�%.�r�Z � �Z � �Z 0full�w���{��d��d��O�T�T�s$�T��t��t��5�h���0�d� � ��a�a��x�h�x�h�x�q�c�cn��{�{ction(�G��#�=��#�=��#�uE�CuE�CuEd��\�?�� �k�n�\�?�� �k�n�\�?�� �k�/�z�z�H/1�/1�/1���4 � �$�P��$�P��$�P"�9�9�9H�N�e �q�U]N�e �q�U]N�e �q�U ality ��G�G�$�� s "���y�y"��\�3�3�G�z�z "� "��e*�W*�W* damentals�k � � rther�K���+�{�{�[�p�p�Q�Q�Q�?Q�Q�Q�>��ture�S�x�x�q�^�^yi�r�x�x��^�^g�@�%�% �!���M�q�q3fxtpyrpji6khdfkego8yrbs08� ���=�{�{��p�pain�>���'�p�p�T�y�y�o�z�zs��T�T�T�a�aeneral� �y�y�E�z�zly� ��te �!�G�G d��T�T�W�a�aion "�,o�Eo�Eoor L�Q �6 �6 sture"���������p�p �v�i�i�$&��H�j�j�&h� G:Q ?E�X�WG:Q ?E�X�WG:Q ?E�X�1�/f��G:Q ?E�c�VG:Q ?E�c�VG:Q ?E�c���s4�5�b�X�(�X�(�X�l #�.���0�0,�5�T�y�y�K�#��7�3�3 ��4�z�z�KL �5�+y��p!Ry��p!Ry��p!l�5�`�5 #� #�B �� |��{!Q|��{!Q|��{!�� ��5�tC(�5� ���gt�7�s ��1���7�HX  ��<�3�3�qU��kX�7�0�7�P�x�x��7� ��{� � �Z �����a�a�#���^�^�#��z�7�Z�7�) elementbyid��3�3(�!�5�7!�5�7!�5previous �k��s�.'�'�'tingithub��� �p�p� �-�6�,�?�L��9�o�_�V�e�i�8ven�c�x�x��^�^s�0��lobal�I�{�{ �\�G�Got��y�yrade�x��ients�C�3�3phics�6�{�{y�;�y�yeat�#�{�{�l�p�p�"�g�g�[�h�h�7���q�c�c��}�}id� �x�x�9�^�^�!V�+V�+Voup <�7 5� <�7 5� <�7<�7�Hi�i�i <�7 5�5��%i�wi�wi 5� <�7<�7���ed�2�x�x�f�^�^wing���sapw�w�w�w� uaranteed� �T�T�H�a�aide �)�4X�� ��P�{�{�?�p�p�)�4���)�4�)�4�)�4�����,�G�G�)�4���)�4s �'�7 d� �'�7 d� �'�7 �'�7 �'�7 d� d� �'�7 �'�7h�8�3�3alf�d�3�3nd�l��le�O�x�x�{�^�^rs��T�T�d�a�as� �x�x�>�^�^ing�J��ppen�8�3�3�u�x�x�*�G�G�!�^�^�x��s�\��w��w��� �V� �V� rdware�c�{�{�:�p�p�=�y�y�v�z�z�yR�:R�:Rs��l�.�l�.�l�Y�{�{�k�z�x�z�x�z�d��b��b��$�;�z�;�z�;��[�!�[�!�[� �I �I .�!K�^�M�K�^�M�K�^�M�l���: �V �V .�MM�b�9�|M�b�9�|M�b�9� �c�c�g��ve�V��|��|���y�y�H�z�z�j�$�2�$�2�$�`��_��_��%�/�4�/�4�/���Z��Z�eader �v��ight����M�.�h�h�o� �]�]�%*�, �O �O � �O*�e �P �P �H �XH� �L�D��G��L�D��G��L�D��G� �+ �R � �xH�6�R�0��G��R�0��G��R�0��G�4 �~ � �Qllo�Q�{�{re�#�{�{x�s2�I2�I2�,2�J2�J2iddenL�b�n)�' H�nb�n)�' H�nb�n)�' HF�?b�0)G V�b�0)G V�b�0)G V�y���-�c�c.�X "�b~ �ZFI':-,�~��W-m  T%q)�W 8#=�Gh�{ ""�VĀ��� �0��3 "�3 "0high  er�`0�0�0�{�8�8.�<�d�+�Y�d�+�Y�d�+st��x�xstorical �r�G�Gook�Z�y�y��z�z��T�T(�m�/�L�/�L�/Z�'{�Q{�Q{s }�7 v� }�7 v� }�7 }�7 }�7 v� v� v� }�7 }�7rizontal �]� � ver�|�t�t%��J�M�M�!�y�y%���z�z< �f�& !f�& !f�& %�%�< �=i�/ "i�/ "i�/ end �f�a�as�}�T�T�8�a�atart�Z�p�p �d�a�aw�;��(�0 �c �c �C�p�p�C�3�3 ��G�G�x���l�{��{��{ever�7�y�y�0�z�z�m�x�x�.�G�G� �^�^ref�E�T�T� �a�asla�u3�H3�H3�.3�I3�I3tml 4�-23�R�623�R�623�R "�z�lR�?�lR�?�lR:�&A ���VA ���VA ��"�3�^U�K�^U�K�^Uelement �2�a�atps>�7�c�b IO�b IO�b I�xR��'.+ 7�k�;.+ 7�k�;.+ 7�k+6��n| �\| �\| �\=�7� �y�y�mB��<�?L %�{�?L %�{�?L %�]��0�7�K��D��D��+7<�7�.'�?�~'�?�~'�?�)5$�7�=���8$��G � � �T��@�G�G�"*��*��F��F��N6��p'�?�d'�?�d'�?�&��U�7�?���D0�7� �0�>�0�>�0�>ybrid�����{�{�6�p�p�8�y�yL�*=MG&V��0*=MG&V��0*=MG&V��q�z�z�T� � i��r� �r� �r�Q�z�z (� �3�)�3�)�3 convariants�p�T�T�+�a�ad�1�T�T�u�a�aeal�E�y�y�p�z�zs�D�x�x�b�^�^f��{�{�1�p�p4�Y��t�B�.��t�B�.��t�BL��dpF"�Q'�n�dpF"�Q'�n�dpF"�Q':���4�E�m��4�E�m��4�E"�e :� :� ::�8V� �C)�#V� �C)�#V� �C)�[�%�g�%�g�%4�juc9�xuc9�xuc9"� :� :� :L�b: Q�>�-)�: Q�>�-)�: Q�>�-)j�"�\� $�D$��\� $�D$��\� $�D$mage�e�y�y�A�3�3��z�z�"�[�[�@�A�As� ���I�)�h�h�k��]�]�! �= �F �< �O�6�x�x�< �" �I � �o�T�^�^�\ �u �y �Hg�/�x�x�M�^�^ mediately�w�3�3�v�x�x�"�^�^�$�]$�]$plement��3�3�h�x�x��^�^��� ation��x�x�2�^�^ort�Y��@� �3�*�s �3�*�s �3�*(� �A �A � �d�d�.�[�\X�y�\X�y�\X�Y� f� f� ��x�x�}��"�'�'�'�\�a�a�S�^�^�T�%�@�%�@�%ant �k�G�Ged�U����{�{�U�3�3ing�`�{�{s�s�p�pssible�>�x�x�\�^�^rove��{�{�v�p�p�a�x�xments k k k kn@��1mO6�OhleO6�OhleO6�Ohl�c"i�t"i�t"i<��&(��� 5(��� 5(��� ���1|IB�C^�UV�� IB�C^�UV�� IB�C^�UV��T���)�� �"�}uo-E"U`�i�)�� �"�}uo-E"U`�i�)�� �"�}uo-E"U`���fIB�GC^�I�)��IB�GC^�I�)��IB�GC^�I�)�0��1�A�`�v�`�v�`�8x��1��7�t=D�c� �7�t=D�c� �7�t=D�c�0��1�#&�i&�i&�,(�+�:H�w�:H�w�:H@�r+�Bj(�+�Bj(�+�Bj($���-�`��`��`l���z�;�t=D�c��;�t=D�c��;�t=D�c$���&�:&�:&:��1*� �\.� �\.� �\R��1�s]r�r"dh�]s]r�r"dh�]s]r�r"dhactive"�' �P �P clude�N�{�{d�P�g�g�n�M�Ms�b��ing !orporate�T�� �x���W�e�erectly��x�x�$�^�^redible�/�3�3�i�x�x��^�^ definitely�}�3�3�r�G�G�)�d��d��dpendent�E�{�{�1�y�y�7�3�3�j�z�z ly�y)�R)�R)��3�3�2)�S)�S)x"��\�\"�>�[�[ �`��ividual��y�y�P�z�z�0� � ly�n�y�y�5�3�3�'�z�zustry� ���e�p�p �&�^�^ertia!�2E�pE�pE�>�T�T�y�a�a4�5E�v&Y�8E�v&Y�8E�v&Yl��3�3 ���finitely �y��{�{�?�y�y�4 �* �* �x�z�z �T Q�% Q�% Qluence�q��o .� �c 7IW�c8p� k3!�J>�*61�M" $'� .'01(3'"%G> &&�RĀ����(� �c 0information 0�z�z�zitial.�X f� f� f.�  o�l o�l od�:ur�F @1yo�:�ur�F @1yo�:�ur�F @1yo�:(�}�+�g�%�+�g�%�+�gd�suro� B1yoZ�"uro� B1yoZ�"uro� B1yoZ�E57�*57�*57��G�G�}1<�z1<�z1<�"��:��`�O�b�\�`�O�b�\�`�O�bly�j�y�y�c�z�zline�:�x�x�n�^�^nerhtml�a�y�y��z�zput(�"�X�6�J�X�6�J�X�6(�]�X�A�L�X�A�L�X�Astall.�= �]�+ �]�+ �].�^ �J� �J� �J.�E �P� �P� �Ped�W$�Y$�Y$nce�l�p�p��y�y��������z�z�X�T�T�1���8)�c)�c)�<�G�G��a�a�k�c�c�$���;��tly�D�y�y�=�z�zead��T�T�[� � �^�a�aructions�o�� tegrations ��7 [� �� ��7 [� �� ��7 ��7 ��7 [� [� �� �� �� ��7 ��7raction�/�x�x�M�^�^ s�I�y�y�t�z�z ve�{�x�x��^�^ested�^�x�x�|�^�^ ing�U�x�x�s�^�^polating�q��ruptible��x�x�6�^�^ ng�)�y�y�$�z�z��x�x�7�^�^section �i� � s �^E�GE�GEo�L5�e5�e5"��O��O��O*�l��n5M��n5M��n5��3�3 �7��uitive� ���I�� ly�0��view'��)�{�{�&�y�y'��!�z�z� �T�T '��� � '��B�a�aoptions.� >�>�>s�o]6� ]6� ]64���@�)���@�)���@�).�'.�]!�E.�]!�E.�]!`��Bhl^�?�$�1=�Bhl^�?�$�1=�Bhl^�?�$�1�� �%�~�D �6�N�d@F'k�%�~�D �6�N�d@F'k�%�~�D �6�N�d@F'Z�Q�hn^_�2�A>�hn^_�2�A>�hn^_�2�A:�4ZhO�L�_ZhO�L�_ZhO�Lx�� �fHF88\$�LD� �fHF88\$�LD� �fHF88\$�L"�x�?�C�?�C�?d� � �c-YI�  � �c-YI�  � �c-YIN� D~�0 I`D~�0 I`D~�0 I`:�oZhO�W�aZhO�W�aZhO�Wp�J"�l2F88\$�L�R"�l2F88\$�L�R"�l2F88\$�L�0�Q�Q4�_?" W[ �|?" W[ �|?" W[ d�5�5@! �iQ�4$�:�5@! �iQ�4$�:�5@! �iQ�4$done �T �/ �/ n�n�{�{�/�+�O�+�O�+�c��K��K�on�.�,�N�,�N�,"�Z��,��,�pen4�m��` � ��` � ��` (���j�p��j�p��jselected�3�x�x�c�^�^visible�`�y�y�]�z�zt.�l?Jk*�l?Jk*�l?Jk*F�:UX� G ,�EUX� G ,�EUX� G ,:�.DV~R9xC� DV~R9xC� DV~R9xC^�f^�d>}gZ� �W�:�3^�d>}gZ� �W�:�3^�d>}gZ� �W�:l��>xef� �Z�6A�>xef� �Z�6A�>xef� �Z�6^�^�d>�=g\� w�M�?^�d>�=g\� w�M�?^�d>�=g\� w�M@�M�]!e �vM�]!e �vM�]!e ~�9_:���>"C�""]_:���>"C�""]_:���>"C�""4�aG�>+�<G�>+�<G�>+4�Y w�?�" w�?�" w�?(�� �(� �(� F�>M�]!Y �xM�]!Y �xM�]!Y � �+0_<� ��>"C�""0_<� ��>"C�""0_<� ��>"C�""4�M�/�;M�/�;M�/�H�d�:�d�:�dF�nC�O ��$�-C�O ��$�-C�O ��$em(�"n�nn�nn�@�3�3(�=~�_~�_~�L�x�x�!�6�V�6�V�6�x�^�^.�_%�0%�0%s�+�y�y�j�3�3�[�z�z��x�x�B�^�^ration�b�6��6��6 ���s�E����� �t� �t� $�N�.�vP�.�vP�.�v(�E�L�"��L�"��L�"(�|�)�6�X�)�6�X�)�6(�~�.�5��.�5��.�54�V�_I��4�_I��4�_I���7�U�7�U�7��G�G4��cI�}�*�cI�}�*�cI�}"�*<�T�<�T�<�T:��f�e�j�>�f�e�j�>�f�e�jelf�!��janky�-�x�x�K�^�^vascript������"�$c�G�Uc�G�Uc�G�M� �,� �,� �Z�G�G�a��iu0u42jc��x�x�,�^�^ob�j��]��]����C��C�s �7*p�D�,�Q�,�Q�, � �7p�t�3�3 � �7 �7 �7pp � � � �7 �7delivr"�;+�7+�7+ust�J�Z�#�Z�#�Z��[� �[� �[��z�z��G�M�G�M�G�P�I��I��Iify�!�x�x�M�^�^content�-�x�x�Y�^�^keep�a�x�x��^�^�D��s�T�y�y�M�z�zy�W���3�p�p�c�y�y�^�z�zboard��.�(�.�(�.�L�9�*�9�*�9� 1R�#�",Ng"�}-'7�iw5"�{Q$�O$0 ""�VĀ����0� 0keyframe"�.�-.�-.��3�3"�.�..�.. �`�� s�< �6�{�{ "�o �n �n  @�$�j� ^":� �j� ^":� �j� ^": "�j �o �o  4"�blu �Wlu �Wlu �+ 0�$`U<�`U<�`U<�q ind�z�{�{�r�y�y�+�z�z�"�x�x�}�G�G�@�^�^etic�`�{�{owalski�I�C�>�C�>�Cl"�? � � abel�l�y�y:�s� �� �� �g�z�zled�F7�~7�~7rgely��x�x�6�^�^r��3�3�j� � st�M�d�ds�4�{�{test�s��"�?�A�A�0�y�yF�* �{�u �{�u �{�^�z�z�� � youtb ���  �w�  �w�  �o    F|� �4 �4    ��q |  ��9 �  �� 0 B   A(" $  >(  + 0@ I;n2&� 0 B   A(" $  >(  + 0@ I;n2&� 0 B   A(" $  >(  + 0@ I;n2&� �� |� �h |e0 D"  C(" %  >( + 0@ I;n2&0 D"  C(" %  >( + 0@ I;n2&0 D"  C(" %  >( + 0@ I;n2&|�   ��Z   �� group 9�7 2� 9�7 2� 9�7(9�7�. �h �h  9�7 2�(2�� �M �M  2� 9�7 9�7id�0����m�mT�~;Z<U�u�(;Z<U�u�(;Z<U�u�KF�cZ>U�a�UZ>U�a�UZ>U�aroot�"�t�t�T�Z�Zs �2�^�^croll�|�t�t�.�Z�Zzy ?�7 ?�7 ?�7 ?�7 ?�7 ?�7 ?�7motion =�76� =�76� =�7 =�7 =�76�6�6� =�7 =�7eading� ���f�p�p �'�^�^rn6I�7�>�xw�xw�x3��{�{RA�r�<�}aB% G�<�}aB% G�<�}aB%  I�7 A� I�7 I�7 I�7  A� A� A�I�7{���~I�7�xed�#�{�{ve �B� � s�V����p�p��T�T$�"oV�QoV�QoV�X�=� � �;�a�a�Zk\� k\� k\ft�.�y�y�g�z�z"�8�+��+��+��x�x"�s�+�+�+�+�+�5�^�^�A��gacy�M�{�{ngth� �3�3�q�z�z�W�v�v� � � ss�[�c�c�y�I�I�H���$��ons�n�x�x� �^�^t�\�{�{�v�z�z�S�D�Dhargic��3�3��G�G�B��s�6�{�{�(�R(�R(�7(�8(�8(vel�o�t�s��#��,�9��&�7�G�G��L�C�R�V�%raged�R�x�x�p�^�^ing i��{�{j�D~:��7�J�&~:��7�J�&~:��7�J^��)A�%��i5>A��)A�%��i5>A��)A�%��i5>Aj�}~:�@�Y�[�3~:�@�Y�[�3~:�@�Y�[�J�x�x�v�^�^@�Q�[�68�$�[�68�$�[�68brary�s��"� �N�/�N�/�N�-�j�jfetime� ���8�A�7�J�W��D�z�j�a�p�t�Cke"�"�MvY�MvY�Mv�qP�,<BI�6+K� r<BI�6+K� r<BI�6+K� \�q�p�p5,�c�% �0�% �0�% � �?�E�p�E�p�E�N8��e �R�!�e �R�!�e �R�C �6��O��O��\8��h2%��@�h2%��@�h2%���E��@�I�j� � ;�)�G�G�8 �q��Q��Q��8�K�Z2%��4�Z2%��4�Z2%��%�K�c�cT�+�UI�UI�U�3�2mited�p�{�{less� �{�{�+�p�ps�-�x�x�K�^�^ne�e1�1�1�D8�B8�B8 0�{�l }�l }�l ar��{�{�A'�'�'�*�x�x�8� � ��.�.�Z�^�^(�]�e)�g�e)�g�e)k�m���I�{�{�6�p�ped�A���,�F�{�{� �p�p �@6��q��q��q� ���.�9�s�l�s�l�sst��{�{�4�,4�,4�5C�C�C"��g1�d�g1�d�g1�=�^�^�W�l�leners�t!�5!�5!�,!�B!�B!ttle�>�x�x�C��E��E�ve�.�_�_�L�E�Ely�v�{�{l�9���U�{�{�A��q��q���Y�"�Y�"�Y�S�3�3�>��c��c��z�T�T�'�x�x�x�G�G�5�a�a�E�^�^�v��m�p � � D�$A9 f�fyo !5f&�6Y\:2$&'k �b7h�>;\+yX' � ""�VĀ����0 �� �{�{��p�p0load� �{�{�i�p�ping�n��ck�Z�T�T� �a�aing�U�T�T��a�ag����\�p�p4�8 �&hJ �O �&hJ �O �&hJ .� �s��x�s��x�s�ng�1�u�u��3�3� �x�x�?�^�^�V���6��er�<��ok� �{�{��x�x��^�^s�x�x�x��^�^p�B �) �) �A�G�G�d �u �u ses�;�W��W��W�v�b��b��bt�C���S�p�pve� �y�yw �6�G�Gm�< � � ade�Z�{�{� �y�y�6�z�z �w��gic�s�x�x��^�^in�F���O�p�p�F�x�x�d�^�^ke��y�y��z�z�w�x�x�+�^�^�z��s�;�3�3�<�x�x�-�G�G�*�2�.�2�.�2�m���{��nage�C�x�x�a�^�^ �Kr�i�o�oual�P�y�y�{�z�zly�E�p�p �  �y�I�{�{�1�y�y�je�e�e�t�x�x��G�G��^�^p F��,�y�y F� F� F�value E� E� E� E�rk��x�x�&�^�^quee �sk�d�y�y�@�3�3��z�zs4�Q�,� �g�,� �g�,� "&�_�0�04�T�g}#�e�g}#�e�g}#ter��{�{tch�=�x�x�i�^�^es��{�{�&�x�x�R�^�^ing� �x�x�'�^�^h� ��t�}�x�x��^�^x@�{�5!  �h�5!  �h�5!  imum�1��y��x�x��^�^cp�+���H�{�{�'�p�peaning ��G�Gs�'�{�{�1 �K �K �2�x�x�l� � �w �X �X �P�^�^surably�o�x�x� �^�^ed�o�y�y�(�z�z�f�T�T�!�a�aments �v� � ing�(�R(�R(�A(�8(�8(et �e� � s �w%�g%�g%thod�2�3�3ice��T�T�X�a�arointeractions�R�x�x�~�^�^d��x�x�:�^�^dle �E� � ght(�@^�/�c^�/�c^�/(�^^�/�I^�/�I^�/rate y� y� y� y�ion x� x� x� x� lliseconds "�s�r�B�r�B�rn@�y� #  �h� #  �h� #  i�@�{�{L� ?d�@�c�Y ?d�@�c�Y ?d�@�c� �> �> mum � �G�G���us �h� � rror�Z�3�3 �|��x2�2��A��2�2��G�c�cer�}��ing��3�3odal�d�y�y�_�z�z(�qU  �U  �U  (�!U  �iU  �iU  ern�/�{�{�[�3�3ified���ytarget�J)�J)�J)ule�4�{�{s"�\�P�Pre&J�7�G���;0�S�A �^S�A �^S�A OBB��,�}aB%��}aB%��}aB%3@J�7��e�O�'$�e�O�'$�e�O�'�=>�=�m�>1�j�u�m�>1�j�u�m�>1�j�N6B�g�f��e$�f��e$�f��e#J�7��2J�7�f�A�(��A�(��A�(� &J�7�;�@�T�@�T�@�q�,$�2�P�k�P�k�PLB��2B��E�,�(��,�(��,�(�-$B��!��V��V� J�7����&,J�7�D� �Z� �Z� �Mphing��,r�,r�,st�n�{�{�G�y�y�i�3�3�r�z�z(� ��H�e��H�e��Hly�7�3�3�)�G�G�w��tion�L"7,"7!5   1 (*   #!5   1 (*   #!5   1 (*   #�"D �X% <% < T  .  % &!NHB,>T  .  % &!NHB,>T  .  % &!NHB,>&D �j11$   ( $ "%0' $   ( $ "%0' $   ( $ "%0'  D �r"7,"7# f%E '! =#&"$LR9" / o<8 # f%E '! =#&"$LR9" / o<8 # f%E '! =#&"$LR9" / o<8  gD �(% <% <[�d � %�;W�E�0�d � %�;W�E�0�d � %�;W�E�b D �:11$ f%E '! /=#&"'LR// yB;$ f%E '! /=#&"'LR// yB;$ f%E '! /=#&"'LR// yB;D �n"7,"70 3%�KA:#Y" 4 0 3%�KA:#Y" 4 0 3%�KA:#Y" 4 ZD �N"7,"71 #"!N<#' &TOLC"'% -,6E"B)#"N" %"E,$1"!%B;F�oB" !!�WĀ����2{��/E >;�; #"!N<#' &TO�/E >;�; #"!N<#' &TO�/E >;�; :D �p "7,"7;7< "H7< "H7< "� !D R% <% < =0� =0� =0�D X% <% <'�&�u'�&�u'�&�lD �j11 0 3%�KA $Y" 2  0 3%�KA $Y" 2  0 3%�KA $Y" 2 D �,11"!M>#* &VOq/E >;�; "!M>#* &VOq/E >;�; "!M>#* &VOq/E >;�;D �X 11$< )H< )H< );D �*"7,"7%   8 .  94%   8 .  94%   8 .  96 D �X"7,"7;%".t�dGSA#%b4#"%N/$B, Y%".t�dGSA#%b4#"%N/$B, Y%".t�dGSA#%b4#"%N/$B, >9    D 0motionconfig A�7 9� A�7 9� A�7 A�7 A�7 9� 9� 9� A�7*A�7�  �r �r �,resolver�"�b�bvalue�y�� B��B�p�p�g�<�?�<�?�<"B���4��4��4� �1�K�1�K�1�I�� B� B��?��urnezubngsctz2ivwlqopus� ���*�{�{� �p�punted�>�x�x�l�^�^se��T�T�Q�a�avement�f1�1�1��T�T��9�9�Z�a�a"�C� �Z� �Z� s�Q�Q�Q�� � �>Q�Q�Qing� �3�3�y�G�G�:��zilla�z�{�{�P�3�3���D��D��.�x�x�[ � � �T�G�G�I��F��F��L�^�^s �\�G�Guch�1�{�{�j�3�3ltiple�n�{�{�y� �r� �r� �~�7~�7~�2�K�1�K�1�K��T�T��x�x�V�a�a�E�^�^(�=�h�3�h�h�3�h�h�3st�A�3�3�i�x�x�A�G�G��^�^���y� �{�{4�,"#�( �9"#�( �9"#�(  component�z�y�y���E��E�self�{��name�,���I�{�{�(�p�p�>�E�p�E�p�E�S�T�T��a�a�K��d�K�y�y�b�3�3�F�z�zs�e�3�3�U� � �t��n�q�x�x��^�^da�f�x�x��^�^tive����+�3�3ly�R��ural�_�f�f�1�y�y�^�3�3�,�z�z��x�x�-�^�^�a�&�[�&�[�&ly�8�y�y�3�z�zvF�f-/!�U-/!�U-/!igation�>�T�T��a�aearest���t �M��ed�A�p�p�M�y�y�x�z�z�w(�R(�R(�y�G�G�)(�8(�8(s�{�T�T�P�x�x�6�a�a�n�^�^gative��3�3 �/��sted��x�x�-�^�^t�<�c�cver�i��w�P� �r� �r� (�� ��� ��� �� �k��k��k4� '�g�@ '�g�@ '�g4�A )�W�4 )�W�4 )�W�l��xt�1���y��{�{b�A�Z�Z=�� ��&�(�x�x�!�y�!,�w E�[ E�[ E�n�F�F�^�^�A�M�R�o�0���'�{�{�i�3�3�J�T�T� �x�x�M�G�G��a�a�(�^�^�;n�n�nn ��G�Ge�a �a �a �;a �a �a �4� � rmal� ���C�p�p�_�3�3�c�T�T�v%�o%�o%�@�G�G��a�a�.%�@%�@%�>�����t�q�p�p�g�y�y�q�3�3��z�z.�y�"�c�Z�"�c�Z�"�c�\��.�%�'"�M�N�'"�M�N�'"�M��c�ce�^���b�{�{�1�[�["�X{��}{��}{�4�p��g�L���g�L���g�L"�{��~{��~{��o��G��G��p�x�x�W�J�J�*��I��I���^�^�.��w�S���f2�I2�I2�a�z�zpm�M��(�kA/�dA/�dA/�V�o�ojs���ull�\���N�(N�(N�N�)N�)N��T�T�#���[�c�cmber O�7 G�O�7o�y�y(�E�h�3��h�3��h�3G�S�z�z O�7$O�7� �x�x�T    O�7�+I�CI�CI�<�G�G G�G��a�^�^ G�O�7�h��"O�7��D�=�D�=�Ds�O�{�{(�h�}�l�}�l�}(�L�g��9�g��9�g�(�!�}�m�}�m�}�� � �S��erical �O�G�Gxt(�[ �L �L object�| �r �r ���&��&��^�T�T��rw7I'#f }6)%R!!U( F+{�` -lq�1$4M�6c ""�VĀ����0 ��m�m �z�G�G��a�a�;�� 0object3d��3�3s�K�{�{.�N��$�y��$�y��$�]�G�Gtaining��{�{ccur�.�3�3� �G�G�n��f6� ,c��s ,c��s ,c��T� $�L;5w&X-p $�L;5w&X-p $�L;5w&X-B�9�.8E��Ga�.8E��Ga�.8E��Gr�r�$<�7E(�b]x�F�C�$<�7E(�b]x�F�C�$<�7E(�b]x�F�� )�i,u�'k�jYG*:" I5 �U5 :*#!Q (�B,u�'k�jYG*:" I5 �U5 :*#!Q (�B,u�'k�jYG*:" I5 �U5 :*#!Q (j�*�%<�7EH"�d]xf�{�%<�7EH"�d]xf�{�%<�7EH"�d]xfL�r = Bc�4lg�P = Bc�4lg�P = Bc�4lg��`"�1$�7�= D ]�C�5"�1$�7�= D ]�C�5"�1$�7�= D ]�C(�p� �h� �h� ~�Q�#$�!%,4 /c�#$�!%,4 /c�#$�!%,4 /:�~Aa-#�,Aa-#�,Aa-#L�* @ Bc�4qm�O @ Bc�4qm�O @ Bc�4qm�� "�9$�!�= D ]�C�)"�9$�!�= D ]�C�)"�9$�!�= D ]�C(�(� �=� �=� .�C�*1=�r�*1=�r�*1=�,�q�!1Q*<,+ K7H�;� $NS$�1�!1Q*<,+ K7H�;� $NS$�1�!1Q*<,+ K7H�;� $NS$fers�_�p�p�o�O�,�O�,�O�'�P�,�P�,�P�D�b�b�&���b�H�H�^�c�cset�x�{�{� (�R(�R(��J�J�J�J�J.�&���T���T���?(�8(�8(�M��K��K�s (+�#� �[� �[� ten��x�x� �G�G�7�^�^ld�4�3�3�1 �_ �_ �] �C �C n�F����p�p"� $�l�m$�l�m$�l(�h��g�;��g�;��g"�C$�,�.$�,�.$�,L�BJ(5�e!g�J(5�e!g�J(5�e!g@��_ M�^�M�!�_ M�^�M�!�_ M�^�M.�# 0��: 0��: 0���G�GL�}J(5�p!g�J(5�p!g�J(5�p!g@�;�I M�^�M��I M�^�M��I M�^�M���L� �`�O�Cj�~�!�`�O�Cj�~�!�`�O�Cj�~ce �f�{�{��L�Llick�E��e��e� directionlock�l�T�Te� �m�{�{�2��5,�D�h�w�X�h�w�X�h�w�?�4�G,�{�0#^�M�0#^�M�0#^�D�K���1�A�w�g*�-�#^�G�#^�G�#^d��c�c�*�q�m���[hoverend�+�T�Tstart����)�T�Tly�1�C�/�C�/�C��y�y"�I�F�Z�F�Z�F�H�z�z��u�a�u�a�u��x�x�L� � �J��c��c��E�^�^mount�n �p �p seenter��T�T�A�a�aleave��T�T�C�a�apan�c�T�Tointerdowncapture�o �M �M �5�a�aress �r�a�acancel �|�a�astart �k�a�atap�7�T�Tcancel�A�T�Tstart�0�T�Tunmount�o�j�jpdate.�/ � �~ � �~ � pacity�a s� s� s"�=+�3�!+�3�!+�3"�* ��d ��d ���?�pY_�"5�KBt�0�pY_�"5�KBt�0�pY_�"5�KBt�(�s �)D)�w�z <35" #<)M:M$s �)D)�w�z <35" #<)M:M$s �)D)�w�z <35" #<)M:M$��x�0Ya�"5kQw�>�0Ya�"5kQw�>�0Ya�"5kQw�$�x�x"�Fg�'g�'g�T�^�^"�~h�wh�wh�[ � � X�U �T� . �8 �T� . �8 �T� . en�T��f��f�.�{��H{��H{�ed�t�{�{s�e�x�x��^�^posed��T�T�T�a�aing�t�3�3�i�G�G� ��timal �q� � on�J�y�y�bp#�$p#�$p#�E�z�z(�X&!S�j&!S�j&!S�S��ally�v�3�3 ��u� �u� �us�-�{�{ &�:�Hx �N�Hx �N�Hx �N &��[a�3a�3a(�� � : �4  ��  ��  � &� &�&��?�c�c� �Ir(�jE}�=�E}�=�E}�=N�l: �._Ot: �._Ot: �._O(�*�Ok�'�Ok�'�Ok(�|�) G��) G��) G~ �x�|�%9�j�Z� @���|�%9�j�Z� @���|�%9�j�Z� @�(�5�i G�C�i G�C�i GR�Q0=�!+'��0=�!+'��0=�!+'�4�3a�R�W�ba�R�W�ba�R�W$�!�x�x�1$ �F�L�@�L�@�L(�-^�W�^�W�^�WR� 0=�!+'�*�0=�!+'�*�0=�!+'�*4�_a�Y�B�Va�Y�B�Va�Y�B�Y�I�I�w�Y�E�Y�E�Yj�.C��lz$$�g�*.C��lz$$�g�*.C��lz$$�g chestrate�9�y�y�4�z�z ing�x�y�y��z�z on4��D��D��D�v�3�3L�:�'�%�'�%�' ���der �9�G�Gg�{�{�{�Q�>�w�>�w�>���D��D��/�x�x�\ � � �U�G�G�J��F��F��M�^�^igin�a�w�w�]�3�3��x�x�W�x�x��^�^��)0$�L^b#.�<$�0y* �!-#H ��h\h ""�VĀ����0�����0originx�o �_ �_ �( �` �` y�p�y�y�)�z�zz�q�h�h�*�i�iscillate�|�3�3�q�G�G�(�d��d��dther�v�y�y4�GP�%�[�XP�%�[�XP�%�[�!�z�z�4�T�T(�r�6�/�6�/�6�(���%�$%�$%�z�a�a(�%�"�*�"�*�"�.�c�c"�L�%�B�%�B�%wise�Z��ur�j���_�{�{�z�p�p�1�y�yt�$�{�{�M�g�g��h�h�.�x�x�u���Z�^�^�)�c�c�z� � put�(�3�3�R�4�4side"�k�H"�n�H"�n�H"�P� � "�&�S"�p�S"�p�S"ver�R�y�y�}�z�z�~�T�T�9�a�aflow��x�x�)���4�^�^�b�c�clay�3�x�x�Q�^�^ridden�g��$��$��\��I��I��4��e�>�y�y�0�`�U�`�U�`�9�z�z��G�G�N��viewBwB�*��>W>�e�p�p BwB >W> BwB BwB BwB >W> >W> >W>BwBx���: BwBwn�<�y�y�5�z�zpackage(�h ��b ��b ��Y�3�3 ���dding�F�l�l�d�R�Rge ��7�{���~�#�{�{��p�p��7�L ��7\��7��]�g6 II�P�]�g6 II�P�]�g6 II�8 ��7L��c�S6 II�D�c�S6 II�D�c�S6 II ��7 ��7int�^�y�y��z�zn: ��? �j�? �j�? @ �?�B  �t�B  �t�B  ning�d��rallax � �B�`��(�j�c�cent�O�y�y�j�z�z�OT�T�T�C�Z� �Z� �Z�T�T�T�a�Z��Z��Z�I5�H5�H5s�i�T�T�/�a�at�9�{�{��3�3s �,� � y�{��ss�!�Z!�Z!(�M�a*@�n�a*@�n�a*@�D�a�aed�W�Q�*�Q�*�Q�g�3�3�R��}��}���T�T�+���e�c�c�G��ing��y�yF�u�+,� �b��s�+,� �b��s�+,� �b��J�z�z�k�T�T�2]�7]�7]"�v!` �!` �!` �1�a�a�l%�@%�@%�>��te�~����p�p �f �y �8d�r�{�{th�1�{�{�M�y�y(�  �s�9 �s�9 �s"�Z �W �W �n�T�T�)�a�aH�~)�t . )�t . )�t . � ��length�Q�s�s"�p������U �p �p  " ��|�|� ��offset�s�3�3�X�z�z ���s�D�{�{"�G����� �Z��pacing�q�3�3�V�z�z � ��use�@�{�{�t�y�y(�t�H�D�H�D�H��z�zd�R�3�3s�;�3�3yment� ���7�@�6�I�V��C�y�i�`�o�s�Ber�j�W�^�W�^�W�'�G�G�2��cent �|� � fect��{�{�q��orm(��/�*�$�/�*�$�/�*�d�3�3(�?�/�j�e�/�j�e�/�j�<�T�T�6�x�x�w�a�a�T�^�^ance���$~��D�9�D�9�D~�1�3�3:��k�e�5�y�k�e�5�y�k�e�5* ~�s�c�)�c�)�c~��1��\��\� t�d�t��t��t��t��t��t"�R� �Y� �Y� (�p� �?� �?� ed�C�x�x�W� � �w�^�^� ��ing�0�x�x�`�^�^s� �x�xmitted �T� � petual�6�3�3 �V��spective� �y�y�0�3�3�D�z�zhysical��y�y��z�z��T�T�T�a�as�)�y�y�B�.�.�"�z�z�_��D��D��E�z�zink�o�x�x�#�^�^ning ,�L � � xel �h� � s��y�y�>�z�z"�Q��sQ��sQ����"�D�%�Z�%�Z�%"�BQ��Q��Q��O�c�c���lace��y�yy�s�y�yL�C�&�> %��&�> %��&�> %��z�z �F �u �u back�T%�V%�V%F+�T�� b��� b��� b�%�W%�W% �{��s�K�3�3ugins�*�p�psK�7�= �@C��mK�7�h �oC��K�7�zK�7�K�7�M �r �(C��FC��=C��LK�7�$K�7�sng����I�+�h�h�k� �]�]�! �? �H �> �Q �^ �$ �K � �q �h �w �{ �Joint��3�3�=�T�T�x�a�a�,-�b-�b-er@�|;OKB�[V�;OKB�[V�;OKB�[V�:�x�x@�7;OKB�fV�;OKB�fV�;OKB�fV�X�^�^ downcapture �<�a�ainfo�e�T�T� �a�as �_I�CI�CIlygon�).�*,\6-.2;{3!�.D/c 1V� 0 �X&-&9 g(c�L, (1DnLO �'�4\ ""�VĀ����0��3�3�~�z�z ��� 0polyline��3�3��z�z ���pular�o�{�{sition�s���M�{�{�<�p�p� �}�8�}�8�}(�r�8� �$�8� �$�8� "�VG!�RVG!�RVG!�Z� �T� �T� �]�� ed�d�y�y�_�z�zsible�v����{�{�?�p�p�E�y�y"�Jfe�Ofe�Ofe�~�z�z�W��S��S��(�R(�R(�ct� t� t�o��s��s���G�G���U��U��g�^�^�z�kz�kz�,���p��tential�!�{�{wer�-��"�4 ;�5 ;�5 ;ful ��[�?�[�?�[�{� �D�-�E�-�E�-?�v�y�y�M� �3�3�M��z�z�/�y�T�T�&�N��;�q�1�a�a�t�X�g�k�:ractise�f�{�{e�O�v�v��u�u calculate���ferences �Nsence8�7�Z���~1��}�p�p*8�7�_�q�q�X"1���r�r8�7�$�T�T8�7�q�x�x�\ 8�71���a�a1��J�^�^ 1� 8�7 8�7s)��K�p�p)���z�z)�)�F�>fH% �>fH% �>fH% able �+�a�acancel ��a�aes�>��F��F��y��S��S�ing�+�T�T�f�a�avent�e�x�xiew � � � �ous� P�L W !�@ W !�@ W !�z� �! �&�2�H�2�H�2�n�s��U�A �D�2�.�2�.�2��G�L� ly��x�x�G�^�^imary�4�T�T�o�a�avate����*�3�)�<�I��6�l�\�S�b�f�5obably �1�G�Gduction�w��gress �$�|�[� �[� �[���3�3(�5�4�k�_�4�k�_�4�k6���]��]��Ij�| k�9S�[| k�9S�[| k�9S*�@�Q`�Q`�Q�{��ject�����p�pmise���p4��2 s\�t�2 s\�t�2 s\ S�.�[$&tu(�$&tu(�$&tu(F�|=�:�c�N�K=�:�c�N�K=�:�c�N S�N�4>�@:�e�|�Y>�@:�e�|�Y>�@:�e�|�4�E�?Xf=�_E�?Xf=�_E�?Xf=.�vDn`}(�KDn`}(�KDn`}(�1�� S� S�4�PH�?XfB�dH�?XfB�dH�?XfB: �>"nd(�G"nd(�G"nd(�i�c�c( �#W�=�oW�=�oW�=agate�<�y�y�7�z�z ing�M�T�T��a�a on�h�y�y��z�z�G�T�T� �a�aeffect R� R� R� R�rties�;�{�{� �y�y�M$�$�$�TG�5G�5G�f�x�x��^�^y��V�$�V�$�V��^�^���s(��m�^�2�m�^�2�m�^(�K�/�~�Q�/�~�Q�/�~0� %�GS %�GS %�G� �x�x0�R (�GR (�GR (�G�=�^�^�0��vide�Q��� �{�{��p�p��T�T�y(�R(�R(��G�G�U�a�a�+(�8(�8(���d� �y�y(�.�%���%���%��I�z�z�C�G�Gs�a����{�{�!�'�T�'�T�'�Z�g��g��ging�a�3�3��x�x����T� � �=�^�^�K�c�cush �f�G�Gt �{�G�Gquality��{�{�x�p�peryselectorall��c�cick, �/ �,�}S�L�}S�L�}S" x �C�{�{& � �<�r��r��r �/  x � �  �/  �/  �/  x  x  �  �  �  �/  �/ ly�t�x�x��^�^te"�s*t4�,*t4�,*t4"�*t4�*t4�*t4rad� �x�xius�H�f�f�f�L�Lx�%�6���%�6���%�6�%�6�%�6�������%�6�%�6nge �R� � te�`�)�)ios�?�x�x�]�^�^w �� � e�N���n�� �s� �s� $�f�r� �r� �r�M�_�t��t��tT�c�Z�)� 5��Z�)� 5��Z�)� 5�i�y�y�yL��^� *� 5�q�^� *� 5�q�^� *� 5 �zach�"�3�3��G�G�b��t�^   i (R 3W6zi (R 3W6zi (R 3W6z   ���4     �ZZV2>u1�'/~vE   �ZZV2>u1�'/~vE   �ZZV2>u1�'/~vE    ��F�0�0��`   (y�K,��#`$!�f�8�<,$I'�f77A �?*{ �.# ""�VĀ����06���Zm��Zm��Zw �|   |z%� �7z%� �7z%� �  �P    B c"w7I c"w7I c"w7    ������j   $�0�H$�0�H$�0�V   �f   �*�z�z�f   0read�^���!�3�3�f���+�G�G�o�c�cing�]�x�x�{�^�^l�5�x�x�S�^�^istic  ly�^�x�x�|�^�^�j��sons�� �n� �n� �s�G�G�2�x�h�x�h�x calculations��x�x�/�^�^eive"��`�]�`�]�`"�X�&`�_�&`�_�&`s�-�T�T�s�a�a�d��ipes�` �r �r �} � � ognised��T�T�H�a�a s�F�p�p�H�T�T��a�ammend�I���Y�p�p ed��x�x��^�^rded � � � t��3�3��z�z .�Y D*?�X D*?�X D*?duce�0�3�0�3�0�3�0�3�0�3�0�3�0�3d ��7 � � ��7 � � ��7 ��7 ��7 � � � � � � ��7��7�f��y�y�@�z�z"�w �( �( ����� � "�3 �, �, �~�^�^"�M �Q �Q erence �O���[�G�G� �c�cred�h�y�y�c�z�zgistered�K�3�3 property�X�3�3ular�L��lated�.�Q�c�T�T]�N��)�a�a�:�cive:�p�a�2� �a�2� �a�2� �_�_�'� � �)�E�E�"�|"�|"�<��eased�@"�4"�4"�{"�A"�A"s�A�T�T�|�a�aing�3�T�T�n�a�amoved�O���n�?�u�u�a�8�v�v�Z�x�x�X�x�^�^s �t� � ing"�=��!=��!=�"�@?�$�?�$�?�$nder���i��i���G�5�G�5�G(�d��A�4��A�4��A(���,�(��,�(��,���ed��p�p�k�y�y�d�z�zrs N� N� N� N�ing"�I�5�7�5�7�5"�}�z5�3�z5�3�z5s�B=�==�==�t=�#=�#= �{orderE�5=�E�5=�E�5E�5E�5=�=�=�E�5E�5ing��x�x�;�^�^peat�5�H5�H5�>�y�yF�\�M  $(��r�M  $(��r�M  $(��w�z�z 4�G  &$�  &$�  &$delay(� �b�1�b�1�b � �a �a ing�w�3�3 ���s�G�{�{�M�3�3 �o��type"��3+�Y�3+�Y�3+ �b-�T-�T-tition��3�3 �&��lace�h�{�{�b�y�y��z�z�?�x�x�]�^�^yed�.�3�3 resenting��)� �)� �)�n�z�z �o�� s �0 � � size+�+��X �q �q +�+�olved�:�y�y�e�z�z�B�{�{r�&�p�p s�/�p�ps��y�y��3�3�1�z�z pectively �f� � �6�� onsiveness�6��tart�a�3�3ed�.�3�3delta�J !� !� !����2�F�F�#�c�c�="�S"�S"ored�l��speed�4 � � �)� )� )�'!�M!�M!ult��3�3��T�T�_�x�x�~�G�G�N�a�a� �^�^�?��ing�H�x�x�|�^�^me�A�{�{�U�#�#d�?�3�3turn���.�-�c;�Y�c;�Y�c;�H�t��t��t� � �I� �I� �O*1�!*1�!*1(�$�e2�d�e2�d�e2�^���f:�G:�G:s"�Z� �� �� � ���x� � �O+�+�+�E�c�c�i��~��~�using�n�y�y� �z�zverse�S�� �u�f�fs�l�3�3ting��3�3gb�] � � �& �h �h a(�t2�n �V2�n �V2�n ��3�3(�-2�0 �2�0 �2�0 ight�/�y�y�h�z�z�b�F�F��t�t��S�S��Z�Z�v��oot �4���m�c�ctate���.� �:�+ �:�+ �:�_�p�pL��5 �*�5 �*�5 X�'��v0"� ��v0"� ��v0"L�;�5 �+�5 �+�5 �L�T�T�5� � ��a�a(�((�L(�L(�}8 "0",! !0Lgq&@_!K +\" +%sh-!&8/7( !H4K �Q! 9X ""�VĀ����0�@�-6A#%�y/$�6A#%�y/$�6A#%�y/$0rotatex��y�y"�)�YQ� �YQ� �YQ�=�z�z �?S�.S�.Sy�H�{�{��y�y�*�3�3�>�z�zz��y�y�;r�Cr�Cr�?�z�zion� �s �s ��3�3und� ��wvalue"�X�<�<ule��T�T�S�a�as��T�T�[�a�an �E� � �4B�B�Bning�{�3�3sN� l}#T%� cl}#T%� cl}#T%� <� 1GX{�CX1GX{�CX1GX{�CT�/��"`$F N��"`$F N��"`$F 4�CvpH�XP�-vpH�XP�-vpH�XP@�}�Nef�$�a�Nef�$�a�Nef�$4�|vpH�R�lvpH�R�lvpH�R: �o�h+N �a�h+N �a�h+N r�oM�S(D� �A N�|M�S(D� �A N�|M�S(D� �A N�(�bszc�<szc�<szc(�N�4� N�4� N�4��G�G: �'�k,T �`�k,T �`�k,T ~ �%0�Y(E�x�A N�z0�Y(E�x�A N�z0�Y(E�x�A N�"�y�3�;y�3�;y�3(��\b[� �\b[� �\b[" �o�d��d��dam�[�y�y�x��e�v�p�p��y�y@�m� �;�D-�]� �;�D-�]� �;�D-�O�z�z"�D�:��:��:�l�Q�)�Q�)�Q�}� � "��E��E��E��<�$�<�$�<�R��������ple �k-�-�-d � }�L}�L}uration �Z�8�8ing �"�G�Gndbox�h�x�x��^�^cale6�61�41�41�Q�N�{�{�\B�$�'�w$�'�w$�'�CZ�~-�xd�- �2-�xd�- �2-�xd�- �*�#��4��4��GB�7-�8d�--�8d�--�8d�MH�9 h%�g�3� h%�g�3� h%�g�3�=H�=�])Q�C�C�])Q�C�C�])Q�C� �% �L �F�t h%�g�!3� h%�g�!3� h%�g�!3}H�q�G)Q�C�?�G)Q�C�?�G)Q�C�# �x$� �t �t �#�1���"x����S�p�p��y�y�%�3�3�9�z�z"�5W�!W�!W"�o�'�'y��y�y�&�3�3�:�z�zing�x�y�y�0�z�zenarios ope�| �a �a "�'�`�`�a�x�x��^�^d �reen�u�p�p�Y�Y�!�Y�!�Y�e� � �w�Y��Y��Yshot�b�x�x��^�^ipt@�r �  �  �I�k�k"�$(!�(!�(!�Z �W �W "�zS �S �S @�R � )�[ � )�[ � )ollj$HoHj�*  -�/�*  -�/�*  -�t   J��m1*�h�51*�h�51*�h R!DOD�  -�  -�  -0$HoH�   ��!DOD$HoHF$HoH�d (�J�} (�J�} (�J�L�>$HoHR n,J =�  n,J =�  n,J =� =�4 �o .   !P    #�D .   !P    #�D .   !P    #� !DODm�a�aD!DOD�A (�6�w (�6�w (�6l�!DOD5 j1K �  j1K �  j1K � "$HoH�.$HoHable�m �q �q ����V ^�$ ^�$ ^� �W �W �P�c�c direction �_��er ���~��~�ing��3�3�}�T�T ��^�0�\�0�\�0�8�a�a���length �S� � ref �!�~�~�Y �N �N timeline (�X T�# T�# Tx ����P�c�cy (�0 �@0 �@0 �R�c�cprogress�~ � � �L �h �h .�3 S2�{ S2�{ S2.�m 6�~ 6�~ 6earch �n � �@cond.�@a��J� a��J� a��J�� � �(�G�G�3��s��s�s�v�y�yX��k�`� .� ��k�`� .� ��k�`� .� ��z�z�p�-�-:�B��K�h�8��K�h�8��K�hs�t>�d>�d>tion��y�y"�Q�3Q�3Q�S�z�z�,�r�r�b� � �J�X�X�_��e�"�{�{ �_�r�x�x� �1�&�^�^�_��gment(�O3��L3��L3� ���s� ��lector�w�a�a��T�T�a�a�a s�{�#�#ikoff�\�y�y�y��quence��y�y��' D) *� C*-/@�7 D) *� C*-/@�7 D) *� C*-/@�}�z�z s�8�{�{�m�y�y4%�I�T �^�{�T �^�{�T �^��z�zries�x�y�y�s�z�zt� �{�{F�G ��V��/G ��V��/G ��V���|�3 GP  c�/L_&�C�q�3 GP  c�/L_&�C�q�3 GP  c�/L_&�CR�OG �:��V�W�0G �:��V�W�0G �:��V�W.�q 9��l 9��l 9�4&=+$��-�[!< :� �'DE% #VCq[?' )`= !!�WĀ����2����6���6���6 �70t�r0t�r0t�E� � .�b [ �= [ �= [ .�) <��v <��v <�4�@�� ��� ��� �o,z�A,z�A,z�v����UIQR �. O�q$'$ AJ�UIQR �. O�q$'$ AJ�UIQR �. O�q$'$ AJ 0setisopen�F�x�xopen�L�k�ks�0'�'�'crolldirection �`��tatus�%�y�yting�q���&�{�{�V]�]�]@�@�X�,i�2�a�X�,i�2�a�X�,i�2� �3�3@�y��,i�p�b��,i�p�b��,i�p�Iw*�7w*�7w*�s�x�x�P��"��*�9�*�9�*�#�^�^� �c�c�o��(���S���S���Ss�O�fO�fO �#��up�J�p�p�p�y�y"�)�~A�?�~A�?�~A�[�a�a�{Y�Y�Y"�S�F9�h�F9�h�F9hadow��y�y�9�z�z�]�x�x�{�^�^s�K�x�x�i�^�^pe�1��red �H. ����Y���Y��(�C�!�t�M�!�t�M�!�tortcut�f��c��c���Z�"�Z�"�Z s �_� � hands���uld��{�{�b�y�y�]�z�z��T�T�t�x�x�U� � � �^�^�E���:��w�T���2�p�p � �h �h ide��x�x�.�^�^milar�:�x�x�X�^�^�\���#��ple���"�Y�T?�l�T?�l�T?�)�p�p�{�7�D�7�D�7�3�z��z��z�w�T�T�j�x�x�/�a�a�:�P��P��Pifies�h��y�g�p�p ultaneously�L�y�y�g�z�znce �E��gle�v�{�{�1�s��s��s"��??�9�??�9�??�,�!�[�!�[�!ze�2�3�2�3�2�3�2�3�x�x�2�3�2�3�2�3s��3�3kew��x�x�,�2�2�@�y�yx� �y�y�.�3�3�B�z�zy� �y�y�/�3�3�C�z�zi�~��low��x�xs�B�{�{maller�H�3�3�)�x�x�0�G�G�G�^�^�;��rt��{�{ooth�v���J�x�x�~�^�^ed � ��� �c�cing �����c�cly �B  nap ���x�x�=�^�^"�c@�Dc@�Dc@ping�p��y��y�y� �z�zshot�#�x�x�A�^�^ s�@�x�x�^�^�^o���g��g��>�p�p�C�B�9�B�9�B�>b�b�b�|�x�x�h���}@�L@�L@�v�G�G��^�^��c�c�".�p.�p.�u��me�7�T�T"�E�p%�g�p%�g�p%�|�G�G�}�a�a"�q�b%�[�b%�[�b%� ��thing��-�M�-�M�-�8�-�3�-�3�-imes(�#���Q���Q��(�\�V�H�`�V�H�`�V�H�Q�x�x��^�^urce�x���k�{�{��p�p �g �z �9paced�7�y�y�2�z�zecial�n�3�3�S�z�z �r��fic�d���o�{�{�C � � ��x�x�.��"�o�G�G�M�^�^�h�c�c�9D�fYD�fYD�f ally�L�p�p��x�x�C�^�^y��x�x�K�^�^ed�r�`�`@�<'�[ �s'�[ �s'�[ ��`�`�$�+�+�/)�X)�X)s�?�{�{lit 5� 5� 5�5��"text 4� 4� 4�4��"read�R�3�3 ���ingp�74 8p� �o �o  i�(p�7�,�[� �[� �[�>8p�[�j  D�2 @  " �h�j  D�2 @  " �h�j  D�2 @  " (i����a��a�p�7p�7�0�x�xp�7�p��8p�V8p;  $<  K(/  $<  K(/  $<  K(/i�i�� �^�^i���c�cp�7�Vp�7�70 /!�i "@  + # "�G$�Q0 /!�i "@  + # "�G$�Q0 /!�i "@  + # "�G$s �j��x�x�o�G�G�%�^�^value K� K� K� K� quarespace^�^�^�^�rc�P�{�{tagger2:��/ �K �K  �o�v�v >:��j  �  �   ��z�z �m :�:�� @�3 �N �N  children��f�f direction� �z�zing��{�{rt, �/ �>p�}�/p�}�/p�}, x �Q�,�Q�,�Q � �<�p�p �/ � �y�y�" x ��g 7N! '5 �7�q�g 7N! '5 �7�q�g 7N! '5 �7N � �K�z�z �/ �K, �/ �f �#�L �#�L �# �/ F x �H$#&#�k$#&#�k$#&# x  � , � �6 �+�* �+�* �+ �  �/�h�`U/<( _'/z !BO ,!!  :$4�R'F<%q$Z #$�,#0�) !!�WĀ����2� : �/ �2�E 9�|�E 9�|�E 9�.0started�7�Z�����;�p�p�7�H�� ��k�7��T�T �7 �7 � ���w�a�a � � �7 �7ing�;�{�{�W@�u@�u@�%��w��w��C��]��]�s��y�y��z�z�s�T�T�7� � �9�a�a����"��te�M����p�p4��#�)�0�#�)�0�#�)��'�'� � �s� �s� �(�R�R�Q � � �^��G�G�F�8�8� �\ �\ ic�Y�3�3us�$ �o �o  ddeviation�5�P�P�y�]�]icky�@�x�x�u���Z� � �^�^�^ffness�h�{�{4� 0�,c�f0�,c�f0�,c���.(�O�)��)��)��c�cL�M�g� �o�(M�g� �o�(M�g� �oll�=�x�x�k�^�^���op�>�=>�=>"��#��#��#�<G�5G�5G�J�B�B� ��O�Oped�*�3�3 ropagation�m�H�H�3�U�Us��3�3�8� � re � � � �K �X �X raight�g��"��O��O��O�o� �h� �h� forward�T�p�p �q��ngely�N�x�x�l�^�^ength�r�3�3�g�G�G���tched�y �o �o � �U �U s� �x�x�(�^�^ing�V@�u@�u@s�M�{�{�l �n �n �K�3�3�% �o �o yle��� V��R�p�p.� o;�= o;�= o;V��S�3�3.�J o;�> o;�> o;j�,A� (.v`�IG �MA� (.v`�IG �MA� (.v`�IG (�(�e2�e�e2�e�e2 V�V��O�G�Gj�XA�(.x`�3G �AA�(.x`�3G �AA�(.x`�3G (�a�$)6�f�$)6�f�$)6@�<u($2�uu($2�uu($2effect U� U� U� U�s�)6�j6�j6�W�x�x�/���u�^�^�i�c�c�M���yudden�e�3�3��G�G�\� �t� �t�  ggestions��{�{�{�p�p percharged� ���F�p�ppowers��y�y�X�z�zport�bW�W�W��T�T�'�x�x�=� � �;�a�a�E�^�^ed�*R�cR�cR�r�x�x�F� � ��^�^s� )b�)b�)b(��D9m� �D9m� �D9m$�g�;�@�;�@�;�O� �}��}��} � �D �mvg (�5, Y�V��i��i� 8(�5�s�{��d�{��d�{�FY�O " n� �j " n� �j " n� 4� �9�C�s�9�C�s�9�C>(�5�� +�� +�� + (�5� �s�s(�5� Y� Y�4�'� )�� )�� )��Y�Yp(�5�$��j$��j$�(�5�=effect X� X� X� X�s ��3�3�v�x�x��^�^�8��witch �Res�[�3�3 �}��ing� �x�x�L�^�^ ynchronise��x�x�A�^�^tax�1�{�{stem����B�p�p�X�m� �m� �m�v�m�s�m�s�ms�{�x�x��^�^t�T�`�`�6�p�p�^��j��j��m�L�i�L�i�L���k��k�(�h� �)� �)� ^�g�. �1�8~ �h�. �1�8~ �h�. �1�8~ �r��(�#�& �+�& �+�& X��0 �1�8~ �c�0 �1�8~ �c�0 �1�8~ �&�c�c�p��ag�s �W �W ���ilored�M�p�pke�@���I�p�p�O�y�y'��3�3�z�z�z�~�c��c��c��G�G�*�U� �U� �U�]��s� �x�x�O� � �>�^�^ing�=�x�x�[�^�^lk��x�x�!�^�^p�}���"�y�yZ �cH% �;{cH% �;{cH% �;" ���M��M�cancel�c�T�Tpable�p�T�Ts�v�p�prget(�Q�4+I�W�4+I�W�4+I�$�=�x�=�x�=(� �v+I��v+I��v+I�K�T�T�:��^!�Jg\%!:�*Jg\%!:�*Jg\%!:��G�G��a�a�r�c�c�,��L�d�.2* �x�b�.2* �x�b�.2* �xs4�\�OXR�&\�OXR�&\�OXR.�X\�H�E\�H�E\�H�,�T�T�g�a�aechnical�\�s�s�z�Y�Yll �S��mplate b�7.[��`��e��e� b�7([��T ? �- ? �- ?  b�7 b�7 b�7.[��{��D��D�4[��0�0�0F[��s�#1�`�#1�`�#1 b�7 b�7orarily�.�T�T�i�a�axt 6� 6��8�x�x 6�6��"�V�^�^han�*���"�{�g�p�p�9�W�y�y�^ �)�"��"��"���z�z"�Q�Q�Q�= �*�!�Y�!�Y�!� ��-�1�G�G*�@Q�Q�Q�$�#<I�&.�"O&5%!1�/$I+ E/e�H$8 :�sm!\ �WL$�B6 !!�WĀ����2� �H�!�?�!�?�!�-�Y�],�=��k���k���k�0that"��!J�1�!J�1�!J$� ?�@i?�@i?�@i�jZJ�PZJ�PZJ4�\��U�N�N��U�N�N��U�NL��@�D�~�;�8�H�@�D�~�;�8�H�@�D�~�;�84����|�_���|�_���|� �T�Tf�[1�B�V|Q9S?�~|1�B�V|Q9S?�~|1�B�V|Q9S?�~"��w ��w ��w *�Np�X�agp�X�agp�X�a"�Nv�K� v�K� v�K�E�a�af�1�I�A|Q9S?�~p1�I�A|Q9S?�~p1�I�A|Q9S?�~"�S�y �a�y �a�y �d��_X�%�C�u�E3�T� �f�C�u�E3�T� �f�C�u�E3�T� ex� \  jM1#][ \  jM1#][ \  jM1#]q�r�' /5 . :."/')I-5" /5 . :."/')I-5" /5 . :."/')I-5"��0? E48 ' tW(5B? E48 ' tW(5B? E48 ' tW(5�R�-H�EC*# > b �.E\/S+JH�EC*# > b �.E\/S+JH�EC*# > b �.E\/S+J�Jr�(?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  (?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  (?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  �L�fH�Eb*# @ b NEj1c6KH�Eb*# @ b NEj1c6KH�Eb*# @ b NEj1c6��~V :  2  : " >V :  2  : " >V :  2  : " >��t%M1 !>. =g4( "   #)4&%M1 !>. =g4( "   #)4&%M1 !>. =g4( "   #)4&b� �~'! &*VX-'! &*VX-'! &*VX-�.r�-@4  " !     10@4  " !     10@4  " !     1�r�y A # 5  "5/y A # 5  "5/y A # 5  "5/��6Y :  2  / %" >~Y :  2  / %" >~Y :  2  / %" >��bM1 !?0 'g4( "   #)4&PM1 !?0 'g4( "   #)4&PM1 !?0 'g4( "   #)4&x�6' ,*x0' ,*x0' ,*x0��J!& 3:"* BJ!& 3:"* BJ!& 3:"* ��o>M51Q25  3  H: D<&$!  *, b !>M51Q25  3  H: D<&$!  *, b !>M51Q25  3  H: D<&$!  *, b !Mir�.���b�T�T��x�x�(�a�a�!�^�^m4�C�9(y'i��9(y'i��9(y'i4�o�?(y)i�v�?(y)i�v�?(y)in��{�{����B�x�x�� � �`�^�^re�@���.�{�{�P�p�p�@ �* �* �~��k��k��l�`�4�`�4�`���Q��Q��$�c�c���� �v �v by�V��fore�_�y�y��z�z��T�T�W�a�a�V��se�[���k�{�{�c�<�?�<�?�<.�dqv��(qv��(qv��^�j��j��j�(�b!U�b!U�b!"�,`G�+,`G�+,`G�&���B� � �J�G�G�c�m!W�m!W�m!"�L,JG�',JG�',JG�`�c�c�h�h�h.�V���P���P��y�M���n0�eR'�}� R'�}� R'�}�M(�^R'��R'��R'�B�D�K�D�+�+�K�D�+�+�K�D�+��<� � :�r�Q�D�+�!�Q�D�+�!�Q�D�+ing�<�x�x�Z�^�^s�=�x�x�[�^�^rd�z��s(�6�8�\��8�\��8�\4�&-I��U�$-I��U�$-I��U�>�p��p��pl��N��*d)�,Dp� =�N��*d)�,Dp� =�N��*d)�,Dp� ^� & � "Lb4W�S�0& � "Lb4W�S�0& � "Lb4W�Sr�P�N��jf)�LD��.>�N��jf)�LD��.>�N��jf)�LD��.(�D?:M&�p?:M&�p?:M&��H)(�/on4�]E�)(�/on4�]E�)(�/on4�]E��w��w��wZ�)L9�g  >�bL9�g  >�bL9�g  >�<�eZ�C& �oZ�C& �oZ�C& �(��M&�r�M&�r�M&� �B�8)(�1Yn4�]Ea�8)(�1Yn4�]Ea�8)(�1Yn4�]E�F�E� �E� �E6�smI) F�7?mI) F�7?mI) F�7|�L& �>9�$$N��E& �>9�$$N��E& �>9�$$N�ose�[��k��k���P�,:�&�+6;;�8�j� �m ""�VĀ����0 ��P�,�P�D�x�x�b�^�^0three��{�{�e�y�y4�m� � �� � �� � "��6�6�6�6�6 �q��js� �3�3ough�~��w��w��y�$�X�$�X�$�`�T�T�����a�a��c�cout(�9��?�8��?�8��?��3�3"�4�_��_��_�H� � �a��ickerR�5K�R�5K�R�5R�5�C"R�5�x   K�K�K�R�5R�5dy��y�ymet�7�d�m��t�7�J�y�y�Y�4�o�&�9A 8�A,� �8�&�9A 8�A,� �8�&�9A 8�A,� um�� �z�z�+t�7�H�T�T�7&t�7�F�?�;�?�;�?�A t�7�%���u����J�!o1�&!o1�&!o1�4m��9�a�a�w$m��$�*�6�*�6�*am���c�c�*t�7�KD t�7�.�E�T�5�E�T�5�E�T�*constant�H�i�iline��3�3 physics�U�3�3��G�G���s�J�{�{.�E#�M#�M#4��h��h��h.�@#�N#�N#�p��4��4�4�Q�D��D��Ding �fny�=�{�{pso��)� "64 !-4)� "64 !-4)� "64 !-N�vl t �Y1s0�+>�Y1s0�+>�Y1s0�+a��DP25�3)M .;P25�3)M .;P25�3)M .H�<�t QO-9g %8 r�<i:", �;z� QO-9g %8 r�<i:", �;z� QO-9g %8 r�<i:", �;z�P��Hl t �$�!G!I L.G7:7S<� @A'-$ 2 ZP�>�.�!G!I L.G7:7S<� @A'-$ 2 ZP�>�.�!G!I L.G7:7S<� @A'-$ 2 ZP�>F�4�, RO-9g %8 �2�>i:"�� _P RO-9g %8 �2�>i:"�� _P RO-9g %8 �2�>i:"�� _}�$�- @� Q $-",s"3\ @� Q $-",s"3\ @� Q $-",s"3I�&�r�<z  104  kM. �@^.R6 "�rz  104  kM. �@^.R6 "�rz  104  kM. �@^.R6 "�j�+R�20tY j6$20tY j6$20tY j6��l t �V y.uK �V y.uK �V y.uK;ll t [II%)K?g[II%)K?g[II%)K?���h @� Q $-62s"3^ @� Q $-62s"3^ @� Q $-62s"3M�d�-=|  306  kO. �@^.R6 "�+=|  306  kO. �@^.R6 "�+=|  306  kO. �@^.R6 "�UJ�>2,zY T9$2,zY T9$2,zY T9=8�y}"�qh}"�qh}"�q��d�q>KA<79O(d�U$I) <��$>KA<79O(d�U$I) <��$>KA<79O(d�U$I) <�[�ol�)�{�{� �3�3��x�x��^�^�y��s0 �6�"�v�v�^ ��{�{�{� ��I�p�p�Q �6�w ��3 �� �6�   �6� �G �6�\ ��6 ��l ��M ��D ��S �6�3 �6�p�-�y�y�f�z�z�`�T�T"�E�S+��S+��S+��a�a�@��ics�/�R�c�O��;�dtal��3�3�p�z�z�U� � ���uch�t�p�p4�!�= �`�= �`�= 4�\�= �m�= �m�= r�C���L�p�prack �X��L�\ -�t!� -�t!� -�t!�b�_�_ed �R�%�g�%�g�%ing �y�y�ys �g� �  ditionally��x�xnsform x�7(<w�f-�lf-�lf- q�Fx�7�LLb�"Lb�"Lb(<w�S��4��4�Fq��0Lb�#Lb�#Lb x�7>x�7e�8|�\�T��8|�\�T��8|�\�T(x�7�| � � <w�j� � <wZ�G�G q�4q��z|�F�T�N|�F�T�N|�F�T(q��- �T �T x�7�m$�z$�z$ x�7 box�s � � perspective� �y�y�1�3�3�E�z�z s����F�{�{�s�p�p( �p* �7* �7* �8]�X]�X]( �)* �8* �8* "�O+��N+��N+�"�+�m�J+�m�J+�m( � z�z�z value H� H� H� H�ition�- � �  "%��F �e �e  d�Mp� �b$!�l �.p� �b$!�l �.p� �b$!�l  4�cl�a��el�a��el�a� j%��Rp�I �d$!� $ �?p�I �d$!� $ �?p�I �d$!� $  �<�T�T ^�u    ��j    ��j    �  �&z�Oz�Oz %��C�a�a j %��q    � �b    � �b    �  %��  � �m  " m�dE-(A#%�m/$1 1.&   "TNL��b'�  �16�UH/0GH �9+�# ""�VĀ����0� m�dE-(A#%�m/$1 1.&   " m�dE-(A#%�m/$1 1.&n 0transitions&,�5�K��"(��B�j�jb,�5�) 2��� 2��� 2��"�( �4�x �4�x �4v(��L 2��3�o 2��3�o 2��3,�5�   � ,�5�u�*�  *aJP6n�*�  *aJP6n�*�  *aJP6,�5�#�G�G (��(��K�.�  *aJP6b�.�  *aJP6b�.�  *aJP6(��,�5�r:,�5�Y5 �8�5 �8�5 �8late�z�y�y��3�3�3�z�z x�G�u�u��3�3��v�v�$�G�Gvel�x�T�T�G� � �>�a�aees�{�y�y��z�zick �N��gger�C���R�{�{� �p�p�% �C �C �8�x�x�` �P �P �l�^�^�;��ed�>���,�O�{�{�r�[�[ �=�=�x�x(�t�q�q�0� � �o�^�^(�,�B�Bing �s��s�]�y�y��z�z��x�x�-�^�^ oubleshooting�,�x�x�`�^�^ue�.�p�p�G�x�x�g�{�{�m�G�G�w�^�^��L�Lly�F�x�x�r�^�^sted���y�j�x�x��^�^s�f�p�pug�5�T�T�{�a�atorials �b �u �4weak�,�{�{en.�/[.�)[.�)[. (�2] .�k] .�k] .o�d�{�{��y�y��3�3�L�z�z:�{E�%�*�@�,E�%�*�@�,E�%�*�@"�n�# �f�# �f�# "�y�N �r�N �r�N :�1;�,��@�*;�,��@�*;�,��@"�&�% �5�% �5�% �Y���w��ype�3�5�H�5�H�5.� �9�L�j�9�L�j�9�Lp�#�W!o�yQ"#�e�W!o�yQ"#�e�W!o�yQ"#.�B�9� �+�9� �+�9� �R�x�x�&�G�G��^�^�l��|�pk"h�4SA#%��tk"h�4SA#%��tk"h�4SA#%�s�6����p�p�'�i�i�'�3�3�`�j�j�o!�s!�s!�'!�D!�D!writerU�5N�U�5N�U�5U�5U�5N�N�N�U�5U�5ically�'�T�T�m�a�aui�"�5"��&�"�5 �S�(�S�(�S�/�F�6�F�6�F �"�5%�T�T�"�5�"�5�4�a�a�"�5�"�5�(��sl����]�p�p@�4!�8(�Q�!�8(�Q�!�8(�Q@�4D)�v�{ �;D)�v�{ �;D)�v�{ @�m!�(�c�"!�(�c�"!�(�c .�9�1,��1,��1, nanimatable��x�x�H�^�^derline�4����p�p�7�x�x�e�^�^neath�7�x�x�U�^�^stand�t�3�3�w��ood�k��sirably� �x�x�)�^�^ique� ����{�{�VH�2H�2H�tH�H�Hly�;�y�y�t�z�zts�>�3�3� � � �&�G�G�1��like�q�y�y�*�z�z necessary�f�x�xplugin"� �S �S til�>�3�3�f�x�x�D�G�G��^�^p�p�@�{�{�E�t��$��-��x�x�7�p���r�'�]�M�7�^�^�W�S�W�&date�*�y�y�c�z�zd�V�3�3 �ws����9�B�8�K�X��E�{�k�b�q�u�Dgrade�(�4���(�4���(�4�(�4�(�4�����(�4�(�4rls�l�{�{s�H���}�{�{�S�3�3���D��D��1�x�x�^ � � �W�G�G�L��F��F��O�^�^age�,�p�p�Q�3�3�W�x�x�|� � �A�G�G��^�^eD`~�,���t�{�{RY`�D�d��d��dn `~�NN�(�N�7N�(�N�7N�(�N(��6�#�^�6�#�^�6�#jY`�8N�j�~�FN�j�~�FN�j�~\`~�K��H��H�P8`~� `~�KC1� KC1� KC1�B��~��~�.�9pp S�pp S�pp SRY`�<��O��O�4Y`� Y`� T!4� T!4� T!48`~d`~�bk/`�uk/`�uk/`�uanimate ~�7 w�~�7�%*�Q*�Q*w��{*�R*�R* ~�7 ~�7 ~�7 w� w� w� ~�7~�7�g ionframe ��7 {� ��7 {� J�%$1#b{5#F !3�6�iUt��!1 4,-{culA� s ""�VĀ����0���7 ��7 ��7 {� {� {� ��7 ��70used� �{�{�`�y�y(�$w�]�A$w�]�A$w�]� �z�z�#�T�T"�_c�vc�vc�\� � � )8�j)8�j)8�^�a�a"� e�Xe�Xe@�s8�\.�,�S�H8�\.�,�S�H8�\.�,�Somref �? �= �=  ragcontrols ��7 �� ��7 ����7�N ��7 ��7 �� �� �� ��7 ��7effect�E�6E�6Eful�.�@�;�@�;�@�)`�`�` �a���n��inview � �7 �� � �7 �� � �7 � �7&� �7�)���KV �� ������c�c � �7 � �7motiontemplate ^�7 W� ^�7 W� ^�7 ^�7 ^�7 W� W� W� ^�7 ^�7 value�6 �o �o �f�l�l �X��event c�7 \� c�7 \� c�7 c�7c�7�M�� \� \� \� c�7 c�7 pageinview ��7 ��7 ��7 ��7 ��7 ��7 ��7r �V���2�� educedmotion ��7 � � ��7 � � ��7 ��7 ��7 � � � � � � ��7 ��7f�!�5!�5!�"��s�|�x�x��^�^crolli�7�`��b��T �h �h  i�7 b� i�7 i�7Li�7�f 6!;X�( 6!;X�( 6!;X   y b� b�:b��K 6]�* 6]�* 6] i�7 i�7pring m�7 f� m�7 f� m�7 m�7m�7�p � �  f� f�f�� �X �X  m�7 m�7tate�&�y�y�M�x�x�a��time q�7 j� q�7 j� q�7 q�7 q�7 j� j� j� q�7 q�7ransform u�7 n� u�7 n� u�7 u�7u�7��x�x n� n�n��8�G�G u�7 u�7velocity y�7 r� y�7 r� y�7 y�7 y�7 r� r� r� y�7 y�7ing�+q�)q�)q"� �D �D �h� �g� �g� �\�0�K�0�K�0�*�D�q�D�q�D��>�>�>�>�>�R�T�T@� *�H�K �.� *�H�K �.� *�H�K �.�z���V��x��x��>�\��\��\@�a�L�O ��'�L�O ��'�L�O ��4�c�c�1A�]A�]A�1 �a �a ual� ��ly�B�y�y��3�3�;�z�z �����!�`�!�`�!tilizes -� -� -� -�v4�Z� �� �� 0�]��}�k��}�k��}�� �x�x�B �C �C 4�a>o�O�U�>o�O�U�>o�O�U�{�c�c0�x�y�yalue] �- �U�� D{��{�{&V � �(�#�O�#�O�#�] �- �)10�IE.`��� 10�IE.`��� 10�IE.`���$D{�3%-�eG`�e+ �}#3�K�W%-�eG`�e+ �}#3�K�W%-�eG`�e+ �}#3�K�V � � 10�IEC-�j�G *o10�IEC-�j�G *o10�IEC-�j�G *] �- �(�T�T] �- 2] �- �e$f>�M$f>�M$f>>D{Jw�2�gtw�2�gtw�2�gJD{�.c �/�c �/�c �/&V � �E M� M� MV � 2V � �J$.B�R$.B�R$.B(] �- �*:�d:�d:�P�] �- � �>q+S�-$ !,[ j� �>q+S�-$ !,[ j� �>q+S�-$ !,[ js"Y�7� 5 �\5 �\5 "A��6�U�(�U�(�U"R��v =�* =�* =RY�7�*<�\�F8BQh�N*<�\�F8BQh�N*<�\�F8BQhjA��[��]0�G�H�5��]0�G�H�5��]0�G�HRR��*<�\�8BSh� *<�\�8BSh� *<�\�8BSh"Y�7�A��<��<�(Y�7��v �}�v �}�v :Y�7v�|�U�|�U�|�A���p�p4A��9�X�.�6�X�.�6�X�."R��'��I��I�&R�i�~ �[�~ �[�~ 4R�Y�~OX�~OX�~O0Y�7�54#�I4#�I4#�*>Y�7lH�r� �H�r� �H�r� nilla�g���T�p�pr:�D9�5 �u9�5 �u9�5 "�}9�79�79iable�J�{�{�./�L/�L/�g/�M/�M/ s.� V� V� V"�Et �:t �:t .�F V� V� Vnt�n �n �n �/| �u| �u| �<���t�c�cs�b��-�r�p�p�. �'   +/:.%�i   +/:.%�i   +/:.%�9��"   :<'�:   :<'�:   :<'6�V�7s�7s�76��Bw�Bw�B�ECF�56 ( �6 ( �6 ( Ige�!�{�{��y�ylocity |�7 u� |�7:�V�$ �W�$ �W�$  u�|�7��T�T |�7|�7�4���l����@�@u��z�a�a u�u��h�c�c |�7F|�7�*�T�a�T�a�Trcel��l�l=�0q6{d.aDn�&m$Zp^�< v�C�<5+H8�+�N !!�WĀ����2��#�R�R0version"�C�/ �D�/ �D�/ �#e�@e�@es�h�3�3tical "�O�A�K�A�K�Ay�5���E�p�p"�i�-�5�-�5�-"��-��-��-�s��h �� � ia.�L U/�'�i U/�'�i U/�'�z�{�{4�U� *�(�� *�(�� *�(F�>5�\�)�'�5�\�)�'�5�\�)�':�y�V�Kp ��V�Kp ��V�Kp F�75�^�)�U�a5�^�)�U�a5�^�)�U(�X�y�o�p�y�o�p�y�o@�w�/�M,�N� �/�M,�N� �/�M,�N�y� � (��y�z�r�y�z�r�y�z:�#�7�7,�N�~�7�7,�N�~�7�7,�N6 � �  ht�  ht�  h.�uC�J�CC�J�CC�Jew��1 � � ���1 � � ���1|��1�V  </J'+%�8  </J'+%�8  </J'+%4��1y�,�c�,�c�,�P�� � � �x� ��%  </J'+%�  </J'+%�  </J'+%(� �b�.�2�.�2�.��1�2����1box:�U C�YU C�YU Cport�X���X�{�{�!�p�p� �y�y�'�z�zr�'1*�|2'1*�|2'1*�|^0�?��RjB��RjB��RjH�7'I=�L1'I=�L1'I=�Lsibility�b�b�b�>b�b�bleR��J. � 7.�l�J. � 7.�l�J. � 7.L�@� . / F-�}� . / F-�}� . / F-��H�H�{���`�U�U�/�c�cual�z���Y:�{:�{: �Z�o�Zo�Zo��;�F�;�F�;duration�L�gL�gL�y�E�E�GN�1N�1Nisation �.�G�G e��� r �@�S�v�S�v�S���zers ly�(� (� (�R�x�x�(�!(�!(��^�^�_(�Y(�Y(te� �p�ps ����T�$�{�{�v��p�p�,�0�9�/�B&�V�$V�$V~�B��<�r�b�2V� V� V��h�l�;code����0�w�w��l�lue�6��T     #%  G=C>MB%#%  G=C>MB%#%  G=C>MB%�6��      !�ZZ�2>w1�wH##!�ZZ�2>w1�wH##!�ZZ�2>w1�wH##�6�6�6���2     <�=l<�=l<�=k�H     n|'��|'��|'��7�      @ H""T!:I H""T!:I H""T!:�6�6w � � � wait��3�3 �!��s�9�{�{nt�7�y�y�2�z�z��T�T��x�x�1� � �2�G�G�U�a�a�>�^�^rning �n�G�Gs��3�3�� � tch�*�z�z� �x�x�)�^�^y�#��f��f��n�3�3��E�7�E�7�E���w��w��P�m�s�m�s�ms�e�{�{�s�y�y�+�z�ze(�8�� ��� ��� �$�{�{�@�h4X�h4X�h44� �. �{�7�. �{�7�. �{:��. �5� ��. �5� ��. �5� (�:>(E0�%>(E0�%>(E0.�$ �ey�$ �ey�$ �ey(�j@(F/� @(F/� @(F/�u�!�}�!�}�!�6 �a �a bm~� �{�{$m~�b�L�i�L�i�L���D��D��3�x�xm~m � � m~f�G�G�N��F��F��Q�^�^�M�C�>�C�>�Cflow`��J�{�{`�`�`�gl �4�{�{�P�3�3ll�C�3�3��x�x�]� � �5�G�G�<�^�^���re�q�x�x��^�^hat�1�n��n��n�\�x�x� �G�G��^�^en*�*��[*��[*��h"�^�j��j��j"�a+��6+��6+�Z�A�i�K�U�1�i�K�U�1�i�K�U�j�M�[�M!�W��]�`�[�M!�W��]�`�[�M!�W��]R�z�Ui�M�%V"�B�Ui�M�%V"�B�Ui�M�%V"F�z:$w[�X! �:$w[�X! �:$w[�X! x�'c .( "3�!�*)�y'c .( "3�!�*)�y'c .( "3�!�*)�6�z%"QO}�8%"QO}�8%"QO}�c.�Z�^�;Z�^�;Z�^�D�G�GF�5:$w[�c! �:$w[�c! �:$w[�c! p�F)e .( #5�!�)�m)e .( #5�!�)�m)e .( #5�!�)(�2%"MU�%"MU�%"MU��9�e�9�e�9^�t8�zOT� �<'�8�zOT� �<'�8�zOT� �<'re��p�p�\�y�y�W�z�z�G�T�T*�[�t6q[�t6q[�t6� �a�a�T+�a,G �Y�#$�3$�A7  ?�-�1  T#M!�Q�0@3�+ ����:Ȁ����x /0point)�,-�b-�b-lygon)���line)���ssible)�,��werful)�kresence) 8�7vious)�Livate)�fogress)�{��ps)�0��vide)���quick) �/ radix)�%�6e) �zact)�j   $�0�H$�0�H$�0�V   ct).�Y D*?�X D*?�X D*?duce)�0�3d) ��7gular)�L��lated)�:ive)�"�|"�|"nder)���s) �{order)E�5 spectively)�6��tored)�l��turn)�^��ight)�v��otate)(�((�L(�L(s)(��\b[� �\b[� �\b[ame)�R�����cale)$� �t �t �#roll)"$HoH�.ee)�_��gment)���s)� ��t)�v��ting)�o��hape)�1��orthands)���uld)�E��imilar)�\��plifies)�h��ze)�2�3o)�".�p.�p.me)� ��pecial)�r��ring)p�7tart) �/ ed) �7s)���ill)��� raightforward)�q��yle)@�<u($2�uu($2�uu($2s)�M���yupports) �Dvg)p(�5�$��j$��j$�s)�8��tag)���rget)�,��emplate) b�7han)�]t)�d��_e)��J!& 3:"* BJ!& 3:"* BJ!& 3:"* re)���fore)�V��se)�h�h�hird)�z��s)6�smI) F�7?mI) F�7?mI) F�7ree)�q��icker)R�5me)t�7�Ko)8�y}"�qh}"�qh}"�q�ols) �6�3p)�@��ics)�;tal)���ransform)x�7�m$�z$�z$ box)�s � � s)( � z�z�zition) s),�5�rwo)�Y��ype)�l��writer)U�5ui)�"�5p)�Wdated) �ws)�ugrade)�(�4se)8`~animate) ~�7 ionframe) ��7 dragcontrols) ��7ful)�a��inview) � �7motiontemplate) ^�7 value)�X��event) c�7 pageinview) ��7 reducedmotion) ��7scroll) i�7pring) m�7time) q�7ransform) u�7velocity) y�7ing)�1A�]A�]Aual)� ��ly)���value)(] �- �*:�d:�d:�Ps)0Y�7�54#�I4#�I4#�*riants)�ECelocity) |�7ry)�s��ia)6 � �  ht�  ht�  hew)��1�2��box):�U C�YU C�YU Cs)�lue)�6we)�u�!�}�!�}�!hen)��9�e�9�e�9re)�T+�a+�a+ich)�F��idth) �ll)�'89�/89�/89th),�7[�C[�C[�~Dout) �york)"�D�G�D�G�D�Gs)�Q��ww)���x)"�} �u �u y)�~ �u �u ou)(�.~�5�T~�5�T~�5r)�Xzoom)�x� �   }     '> H  !    " !$    �cĀ����JZ�<�b�9�<�b�9�<(�.~�5�T~�5�T~�5���0your2�o�|���|���|��G2�[+�� �9+�� �9+�� �i�q�!�Q�!�Q�! 2�v�G�X�O�G�X�O�G�X��% �.��t��t��y�.�O�x�x���(�^�N�m�^�^"�T�X�'tube� �x�x�'�^�^z� �{�{�}�y�y�"�3�3�6�z�zoom�x� � 6�M+ ""�V̀����0�00:�OV�*�V�*�V�*:�f7Eu�#7Eu�#7Eu�OI�/I�/I@�&4Q��_4Q��_4Q��>�im]R �}b9IeM H  s7�!m]R �}b9IeM H  s7�!m]R �}b9IeM H  s7�$�s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$�>�"�HR ��d9In V  v?�'�HR ��d9In V  v?�'�HR ��d9In V  v?<�A� �'W�p_� �'W�p_� �'W�p.�o� =�� =�� =4�GjvM4-� jvM4-� jvM4-F��2�g$� �2�g$� �2�g$N�)9w9,p %2;9w9,p %2;9w9,p %2<�|� �'b�nc� �'b�nc� �'b�n.��! ?�_�! ?�_�! ?.�kwI1�kwI1�kwI1j�P�<A- � �<A- � �<A- 00�=�&��&��&1#�!���%�c�cf�~�3�3�Q���Y�c�c�C��1�W�3�3�6�G�Gdeg�7�y�y�p�z�zf0�{�a�a �P���X�c�cpx��4�G�4�G�4�S<z�H<z�H<zvh�o�y�y�(�z�z1�6�a�a(�iT�T�T.�f�mE�E�mE�E�mE(�)`�f`�f`��@�mW� `r! 5p G G/t�0�mW� `r! 5p G G/t�0�mW� `r! 5p G G/t�B�x�3D#X4�)/P/q/1i D( ;,   #<>"~�@�3D#X4�)/P/q/1i D( ;,   #<>"~�@�3D#X4�)/P/q/1i D( ;,   #<>"~��y�mW�(�br! 5n V.w�>�mW�(�br! 5n V.w�>�mW�(�br! 5n V.w@�:k� � x�Kk� � x�Kk� � x� �x�xL�J TZ�+� TZ�+� TZ�+.��1�n0�A�1�n0�A�1�n0"�P'�x'�x'@�uk� �$ x�Mk� �$ x�Mk� �$ x�)�^�^4�kZy�kZy�kZy"�]+�R+�R+0��a�a��{�{.��DI�Q�[�DI�Q�[�DI�Q�Q�x�x(��G�d�G�d�G.�A � � 0.�YnIW�(nIW�(nIWX�jT�a_N�B�\C�T�a_N�B�\C�T�a_N�B�\C��4DGBCd?�1�{G-1>� �,DGBCd?�1�{G-1>� �,DGBCd?�1�{G-1>� X�#T�RaaN�b�mL�!T�RaaN�b�mL�!T�RaaN�b�mL����� � "�d<�8�W<�8�W<�8� �c�c4�o� 0�2� 0�2� 0px��.�M�.�M�.��3�3�U�.�N�.�N�.�V�x�x�k� � �%�G�G��^�^�s��vw�@�y�y�y�z�z24 �S � � � �C �L �B �U �_ �% �O � �u �l �{ �px�p�y�y��3�3�)�z�z�o�^�^1�r�z�z2kb"�{�x�x��^�^3�t�{�{7�O�3�380�2�w�|�{�"&�j0"�N0"�N0"�|�!�4�>��.�d�T�K�Z�^kb� �3�3kb$� � � px"�+�x�x�I�^�^2�7��"�K'�h�p'�h�p'�h��m�m(�=��%�B��%�B��%� ��%���+"n/�:Z/��Q�%���+"n/�:Z/��Q�%���+"n/�:Z/�(�v�V�'��V�'��V�'6�;o� �2HUo� �2HUo� �2H�$�x�x6�vo� �!2FYo� �!2FYo� �!2F�B�^�^0��y�y�V�z�z�+�M�-�M�-�M�[�G�G�_�^�^0�m�y�y"�a�v�$�v�$�v�h�z�z .�k��0�U����E�N�D�W�a�'�Q��w�n�}�px'��^�^20��w�w� �x�x5�^*T�9*T�9*T�M�w�R�w�R�w5�_ � � �( �i �i ��w�w��3�3��x�x3(�p�)�M�)�M�)4��/�M�;��/�M�;��/�M�;(�k�1)� �1)� �1)�M;Q�L;Q�L;Q� %=�%=�%=�*�G�G�;Q�Y;Q�Y;Q�;%?�~%?�~%?0#����"�c�c0�i�{�{"�Ba�f�pa�f�pa�f�q�T�T�,�a�a���24�#���@�{�{��p�p33�~�a�a48����-�{�{� �p�p60���.� ^� ^� ^�`�p�p�5�d�Q�d�Q�ddeg�:�y�y�E�3�3�s�z�zd�5�{�{�a��kb�L�{�{��3�34�P�{�{00%�P�G�G44�$�3�35� �@�;�@�;�@�&� �TW�A�_GX�zt 0 Q@ �Z �TW�A�_GX�zt 0 Q@ �Z �TW�A�_GX�zt 0 Q@ �D�<�@�<�@�<(�&�/6��/6��/6�M��$��H/�H/�H�*�G�G�8+"$�ni� `�, s�};C�3$#G�A""A# values, two that store scroll offset in pixels (`scrollX` and `scrollY`) and two that store scroll progress as a value between `0` and `1`. These motion values can be passed directly to specific styles. For instance, passing `scrollYProgress` to `scaleX` works great as a progress bar. ``` const { scrollYProgress } = useScroll(); return ( <motion.div style\={{ scaleX: scrollYProgress }} /> ) ``` > Since `scrollY` is a `MotionValue`, there's a neat trick you can use to tell when the user's scroll direction changes: > > ``` > const { scrollY } = useScroll() > const \[scrollDirection, setScrollDirection\] = useState("down") > > useMotionValueEvent(scrollY, "change", (current) \=> { > const diff = current - scrollY.getPrevious() > setScrollDirection(diff > 0 ? "down" : "up") > }) > ``` > > Perfect for triggering a sticky header animation! > ~ Sam Selikoff, [Motion for React Recipes](https://buildui.com/courses/framer-motion-recipes) ### Value smoothing This value can be smoothed by passing it through `[useSpring](./react-use-spring)`. ``` const { scrollYProgress } = useScroll(); const scaleX = useSpring(scrollYProgress, { stiffness: 100, damping: 30, restDelta: 0.001 }) return <motion.div style\={{ scaleX }} /> ``` ### Transform other values With [the](./react-use-transform) `[useTransform](./react-use-transform)` [hook](./react-use-transform), it's easy to use the progress motion values to mix between any value, like colors: ``` const backgroundColor = useTransform( scrollYProgress, \[0, 0.5, 1\], \["#f00", "#0f0", "#00f"\] ) return <motion.div style\={{ backgroundColor }} /> ``` ### Examples #### Track element scroll offset #### Track element within viewport #### Parallax #### 3D #### Scroll velocity and direction Read the [full](./react-use-scroll) `[useScroll](./react-use-scroll)` [docs](./react-use-scroll) to discover more about creating the above effects.[{"title":"Code Example 1","description":"","code":"<motion.div\n initial={{ opacity: 0 }}\n whileInView={{ opacity: 1 }}\n/>","language":"react","difficulty":"intermediate","tags":["react"]},{"title":"Code Example 2","description":"","code":"<motion.div\n initial=\"hidden\"\n whileInView=\"visible\"\n viewport={{ once: true }}\n/>","language":"react","difficulty":"intermediate","tags":["react","scroll"]},{"title":"Code Example 3","description":"","code":"function Component() {\n const scrollRef = useRef(null)\n \n return (\n <div ref={scrollRef} style={{ overflow: \"scroll\" }}>\n <motion.div\n initial={{ opacity: 0 }}\n whileInView={{ opacity: 1 }}\n viewport={{ root: scrollRef }}\n />\n </div>\n )\n}","language":"react","difficulty":"intermediate","tags":["react","scroll"]},{"title":"Code Example 4","description":"","code":"const { scrollYProgress } = useScroll();\n\nreturn (\n <motion.div style={{ scaleX: scrollYProgress }} /> \n)","language":"react","difficulty":"intermediate","tags":["react","scroll"]},{"title":"Code Example 5","description":"","code":"const { scrollY } = useScroll()\nconst [scrollDirection, setScrollDirection] = useState(\"down\")\n\nuseMotionValueEvent(scrollY, \"change\", (current) => {\n const diff = current - scrollY.getPrevious()\n setScrollDirection(diff > 0 ? \"down\" : \"up\")\n})","language":"react","difficulty":"beginner","tags":["react","scroll"]},{"title":"Code Example 6","description":"","code":"const { scrollYProgress } = useScroll();\nconst scaleX = useSpring(scrollYProgress, {\n stiffness: 100,\n damping: 30,\n restDelta: 0.001\n})\n\nreturn <motion.div style={{ scaleX }} />","language":"react","difficulty":"advanced","tags":["react","scroll","spring"]},{"title":"Code Example 7","description":"","code":"const backgroundColor = useTransform(\n scrollYProgress,\n [0, 0.5, 1],\n [\"#f00\", \"#0f0\", \"#00f\"]\n)\n\nreturn <motion.div style={{ backgroundColor }} />","language":"react","difficulty":"beginner","tags":["react","scroll"]}]["react","scroll","animations","animation","spring","motion"]2025-08-29 11:54:072025-08-29 11:54:07 ���WĀ����2�00:�f7Eu�#7Eu�#7Eu�OI�/I�/I@�&4Q��_4Q��_4Q��>�im]R �}b9IeM H �S����� �*�0unless�k�)�)ocks � ##wanted�&� � p�4�x�*�1�)�)���@�&�{����&date�zs�R��H� �-�^�D�+�Dgrade����������������on�hs �R=�B~�~�~"�Me �0e �0e �Y�6�$�6�$�6�1� � ��A�Aage�%�{�{�v� � �h�)�)��X�X�6� � �#���l�_�_e�K�{�{�[� � �h�)�)�(�X�XXY`�Kk/`�}k/`�}k/`%*�1�a�a�.�YD�vD�vDanimate w� ionframe {�d�d� � �v�X�X@�+8�\.�,�S�P8�\.�,�S�P8�\.�,�S� �\�\� ragcontrols ��ful�&��inview ��motiontemplate W� valueevent \�r�j���<�_�_ educedmotion � �s�.��scroll b�pring f�time j�ransform n��3��velocity r�ing��{�{�A�X�X�q �i �i ually�:�!�h�!�h�!�+�_�_tilitiess -� -� -� -� -� -� -� -�valueD{D{D{D{D{�V � � �>q+S�-$ !,[ j� �>q+S�-$ !,[ j� �>q+S�-$ !,[ jD{�W0 D{>6$�,6$�,6$ D{�6�_�_s A� A� A�"A��s �  �   A�>R�OH�r� �H�r� �H�r�  A�A�O.^z.^z.^ A�riants:�m9 + �9 + �9 + ouselocity�L�{�{�\� � �)�X�XFu�� �T�i�T�i�T�S��ry�^�_�_ia��Q�{�{�!�l!�l!�DU�U�U.�-C�J�KC�J�KC�J�'� � deo��X�Xs�;�)�)ew$��`N< � �.��L�A�L�A�L� � � � � ���port�<x�� >&(&88� >&(&88� >&(&8. � )�I )�I )s �u,sible�4�)�)ual�'� � �P�;�N�;�N�;duration�N�9N�9Nise�?�� r�K��ly�(�a(�a(s�I� �?��$�U�;�"�;ue������,     �(���a���w3c�d�)�)ait�Y��s�&�X�Xe�v �i �i bm~�a m~m~�Q~�~�~(m~\e �0e �0e $m~�h�6�$�6�$�6��C�F�C�F�Cm~@� �  m~*m~�dB�B�Bflow`�`�`�`�`�`�`�`�ll�i�{�{�y� � �F�X�X�;���p��hen��{�{(��D#��D#��D#L � eY!)�] eY!)�] eY!)(��rC� �rC� �rC^�,8�zOT� �<)�8�zOT� �<)�8�zOT� �<)�d �m �m re�%�)�)as�N�)�)ther�p�)�)ich�z�\�`�`�� � �K�S�X�S�X�S�J���%� � le,�M�X�Xhover�h��o�idth �] �! �S �+ �8 �i@�^" 8�" 8�" 8o �6 �Oll�<�{�{(�g%!�#%!�#%!:�[O0>�f[O0>�f[O0>(�|K%!�6K%!�6K%!��_�  3�% EH$/',h. 8K`�  3�% EH$/',h. 8K`�  3�% EH$/',h. 8K�c�b�b�=���()�8)�8)ndow�'>�T>�T>pes�>th �/�  � �{�{��� � � (�&�<�)�1�)�1�)�b�|t� �E�� L�Mt� �E�� L�Mt� �E�� L��;� � ` �:&�^&�^&�42�D� �nD� �nD� �cin�_ � � on�[�)�)rdpressb�b�b�b�b�b�b�b�s���rap>�>�>�>�>�>�>��K>�ites�E� � x:�F ?!�d� ?!�d� ?!�d��t�tyou�V�{�{�f� � �3�X�X�T���� � �]���;7�7�7r�5�y�}� � ����A�'���_�_�TE 9W TK�G  +!;�Oq' VQ fc  9�% � N6�$I h�Q �4Q P/Q !!�WĀ����2�00:�f7Eu�#7Eu�#7Eu�OI�/I�/I@�&4Q��_4Q��_4Q��>�im]R �}b9IeM H  s7�!m]R �}b9IeM H  s7�!m]R �}b9IeM H  s7�$�s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$s h 3-WF|4�L.!" Q$"" #HF;t  =& :M$�>�"�HR ��d9In V  v?�'�HR ��d9In V  v?�'�HR ��d9In V  v?<�A� �'W�p_� �'W�p_� �'W�p.�o� =�� =�� =4�GjvM4-� jvM4-� jvM4-F��2�g$� �2�g$� �2�g$N�)9w9,p %2;9w9,p %2;9w9,p %2<�|� �'b�nc� �'b�nc� �'b�n.��! ?�_�! ?�_�! ?.�kwI1�kwI1�kwI1j�P�<A- � �<A- � �<A- �J�|3 ;�N/%. "S%] !N;0#" #LI )&3 ;�N/%. "S%] !N;0#" #LI )&3 ;�N/%. "S%] !N;0#" #LI )&00�=�&��&��&1 �!���%�c�cf�~�3�3�Q���Y�c�c�C��1�W�3�3�6�G�G��F�;�F�;�Fdeg�7�y�y�p�z�zf0 �P���X�c�cpx��4�G�4�G�4�S<z�H<z�H<zvh�o�y�y�(�z�z1(�iT�T�T.�f�mE�E�mE�E�mE(�)`�f`�f`��@�mW� `r! 5p G G/t�0�mW� `r! 5p G G/t�0�mW� `r! 5p G G/t�B�x�3D#X4�)/P/q/1i D( ;,   #<>"~�@�3D#X4�)/P/q/1i D( ;,   #<>"~�@�3D#X4�)/P/q/1i D( ;,   #<>"~��y�mW�(�br! 5n V.w�>�mW�(�br! 5n V.w�>�mW�(�br! 5n V.w@�:k� � x�Kk� � x�Kk� � x� �x�xL�J TZ�+� TZ�+� TZ�+.��1�n0�A�1�n0�A�1�n0"�P'�x'�x'@�uk� �$ x�Mk� �$ x�Mk� �$ x�)�^�^4�kZy�kZy�kZy"�]+�R+�R+�(�-%�)21�)�Z� H&c'& -%�)21�)�Z� H&c'& -%�)21�)�Z� H&c'&0��{�{.��DI�Q�[�DI�Q�[�DI�Q�Q�x�x(��G�d�G�d�G.�A � � ��Z�'�Z�'�Z0X�jT�a_N�B�\C�T�a_N�B�\C�T�a_N�B�\C��4DGBCd?�1�{G-1>� �,DGBCd?�1�{G-1>� �,DGBCd?�1�{G-1>� X�#T�RaaN�b�mL�!T�RaaN�b�mL�!T�RaaN�b�mL����� � "�d<�8�W<�8�W<�8� �c�c4�o� 0�2� 0�2� 0^� m�d�5#"#�y m�d�5#"#�y m�d�5#"#px��.�M�.�M�.��3�3�U�.�N�.�N�.�V�x�x�k� � �%�G�G��^�^�s��vw�@�y�y�y�z�z24 � � � �C �L �B �U �b �( �O � �u �l �{ � �Npx�p�y�y��3�3�)�z�z�o�^�^�&��1�r�z�z2kb�{�x�x��^�^3�t�{�{7�O�3�3 �\��80�w�|�{�"&�j0"�N0"�N0"�|�!�4�A��.�d�T�K�Z�^D�.6A#%�y/$�6A#%�y/$�6A#%�y/$� kb� �3�3kb � � � px�+�x�x�I�^�^2�7��"�K'�h�p'�h�p'�h��m�m(�=��%�B��%�B��%� ��%���+"n/�:Z/��Q�%���+"n/�:Z/��Q�%���+"n/�:Z/�(�v�V�'��V�'��V�'6�;o� �2HUo� �2HUo� �2H�$�x�x6�vo� �!2FYo� �!2FYo� �!2F�B�^�^R�3�Z��#�1W� 3�Z��#�1W� 3�Z��#�1W0��y�y�V�z�z�+�M�-�M�-�M�[�G�G�_�^�^0�m�y�y"�a�v�$�v�$�v�h�z�z .�k���_��0����E�N�D�W�d�*�Q��w�n�}��Ppx ��^�^20��w�w� �x�x5�^*T�9*T�9*T�M�w�R�w�R�w�,V�,V�,V5�_ � � �( �i �i ��w�w��3�3��x�x3(�p�)�M�)�M�)4��/�M�;��/�M�;��/�M�;(�k�1)� �1)� �1)�M;Q�L;Q�L;Q� %=�%=�%=�*�G�G�;Q�Y;Q�Y;Q�;%?�~%?�~%?.��#E�)�t�#E�)�t�#E�)0 ����"�c�c0�i�{�{"�Ba�f�pa�f�pa�f�q�T�T�,�a�a����3��24�#���@�{�{��p�p48����-�{�{� �A+'$�;o�$`�6 ��(;M�3$3G�.K" !!�W����� �2�0beyond�K�)�)�K�)�)zier�{���K�3�3 �X���&�{�{����G�_�_�{���K�3�3 �X���&�{�{���g� �y�y�B�z�z� �y�y�B�z�zind t�5�3�3�'�G�G�u���-�� �5�3�3�'�G�G�u���-��lock��y�y�<�z�z�9�x�x�W�^�^��y�y�<�z�z�9�x�x�W�^�^ed�\�x�x�\�x�xs�.�x�x�L�^�^�.�x�x�L�^�^ue�B �r �r �B �r �r r��3�3�2�T�T�v�a�a�%���]�� ��3�3�2�T�T�v�a�a�%���]��red�L�X�X�L�X�Xorder:�G  �t  �t  :�e  �Z  �Z  �# � � :�G  �t  �t  :�e  �Z  �Z  �# � � radius.�~.�M] �.�M] �.�M] .�2.�7] �.�7] �.�7] .�~.�M] �.�M] �.�M] .�2.�7] �.�7] �.�7] th�5����p�p�g�=�x�=�x�=(��z��\�z��\�z���x�x� ���"� � (�F�}��a�}��a�}��<�^�^�E�c�c�2� � �f��� �_�_�5����p�p�g�=�x�=�x�=(��z��\�z��\�z���x�x� ���"� � (�F�}��a�}��a�}��<�^�^�E�c�c�2� � tom�1�y�y�j�z�z�d�T�T�A�]�/�]�/�]��a�a�;�)�) �1�y�y�j�z�z�d�T�T�A�]�/�]�/�]��a�a�;�)�)unceF�j?�2 T�G?�2 T�G?�2 T@$�(�n�- ��n�- ��n�- X�m+ �g V�J$�j+ �g V�J$�j+ �g V�J$X�%+ �g V�J$�r+ �g V�J$�r+ �g V�J$ F�j?�2 T�G?�2 T�G?�2 T@$�(�n�- ��n�- ��n�- X�m+ �g V�J$�j+ �g V�J$�j+ �g V�J$X�%+ �g V�J$�r+ �g V�J$�r+ �g V�J$damping�s���+���s���+�� stiffness�Q"%�<"%�<"%� "%�D"%�D"%�Q"%�<"%�<"%� "%�D"%�D"%iness�b�3�3�F�G�G� ���X�� �b�3�3�F�G�G� ���X��y�oG�nG�nG�&/�/�/�-I�8I�8I�eI�@I�@I �oG�nG�nG�&/�/�/�-I�8I�8I�eI�@I�@Id �� � �� � aries�|���J8�s8�s8�4���|���J8�s8�s8�4��x�X��"� ��g ��g ��4�p�p��y�y.�� �� �� �8�z�z�J�f�f�h�L�L�|�������$�$�M���$� � �X��"� ��g ��g ��4�p�p��y�y.�� �� �� �8�z�z�J�f�f�h�L�L�|�������$�$�M���$� � es��v�v��v�vgeometry��3�3��3�3shadow�|�x�x�0�^�^�|�x�x�0�^�^reak�S�x�x�q�^�^�S�x�x�q�^�^s��a�aoken�l�x�x� �^�^�)� � �l�x�x� �^�^�)� � wser�����{�{�,�������T�T�P� � �V�a�a�G(�B�fW^��fW^��fW^��X�X�����{�{�,�������T�T�P� � �V�a�a�G(�B�fW^��fW^��fW^��X�Xs�b�y�y�\�3�3��z�z(�<�i1�Q�i1�Q�i1�;� � (�p�S1�M�S1�M�S1�� � �b�y�y�\�3�3��z�z(�<�i1�Q�i1�Q�i1�;� � (�p�S1�M�S1�M�S1�� � uild##ing�u���u��ui�b�y�y����b�y�y���t�(�3�3�r�x�x�E� � ��^�^�D�?�)�)�8c�~c�~c�(�3�3�r�x�x�E� � ��^�^�D�?�)�)lk�)�3�3��G�G�i���!�� �)�3�3��G�G�i���!��mp�$�]$�]$�N$�e$�e$�$�]$�]$�N$�e$�e$ndle�1�3�1�3�1�3�1�3�1�3�1�3�1�3 �1�3�1�3�1�3�1�3�1�3�1�3�1�3t�"��{��{��(��v��v�.�P�!+�9�q�!+�9�q�!+�94�5��A_|�d��A_|�d��A_|�G�+� �+� �+4�n�Ca_� �s�Ca_� �s�Ca_� @��V�g���V�g���V�g��� � 4��R��R�R��R�R��G�Z�D�Z�D�Z�s���*�`�O�>�O�>�O�(�)�)�{��W��W��+���Q�$�=�$�=�$�@�a�a�"��{��{��(��v��v�.�P�!+�9�q�!+�9�q�!+�94�5��A_|�d��A_|�d��A_|�G�+� �+� �+4�n�Ca_� �s�Ca_� �s�Ca_� @��V�g���V�gt+SV+g�l�0� �L1KWkI�O0. B�\�?,� T8� ""�V������0����V�g�$�� � 4��R��R�R��R�R��G�Z�D�Z�D�Z�s���*�`�O�>�O�>�O�(�)�)�{��W��W��+��0button�c �g �g �#�B�B�(�d��d��d�a�&�V�&�V�&.�70V�0�0V�0�0V�0�B�d�d.�r0V�;�0V�;�0V�;�r�J�J�2� � �K:� :� :�c �g �g �#�B�B�(�d��d��d�a�&�V�&�V�&.�70V�0�0V�0�0V�0�B�d�d.�r0V�;�0V�;�0V�;�r�J�J�2� � �K:� :� :variants�k�T�T�&�a�a�k�T�T�&�a�ay(� �R�I��R�I��R�I�M��i��i�"�0E�/�E�/�E�/v�a�`�N� ��,�]1�)�?�`�N� ��,�]1�)�?�`�N� ��,�]1�)j�t�+,|�+9��,�s�+,|�+9��,�s�+,|�+9��,p��`�� ��,}?�.�K�`�� ��,}?�.�K�`�� ��,}?�.@�3f*/ 4�f*/ 4�f*/ 4(�4�c� ��c� ��c� *��x��x��x�]R�%�* !U�>�x�* !U�>�x�* !U�>@�nq*/ 4�q*/ 4�q*/ 4(�`�i�w��i�w��i�w"�6�F� �F� �F�m��.��]@ �N�]@ �N�]@ �/N�N�N"� �%�x�%�x�%�5�X�X.�U�aD �N�aD �N�aD �I%�g%�g%�F��4�A>�R�)>�R�)>�R"�'5�)�5�)�5�)(� �R�I��R�I��R�I�M��i��i�"�0E�/�E�/�E�/v�a�`�N� ��,�]1�)�?�`�N� ��,�]1�)�?�`�N� ��,�]1�)j�t�+,|�+9��,�s�+,|�+9��,�s�+,|�+9��,p��`�� ��,}?�.�K�`�� ��,}?�.�K�`�� ��,}?�.@�3f*/ 4�f*/ 4�f*/ 4(�4�c� ��c� ��c� *��x��x��x�]R�%�* !U�>�x�* !U�>�x�* !U�>@�nq*/ 4�q*/ 4�q*/ 4(�`�i�w��i�w��i�w"�6�F� �F� �F�m��.��]@ �N�]@ �N�]@ �/N�N�N"� �%�x�%�x�%�5�X�X.�U�aD �N�aD �N�aD �I%�g%�g%calc�?�y�y�x�z�z�?�y�y�x�z�zulate�^�{�{�^�{�{ d�F�3�3 �?*�=*�=*�w*�E*�E*��a�a�F�3�3 �?*�=*�=*�w*�E*�E* ions�Z�)�)�Z�)�)l �|� � �*� � �y�X�X�|� � �*� � �y�X�Xback�0�3�3�m�T�T:� U �� �U �� �U �� �3�a�a"�/8!�8!�8!@� Ef)<�i Ef)<�i Ef)<�INW�7NW�7NW�M � � �0�3�3�m�T�T:� U �� �U �� �U �� �3�a�a"�/8!�8!�8!@� Ef)<�i Ef)<�i Ef)<�INW�7NW�7NW�M � � s�5�3�3�� � �\� � " �5�3�3�� � �\� � "ed��{�{�� � �i� � �~�X�X�e� � �]���M�a�a��{�{�� � �i� � �~�X�X�e� � mera��.�.��.�.n0�|XT.�XT.�XT.�l�)9O4b 118IV69O4b 118IV69O4b 118IV4�h� +�]�L� +�]�L� +�]�2�). 3< g*RZ7"#F4�& �9(�D. 3< g*RZ7"#F4�& �9(�D. 3< g*RZ7"#F4�& �9(�8�$!H$�!L` N#'vX"�)r�5�g!H$�!L` N#'vX"�)r�5�g!H$�!L` N#'vX"�)r�5�8�b. 3< g*R1k7"#H4�& �4;(�S. 3< g*R1k7"#H4�& �4;(�S. 3< g*R1k7"#H4�& �4;(N�)�^�&1H�>f�^�&1H�>f�^�&1H�>��7"Z$�vD�$;T�>a�A7"Z$�vD�$;T�>a�A7"Z$�vD�$;T�>a(��);��);��);H�CF8$�g5sF8$�g5sF8$�g5:�09& (U+�,9& (U+�,9& (U+T�d�^�&1 L�>h�^�&1 L�>h�^�&1 L�>��E7"\$�xF�;T�>a�57"\$�xF�;T�>a�57"\$�xF�;T�>a"�G�*��*��*B�:�C�5_�C�5_�C�5Mf�&q~ZU�(�+�N G&q~ZU�(�+�N G&q~ZU�(�+�N �z�d�d(�@[�I@[�I@[6�U�; Z-U�; Z-U�; Z"�t"X�V"X�V"Xf�U&q~ZU�(�+�V G&q~ZU�(�+�V G&q~ZU�(�+�V �F0�\0�\0*�**v**v**:�<"�b�"�b�"�b.�`*#G�+*#G�+*#G0�|XT.�XT.�XT.�l�)9O4b 118IV69O4b 118IV69O4b 118IV4�h� +�]�L� +�]�L� +�]�2�). 3< g*RZ7"#F4�& �9(�D. 3< g*RZ7"#F4�& �9(�D. 3< g*RZ7"#F4�& �9(�8�$!H$�!L` N#'vX"�)r�5�g!H$�!L` N#'vX"�)r�5�g!H$�!L` N#'vX"�)r�5�8�b. 3< g*R1k7"#H4�& �4;(�S. 3< g*R1k7"#H4�& �4;(�S. 3< g*R1k7"#H4�& �4;(N�)�^�&1H�>f�^�&1H�>f�^�&1H�>��7"Z$�vD�$;T�>a�A7"Z$�vD�$;T�>a�A7"Z$�vD�$;T�>a(��);��);��);H�CF� �N2�.a?�$I|& ((�WĀ����P������$]0clicks�*�X�Xentx�X� � �m�X�Xy�Z� � �o�X�Xode�J�[�{�{C�k� � E��8�X�XC�V�<�b��C�<lors � ��m �U � �K �# �0 �a �G �. �Ge� parisonh�h�h�h�h�h�h�h�lete! d�(�X�Xx"� ��ity�diant� �_�_onent"-��G�BG�BG�,-�.�[�[ s�l�{�{�|� � �I�X�X)��}�v�v�s��nfig<����ured�h��sidered� e�Fe�Feole:�4 _,�H _,�H _,�<�o<�o<@�M _#!-�l _#!-�l _#!-"�Q�H�Ht�m�,�a�,�a�,(�tQ%�-tQ%�-tQ%�f�X�X6�1�a 2+&�a 2+&�a 2+&�j� � 0�@J L@J L@J F�] R# 5%�] R# 5%�] R# 5%ant���raint�H$�e$�e$tainer�I�o�oing�]� � s�L�)�)ent��7�)�)inue� �)�)ract��)�)ol�h� �  �`�_�_s ��venient�G� � �`�X�Xordinate�>��rrectly�G� � unting�z��rse��_�_reate�� �|� �|� ��_�_d�E��s��_�_ing� �)�)oss�`�)�)fade�x s�Ass\��S\�\�oV�7V�7V\� \��V�V�V\��� � \�,\��2 �8 �8 ubic�%�{�{���bezier.�@ �@ �@ rrent/�L��ly�w��X�Xsor �A�n�z�z&�~� � ( ��K�W�W&H��t �3�u��& �3ve"�x�N�"�N�"�N"�Hi7�0i7�0i7stom�<�{�{ize&damping:� �gf=��Z�gf=��Z�gf=�ys �## eactivating�-�)�)celerate�2�� s�(�� ion� ��ides�`��fault�V�H�H�)�d)�d)4� � A)j�B� A)j�B� A)j�n)�1)�1)�2� 4y��D$m� $&21"LR� 4y��D$m� $&21"LR� 4y��D$m� $&21"LR�N&�;&�;&s�x�)�)�H��ine� ��d"�)H�6H�6H�^�[�.�[�.�[s�&��ition�'�{�{ s�x�_�_lay.�0.�r�B�B.�.�.�N�6��G> 8��G> 8��G> .�.�.�children(�30&�0&�0&s�`�{�{ta�q��scribes�n��igns.tect� � �  �,E�fE�fE�!�=�=�u� � ed�H.�Q.�Q.ing��)�)on �� � '�N � �  s� � � ������� �X�Xrmines�V��v��##��R�{�{��b� �  ���/�X�X"��h�C�F�C�F�C ���Y����E�_�_eloper�N�>~�~�~"�Ie �0e �0e �U�6�$�6�$�6�-� � ��A�Aices�� � ifferent �t)��X�X�~�L�=�L�=�L� �X �X rectly�[�_�_scord �2��:���P�6��6verrete���_�_tance���ribution%�l�_�_v�H� � �_�X�X��D%R�dGS�#%b4#"%N/$�k%R�dGS�#%b4#"%N/$�k%R�dGS�#%b4#"%N/$o�^� � cs�S�C~�~�~"�Ne �0e �0e �Z�6�$�6�$�6�2� � ��A�Aument�� � "��C=�-�C=�-�C=�-�X�Xm�h�)�)�B� � �f�_�_n�'��wn �Z � �P �( �5 �f �L�~���7 �LragB���i4#"%�<4#"%�<4#"%  transition@�d0#"%�$0#"%�$0#"%wer�C�IC�ICops�l��uration�2�{�{�(�3<h# % y ��OC1L'w<h# % y ��OC1L'w<h# % y ��OC1L'��0�1�0�1�0 s�O��vcuqx74mh8wmjkmhiom2yli4 �W � �M �% �2 �c �I �0 �Ix v� v� v� v� v� v� v� v�ynamic�^��)e��y�yach�+�: �r �r �L� � ��X�X:�w�VN�!$�!�VN�!$�!�VN�!$� � � rly�se"�% �A% �A% :�9]6�#F�k]6�#F�k]6�#F0�E�^#R�^#R�^#d� �[�[OK Q  /;f�  &  t!i*(  �6&  �  7&'pX;>#a T.! R(.z b;U P ''�WĀ���Q������&k0easedprogress�q�_�_in�.*�_*�_*(�F6�6�6out�W�[�.�[�.�[� �_�_out�9�{�{�/*�Z*�Z*��P�Pier�-� �� �� ng ��>! ��m �L �L  �� � �@�w� �:� �:�  � ��P �e /,J    )& /,J    )& /,J    )s�I��y#dit�7��ing�L��B��'�X�>�%�>ffectQ{Q{Q{Q{Q{Q{Q{Q{s�6�!�)�)icientlyither�IF�GF�GF�s�)�)�bF�F�F"�1M�+�M�+�M�+�y���\�_�_lement��;9�D9�D9B�35!' I6p5!' I6p5!' I6�4�^ -  "5"< $^ -  "5"< $^ -  "5"< l�;4'/!6v4'/!6v4'/!6�[��Z�j (#{ (#{ (#s� ��{�{�JJ�CJ�CJ( � �Q�?�Q�?�Q�cJ�zJ�zJ"�_�)_�)_mil��C�F�C�F�C�R�_�_kowal�5��ulate�� � dn�Q�A~�~�~"�Le �0e �0e �X�6�$�6�$�6�0� � ��A�Acouraged� d�.�-� �$-� �$-� 4!��a",�,�a",�,�a",(�+�:$��:$��:$�T�_�_ed�W�[��[��[vent�v� � � ,�.,�.,s�n� � ��X�X���hancessures�A� � ter �{�/( � ������H� �Q� �Q� �_���1�_�_ed�>�m>�m>info�r�)�)s�}�.}�.}ire�;ly �quals�t��tc��X�Xvenly�M����_�_t.�E�;�%�;�%�;*�^��<��<� a�s $� $�.$�j� a� a�  $�($�j�b_�b_�b $� $� $�target�B� � ��X�Xr�^�{�{�n� � �;�X�X�e��y�:�X�Xone � ##xample�!s��*.��5�H�H4��C�V�V��x.���%�% ��+��.��<�O�O��ceeds�~��lusive �=��4� ��J�0��0isting���t�)�a���3�_�_pand�gs�2�X�Xlicitly�n�)�)ore"tend�3�x3�x3remely�d��fake�.� � lse�$%�h%�h%"�-.%�o.%�o.%�k���7�q�qqse�e�e�e�e�e�e�e�st����Q�_�_eatureg�g�g�g�g�g�g�g�s�ing�|�{�{� � � �Y�X�X���edback���l�<�W�2�W�2�Wing�l���>�_�_s��_�_ turbulence�}��ff���ilesize�[�d�)�)ter�\��ing s�,� � �#�X�Xnish� ��es���re�P� � "�[�+[�+[�x�)�1�)�1�)d� � � �U�)�)�[�X�Xs�e��ing� � � � �X�Xst�o�l�l��)�)� ���~�_�_lex �ocus�E�X�Xllowing�5�_�_r� J;�B�{�{ �<�Q<�Q<, �T�8 j�8 j�8 �81�)1�)1^�2YRx�V�3F�M�,YRx�V�3F�M�,YRx�V�3F�M(�n*vn*vn*�8��6%�(7 J�t)>7 J�t)>7 J�t)ce�Y��ward�0��ur�3�)�)� ��rame0�0�0�0�0� � 0���u�u0�0�loop�>� �  rusercontent �T � �J �" �/ �` �F �- �Fom z�2z�!0 � 0 � 0 z�!j�#j�#j z�px�/x�/xz��!�X�X.�*�b � �b � �b "z�?�BF�BF�B& z��d�d4z�jnYt*knYt*knYt*unction�l0� � J� J� (� �Y+� �Y+� �Y+(�=�'r��'r��'r.� s}`� s}`� s}`H�KN�e �q�]]N�e �q�]]N�e �q�]�`�,`�,`�B|�|�|f�$A�9D .A�9D .A�9D ality�\��',�n;gR�\S^! G ?\+ �!? <LP -  1! 2 �A^V�1�i ""��V������0w 0functions"��"��~X�%X�%X"��d� �  "�"��1�X�X�*�_*�_* "�"��[��N"�e = �yS = �yS = �yrther�v��g��y�yains�U�{�{�e� � �2�X�X�\��enerated�-�{�_�_sture: �+D%�dD%�dD%��)�)< �?�ET%v�ET%v�ET%�s #� #�&#�iG<� G<� G< #�&#�i��@��@���j�� #� #� #�t ��##�) ��4 ��f ��> ��K��g ��b ��I ��b elementbyid�� � ��)�)�.�X�Xters�a+�a+�a+ithub�F� �<�e�)�)c�!�R�8��8ves�h���:�_�_reat�]�7�X�X�8��id�YV�3V�3Voup5����wing�_�{�{�o� � �<�X�X�f��sapw�w�w�w�w�w�w�w�uide����������������s d� d� d� d� d� d� d� d�handlers�� � �a�X�X�$� � ing+�r'��� ppen�[�)�)�0��s�>�m>�m>��X�Xve��3�_�_eight �_ �# �U �- �: �kL�`# 7�# 7�# 7g �8 �Qld�R�X�Xp� ��)�)idden.� %�6 %�6 %gher.�t�d�+�a�d�+�a�d�+ook�7��s v�urs �##ver%�%��N%�b     v     v     v%��V%�%�%�%��}ed� �o �o w �$�{��{��{tml �� � tps��##k���R�{�{C(��+~=�T~=�T~=E:��6e �$�e �$�e �$r.��B�6;�k�6;�k�6;C0��i�0�F�0�F�0���� � � ��Y��C0��F:� :� :�_i(�X�3�1�3�1�3�*�H�Hd����0�T�Teal'f�!)�d)�d)�d�)�)(�" *)�c *)�c *)j�Z�\� $�D$�%�\� $�D$�%�\� $�D$�5��rames�b�)�)mages �V � �L �$ �1 �b �H �/ �H mediately�S$�e$�e$plement�=��ort��i�i�w � � �i�&�&� �Q �Q �7���$�~�~*�U&nYt*^&nYt*^&nYt*ant�ted�{� � ��X�X�u�_�_ rovements k k k k k k k kn� ##>p�3B�;B�;B0��[7 !2A�[7 !2A�[7 !2��X�XN���s]r�r"dl�as]r�r"dl�as]r�r"dl�� � 0�9c�)Ec�)Ec�)clude�~�{�{�� � �[�X�X���ing�,� � orporate��m�mreased�>�{�{ definitely�a�d�%�d�%�dx��{�{� ��ertia4�mE�v&Y�@E�v&Y�@E�v&Yl�>��finitely�?��y� Q�- Q�- Qluence�)��o�T�)�)��7�7rmation�M�)�)itial�Y�{�{:�8�`�O�i�]�`�O�i�]�`�O�iput2 � 5"}5"}5"side�!�)�)tance�s���#)�8)�8)t �## tegrations [� [� [� [� [� �� [� [� [�rruption*�qsection(�E����� observer�g�'�'entry"�4 � � o�|� � �(�)�)�o��view'�'�'���'�^ /3 : ,0  =r /3 : ,0  =r /3 : ,0  ='��a'�'�'�o�f�)�)s �,5�!.�O.�O.�@r�/nr�/nr�/6�%h�}P<%h�}P<%h�}P<.�YsN7[�sN7[�sN7[d�m�5@! �iQ�4$�B�5@! �iQ�4$�B�5@! �iQ�4$"�X.�<.�<.�8�f�f� f�{f�{ft�ns#��{�{�%� � .�)�'H�9�'H�9�'H0�EEhZyEEhZyEEhZF�&C�O ��$�5C�O ��$�5C�O ��$"� �)�!�)�!�)em.�(�3(�3(ration�<��s# �R�{�{:�7�f�e�j�F�f�e�j�F�f�e�j��_�_ javascript�_�)�)���oined � ##spp�.vdj+B#.MV;("o  �4,�H&qOm "K� /# 0  L!� �@�<  ""��V������0 fppp �ppp0just�e-�~-�~-�K� � �=�_�_ify�keep�|���N�_�_y�I� �Q� �Q� board"�B��X��X�frame��� s(�\`U<�`U<�`U< owalski��C�F�C�F�C�S�_�_last��{�{� �l�lyout� | �K� �  group 2�s �w*zy�T� � "�5�)�)�m�X�Xmotion6�ead� � � rn�4� �  ��X�X A�ve(� �����info��)�)s�l��ing�^�)�)ft�<�)�)gacy�� � ngth�m��ss�2� � ��X�X�\��thargic�z��vel�3�w�)���?�%� �%i�*�S*�S*�k� � "��:=�6�:=�6�:=@� �[�9<�%�[�9<�%�[�9<�_�-_�-_brary�`�{�{�p� � �=�X�X�g��fetime�Q�R�{�{S�b� � U��/�X�XS�]�C�Y��S�Cke� ��#L �'L �'L  �} � � �"�)�)� 2���# ��# ��# �L�2�t �x �x !�2near� �{�{(��e)�o�e)�o�e)�u�q�q"�(�J��J��Jk�&� � �X�)�)�F�X�Xst��s�sener s�F�x�x�_ �F �F �i �m �m l�&� � �u�X�X��_�_oading#�6�)�)g:�5 _,�H _,�H _,�<�o<�o<@�N _#!-�l _#!-�l _#!-$�R[o[o[in�!ng�n��er�3�)�)�t���F�_�_op� �} �} made�/��in�^�)�)kes�m�3��nagement�'s�D� � �]�X�Xy�p F� F� F� F� F� F�"F�B�8L�8L�8 F�value E� E� E� E� E� E� E� E�rgin(*� �W �W s��)�)ss4� �g}#�m�g}#�m�g}#tched�'�)�)h�D�{�{�A���Y� � x@�3�5!  �p�5!  �p�5!  �Z� � imum�i��eans�{mbers�hip�S�{�{�c� � �0�X�X�Z��ight�~rate y� y� y� y� y� y� y� y�ion x� x� x� x� x� x� x� x�n@�1� #  �p� #  �p� #  imum�G��utes �##rror�4��easing($�; �9 �9 d��_�_s�G�_�_x2�2�2�2�2�2�2�2�odified�M��rs ��]�]ytarget�PJ)�J)�J)nitor� � � re ��}�5� � j%� �)�)�.��X�Xf,B��(� �b� �b� ��s�x�x��+stly�/��tionF% <% < �5D X % <% <q,1q,1q,&D ^% <% < |�S|�S|�S(D @% <% <n�%�%�KD ^% <% < �� �� �� &D �611$%".t�dGSA#%b4#"%N/$E0 Z%".t�dGSA#%b4#"%N/$E0 Z%".t�dGSA#%b4#"%N/$E0 D D F% <% <=�����X D ^% <% <*�<�<�&D �% <% <*6 VDt*-6 VDt*-6 VDt*D config"9�� �z �z value B� B� B� B� B�B��` B� B�vement"�{� �b� �b� s�%ing�r��zilla�O�?~�~�~"�Je �0e �0e �V�6�$�6�$�6�.� � ��A�Aultiple�P� � �iY�Y�Y(�u�h�3�p�h�3�p�h�3st�=���h �y �y y����/�T�Tself�3��name�&�0�{�{����B�_�_d�C�_�_s�,��tive�I�D�)�)��X�Xural��&�c�&�c�&earest�<��eded�Z� � �r�X�Xs�z�)�)gative�O�)�)�g��ver�!��w�$��"�u�*)��*)��*)xt�.�t�&�~� �9�!� �"o �##�2�)�)�sn�n�n�r�x�x�E�_�_n���te�U�)�)�f���,;�I;�I;ing-vel�i�_�_w�� � �[��th�IJ' ##-%>";\/R}I!0!e" G? !/ - >=% Kh�A W;* #  :9 %  &&�WĀ��R������(j� � �`�X�X0number��s� s� s�� � ��)�)�Q�X�X"G��k�D�E�D�E�D�g�g�g��_�_s� ���x�q�qtocolor� �z �z object�@�)�)�s��server�F��ccur�&��f �d�9z-Sz-Sz-"��]�+�]�+�]<�+P�>�? ?P�>�? ?P�>�? "�*��D��D��,�)�!1Q*<,+ K7H�;� $NS$�9�!1Q*<,+ K7H�;� $NS$�9�!1Q*<,+ K7H�;� $NS$ �)� � *�jN)jN)jN:�\,)��\,)��\,)�f�\�)�)ten�a� � n �1�8VH�qVH�qVH"�@�����"�3 V�L V�L VR�X�`�O�Cj���%�`�O�Cj���%�`�O�Cj���w�� �� ��U�_�_ce(#�S�t� �t� �t��)�)(%�l�*�!�*�!�*e�##�t�O�{�{S�_� � U� �)�)�E���K��K�S�%���-�@  � �K9�K9�KS�)�8)�8)Cly�V������o�5�%�5�%�5pacity�|�*�S*�S*��d�G�d�G�dX�  �T�" 2 �: �T�" 2 �: �T�" 2 � �y �y posing�X��timal� � � on�A�)�)���ally�b� � �w�X�X�=�u��u��us�M�x�x�� � -�`�)�)�l�X�X &�r �###"� �B �B �K8�98�984�w� g�� g�� g�;�;�;j�@.C��lz$$�o�*.C��lz$$�o�*.C��lz$$�o �_�-_�-_!�|�s�s�g�_�_ chestration�N��der�7�)�)g�P�@~�~�~"�Ke �0e �0e �W�6�$�6�$�6�/� � ��A�Aigin�a�)�)�7��scillate�`�d�%�d�%�dther�%� � "��%�J�%�J�%wise�w�)�)ur�t �0� � �*�)�)�$�X�X �,*�7*�7*put(�63� 63� 63side�#�)�)�1�X�Xver�a�_�_ridden�l��e���view��X�X >W>p�C�x�xage�5rent�8�)�)�9�L9�L9ssed��X�Xing�0^�^�^�;�)�)�J%�g%�g%�G��"�~�a�e�a�e�ave"!��e�e"$�m�2�2th�A��length�C��yment�##�t�Q�{�{S�a� � U��.�X�XS�\�B�X��S�Ber�j��centages�-�)�)formance~��_~�~�~�Y�)�)~� ~�"�v�v�~�~� t�3� � ��X�Xed�:� � petual���hysics�}��ixels�+�)�)�>��lay�~ �} �} back�3��us�###�$z �C �u �M �ZC��9 �q �X �qng �X � �N �& �3 �d �J �1 �Joint��)�)�/�X�Xer�&�X�Xevent�< >�E >�E >�S �N �N s tart��X�Xsition���ve�E�)�)sible��{�{�(� � �W�)�)�w�X�X�(��wer"�l ;�= ;�= ;ful�H� �>��#�T�:�!�:in�3 #�7 #�7 #out�`�]�]out�8�_�_ recalculate�F��ise�_�_�_mium�b �r �r �r � � �? �O �O �i �y �y sence 1�s)�)�)�)��U�^)�^ ,    t ,    t ,    t)��u)�)�ed"�5 �& �& vent�J� � default�,� � �{�X�Xiew � � � � � � � �ous�+�q�!�{��3���ivate �2��9���O�5��5ogressF� �o=(� �o=(� �o=(ject�~� � p S� S� S� S� S�( �[W�=�wW�=�wW�= S� S� S�effect R� R� R� R� R� R� R� R�rty� �X�X�Q��ortion� �)�)vide��_�_d"�.PP�lPP�lPP"� zJ�PzJ�PzJ�K�S��S��S�Y/�]/�]/�9��s�J�J�Jull�R�)�) queryselector�E=�n=�n=uing�sick x  x  x  x  x  �  x  x  x radix��nge.�@"�@"�@"s"�I -�9 -�9 -c�} �:r$f*B�?S# 6  F*UeTL$9;:�:=;>-Q@P ^ &&�WĀ��R������(U0re�c� � �1�)�)ach���t� ��D*�S*�S* ��T*�c*�c*� ��!*�0*�0*� ��� � 4��' �*6 �*6 �*&��#�X�Xds�C� � lly�"��sons�� � �Y�)�)ceive� �_�_s��� distributed��{�{uced � �fer�>�_�_encelative�t��iablemove�b�f� � d�|� � nder�U� � ers N� N� N� N� N� N� N� N�s�7� � order=�peat4�  &$�!  &$�!  &$delay�I �i �i ing�M��s�'��type�-�\-�\-tition�^�� resenting�'��size+�+�+�+�+��`x+�Z C$ C$ C+�+�observer*�+ �L + �L + �L ponding�/� � sive, ness�n���@�_�_tdelta�u"�["�["speed�_!�U!�U!ult�w��turn"�:;r�P;r�P;r��)�)(�S9p,�u9p,�u9p,ed�c�)�)�� � �;��s�� � �P�)�)�V�X�X�!������_� � �)�8)�8)verse�-�n�nd��_�_easing("� �: �: s� �_�_gba���ight�:�)�)�)�X�Xobustot:)�@  I!�}  I!�}  I!margin�j�)�)tate�q� � @�e6A#%�y/$� 6A#%�y/$� 6A#%�y/$x�wS�6S�6Sion�J��und�B��s�j`; ��{�{"��1�\�1�\�16�C:�&>�:�&>�:�&>��I�I" �'�l��l��l�"� � �*H�H�Hame�@���l��cale �Y � �O �'��R�R�}�i���t �K �2 �Kript��u�uoll����&�� �)�)�!DOD�@���able�7�)�)ing�?��tipt�F�q�qeamlesscond�S�{�{�-�n�l�n�l�n�k��{��{�ary�%�X�Xs�4�{�{:�z��K�l�<��K�l�<��K�l�L�_�_tion�~�)�)���urity�X�)�)lected�3or�!� � �u �" �" �r� � s�M� � �fV�V�Vparately�W�_�_ries�v�q�qt�|�{�{�")�d)�d)�q)�1)�1)��WUIQR �. O�q$'$ AJ� UIQR �. O�q$'$ AJ� UIQR �. O�q$'$ AJting(�Q��W� ��W� ��Ws�[��up�:�O:�O:hape�red��*� � ould�r���8� � w�M�o�oimilar�[��ple�oifiesn�E�{�{gle�(�)4�X4�X4ze$�� g� g� ki�6��lides�?mall�Zer�s��nap"�;c@�Lc@�Lc@ping�(��o�-��me"�r�s�surce�Z�{�{�j� � �7�X�X�a��paced��_�_ec� �_�_ific�qD�nYD�nYD�n� _�& _�& _es�p�{�{y��{�{ed�g)�`)�`) � �_�_lit 5�5��D�{�{5��T� �  5�5��!�X�X 5�5��K�� 5�text 4�4��D�{�{4��T� �  4�4��!�X�X 4�4��K�� 4�onsor �##read�N��ing &8p�# 8p�&8p8p8p�Vi��0 /!�i "@  + # "�G$�Y0 /!�i "@  + # "�G$�Y0 /!�i "@  + # "�G$8p8p8p value K� K� K� K� K� K� K� K� quarespace^�^�^�^�^�^�^�^�tagger:� � :�W    @    @    @:� :�:� @�s �V �V  :� :��L :� eds��{�{rt x � x : x �W"[�(W"[�(W"[ x �)�)�)F x �o"8�^o"8�^o"82 � ��E 9��E 9��E 9 x  x " x �N �X �X delay�U�l�led � �"��)��q��q� ���B�X�X � � � �vent�M � � "�d �5 �5 ing�    = " �! 9"H   #2�]�06%q      .' UV�c?T�D �0U) ""��V����� �0x0starts�,� � �Z��tus1�##ep"� �# �# sX�)Y ! �Y ! �Y ! iffnessL�>M�g� �o�0M�g� �o�0M�g� �oll�T�_�_op�u� � 4�:�MJ ��MJ ��MJ ��X�X�k��ped� � � raight�v�_�_ength�V��ings#� ��uck�"� � dio�~�^�^yle V� V� V� V� V�V��w � �  V� V�effect U� U� U� U� U� U� U� U� ubscription �##equent�_�{�{�6� � ccess�! �5 �5 fully�'�X�Xh�!dden�� �|� �|�  perpowers�port(vg Y� Y� Y� Y� Y�Y�>� �  Y� Y�effect X� X� X� X� X� X� X� X�witches�5��ing� t�\�)�)�(��ab�4ilored%ke�]�)�)���rget�r��$��$�L��.2* �x�j�.2* �x�j�.2* �xemplate([��7-�8-�8-xt 6�6��D�{�{6��T� �  6�6��!�X�X 6�6��K�� 6�han�:�~�0��,�u��k���k���k�a�,��G�_�_�-t�@�g�g��5W\�\W\�\W\"�<�(�l�(�l�($� �]`ZG�]`ZG�]`ZX�]�C�u�E3�T� �n�C�u�E3�T� �n�C�u�E3�T� �b� � �[���)�8)�8)e r��@ 8r�/##F,/##F,/##FFr�eX %=yX %=yX %=�r�6 0  +     ,   )  6 0  +     ,   )  6 0  +     ,   )  jr�U+Z# ;i+Z# ;i+Z# ;��'>M51Q25  3  H: D<&$!  *, j !>M51Q25  3  H: D<&$!  *, j !>M51Q25  3  H: D<&$!  *, j !` r�5F - 5F - 5F - :r�@(.(T(.(T(.(hr�.O  o�.O  o�.O  oir�Q� � � �X�Xm��{�{�@�E�Ere��< �~ �~ �p�x�xby���se�-� � .����X���X����_�_y�T�9T�9T�& � � ��X�Xis�"�f�v�v.�"E�t�EE�t�EE�t|�& �>9�$$N�"�I& �>9�$$N�"�I& �>9�$$N�"�@�L@�L@�X�_�_rashing�N� � ead�`�)�)ough��{�{�z�_�_out�����_�_ickerK�me�##�t�:�C:�C:S�`� � U��-�X�XSD m���E�T�=�E�T�=�E�T�|�A�W��S�Aconstant��q�qphysics�L��s4� �D� �D� �Dny�c�)�)�a�_�_o"l t tK*% >Dl t &*V4&*V4&*VW@l t %F�@# DF�@# DF�@# YZl t �42 #K�442 #K�442 #K\Ll t a@�9#;a@�9#;a@�9#W�\�)>KA<79O(d�U$I) <��$>KA<79O(d�U$I) <��$>KA<79O(d�U$I) <�SD l t 8 dJ8 dJ8 dv2 l t �P4�P4�PWP l t 7.K�0\7.K�0\7.K�0�ol�1��s ��C �� ��9 �� �� ��@ ��5 �� ��5p�9�)�)tal��{�{uch�� � �.�X�Xracking�?,�`,�`,nsform<w<w�,<w<w<w q�<wT<w=VDVDVD<w ation�A�� er@�R F � F � F value H� H� H� H� H� H� H� H�ition �K< � %�q  " m�dE-(A#%�m/$3 50&   " m�dE-(A#%�m/$3 50&   " m�dE-(A#%�m/$3 50& s�4(��;5 �8�5 �8�5 �8�4�_�_igger�s��ed �&� � ing�;H�EH�EH�R�X�Xue� -�`-�`-�#N-�aN-�aN-ween(�j] .�s] .�s] .o �s-�/���H��ype|�(k"h�4SA#%��|k"h�4SA#%��|k"h�4SA#%�swriterN�ui�7��s�#� � l.�q�40� �40� �40nderline�#stand�/��ood�#��ique�ts�i��11AF@ D@  >TS��_$1'� s� f �&?�"2!E  {{�}������~b0via9u�V�Kp sual9 �U:duration9 �Lly9 �(wait9�s9�y9�jeb9 �Q�Lgl9Lll9�?hen9&�I�[�M!�W��]ich9�eole9 �S�ill9>�#���# .\+j$CW� 6th9.�d+H�`?0���@�,out9�on9�2rds9�#x9@5i�>�C`&�1�:�DG-1>� y96i�w� brid9�5ou9�Zz9�   & % ��X � % � �  ] ��;��2~�P����� +!�[1%3Code Example 48jsanimationsconst animation = animate(x, 100, { duration: 1 }) // Set animation time to 0.5 seconds animation.time = 0.5 // Get animation time console.log(animation.time) // 0.5["js","animation"]intermediate2025-08-29 11:54:05�/� +!�;1%3Code Example 47jsanimationsconst animation = animate(element, { opacity: 0 }) const duration = animation.duration["js","animation"]intermediate2025-08-29 11:54:05�1� +!�?1%3Code Example 46jsanimationsconst animation = animate(element, { opacity: 1 }) animation.time = 0.5 animation.stop()["js","animation"]intermediate2025-08-29 11:54:05�,� +!�51%3Code Example 45jsanimationsanimate("#fff", "#000", { duration: 2 onUpdate: latest => console.log(latest) })["js","animation"]intermediate2025-08-29 11:54:05�6� +!�5E%3Code Example 38jsanimationsanimate( element, { backgroundColor: "#fff" }, { repeat: 1, repeatDelay: 1 } )["js","animation","stagger"]intermediate2025-08-29 11:54:05�@� +!�]1%3Code Example 37jsanimationsanimate( element, { backgroundColor: "#fff" }, { repeat: 1, repeatType: "reverse", duration: 2 } )["js","animation"]intermediate2025-08-29 11:54:05�0� +!�=1%3Code Example 36jsanimationsanimate( element, { backgroundColor: "#fff" }, { repeat: Infinity, duration: 2 } )["js","animation"]intermediate2025-08-29 11:54:05�� +!�E%3Code Example 35jsanimationsanimate(element, { filter: "blur(10px)" }, { delay: 0.3 })["js","animation","stagger"]intermediate2025-08-29 11:54:05�/� +!�)C%3Code Example 34jsanimationsanimate( ".my-element", { x: 200 }, { type: "spring", restDelta: 0.5 } )["js","animation","spring"]intermediate2025-08-29 11:54:05�2� +!�/C%3Code Example 33jsanimationsanimate( ".my-element", { rotate: 180 }, { type: "spring", restSpeed: 2 } )["js","animation","spring"]intermediate2025-08-29 11:54:05�1� +!�-C%3Code Example 32jsanimationsanimate( ".my-element", { rotate: 180 }, { type: "spring", velocity: 2 } )["js","animation","spring"]intermediate2025-08-29 11:54:05�7� +!�9C%3Code Example 31jsanimationsanimate( "feTurbulence", { baseFrequency: 0.5 }, { type: "spring", mass: 0.5 } )["js","animation","spring"]intermediate2025-08-29 11:54:05�.� +!�'C%3Code Example 30jsanimationsanimate( "section", { rotate: 180 }, { type: "spring", damping: 300 } )["js","animation","spring"]intermediate2025-08-29 11:54:05�/� +!�)C%3Code Example 29jsanimationsanimate( "section", { rotate: 180 }, { type: "spring", stiffness: 50 } )["js","animation","spring"]intermediate2025-08-29 11:54:05�C� +!�QC%3Code Example 28jsanimationsanimate( "section", { rotateX: 90 }, { type: "spring", visualDuration: 0.5, bounce: 0.25 } )["js","animation","spring"]intermediate2025-08-29 11:54:05�.� +!�'C%3Code Example 27jsanimationsanimate( "section", { rotateX: 90 }, { type: "spring", bounce: 0.25 } )["js","animation","spring"]intermediate2025-08-29 11:54:05�� +!�13Code Example 26jsanimationsanimate( element, { x: [0, 100, 0] }, { times: [0, 0.3, 1] } )["js","animation"]beginner2025-08-29 11:54:05�!� +!�'13Code Example 25jsanimationsanimate( element, { x: [0, 100, 0] }, { ease: ["easeIn", "easeOut"] } )["js","animation"]beginner2025-08-29 11:54:05� �~ +!s1%3Code Example 24jsanimationsanimate("ul > li", { opacity: 1 }, { duration: 1 })["js","animation"]intermediate2025-08-29 11:54:05��} +!�1%3Code Example 23jsanimationsanimate("path", { pathLength: 1 }, { duration: 2, type: "tween" })["js","animation"]intermediate2025-08-29 11:54:05��| +!�WC%3Code Example 22jsanimationsimport { animate } from "motion/mini" import { spring } from "motion" animate( element, { transform: "translateX(100px)" }, { type: spring, stiffness: 300 } )["js","animation","spring"]intermediate2025-08-29 11:54:05V�DC�������������������������� ���������������� �� E�������������������������CN~{zNBC:BC�\OR\\UVYZ\^fnpwt�qq����������f�e��_} wSts�ihgfe�5^O>O]r�S5B�C5�CB�55  E� �S�(((T77?{=@��3)(A�0`=����.���EE  u ]3�Q�3�3 �^��9�0� �q� �q� �i�z�z�B� �K� �K� �}� �X� �X� 0�e�{�{�Q�dQ�dQ �6(�Y(�Y(�@S�.S�.Sdeg �6� � 5����Y�p�paH�pSI8�$C�FSI8�$C�FSI8�$C�f�#*0 $(l]%�)t*0 $(l]%�)t*0 $(l]%�)T�(�z>� $[6F�z>� $[6F�z>� $[6��p�c3/~i=_(%1zu~@�c3/~i=_(%1zu~@�c3/~i=_(%1zu~C�h� �v#.a&� �Q1S N?2.�P� ,"$6@;Jn&��v#.a&� �Q1S N?2.�P� ,"$6@;Jn&��v#.a&� �Q1S N?2.�P� ,"$6@;Jn&�"�(�c3/Vji?_(%I��K�c3/Vji?_(%I��K�c3/Vji?_(%I����v3"6�)MM66*3"6�)MM66*3"6�)MM66�8�^1 T ��Q^> :UZJA6$� 1 T ��Q^> :UZJA6$� 1 T ��Q^> :UZJA6$:�u�kD*��kD*��kD*T�]� YH5�5n]� YH5�5n]� YH5�5L�>'~M.�='~M.�='~M.��."3"6�M66)"3"6�M66)"3"6�M66�:�<P1 X ��=^> :UZJA6$1P1 X ��=^> :UZJA6$1P1 X ��=^> :UZJA6$(�-�mD��mD��mD6� a�d=H< a�d=H< a�d=H�L�l0-G31] K2;4.-I{ +& �<�Sa 0-G31] K2;4.-I{ +& �<�Sa 0-G31] K2;4.-I{ +& �<�Sab��x�x�-�^�^le�)�y�y�b�z�z��T�T��x�x�V�a�a�8�^�^out�]���X�{�{(�ydB%1�|dB%1�|dB%1��x�x�w��� � � �0�^�^��c�cve �z����c�c�c��solute�n�O�f�O�f�O�#�G�G�.��cademy�m�x�x� �^�^ celerated�d�{�{�;�p�p�z� � ion�>�y�y�w�z�z�J� � �,��pt�}�y�y�"b�Sb�Sb�6�z�z�u�T�T� �l �l �0�a�a�#��ed � o�o�os�;�� �H!�`!�`!ss�?���(�p�p�U�y�y�p�z�zibility�-�5�-�5�-�5�)�T�T�-�5�-�5�F�a�a�-�5�-�5 le��)�-�)�-�)�M�4�/�4�/�4ordion(�I11�11�11"�)3�+3�+3unt"�(�M�(�M�(�M"�9(�9�(�9�(�9hieving�Y�{�{ross�)�Q)�Q)�D+�5+�5+�;�r�rtion��y�y�A�z�z� �I �I �F �V �V ve(�(�=��=��=�7�z�z�5�T�T�p�a�as�H�x�x�f�^�^ual��T�T�a�x�x�P�a�a��^�^dd�����E_� _� _"�h��C��C� ���T�T��x�x�i�_�a�a�$�^�^���ed��x�x�K�^�^ing��x�x�?�^�^tionally�(4�G4�G4�5�3�3�a4�H4�H4�C� � �[��just��3�3 �[��ing�K��vanced�^�p�p�G�x�x�8�G�G�s�^�^tage(�P� � ffect�T�3�3�p�x�x�#�^�^ing�W��s�[$�]$�]$ter:�E�v�i�P>�N�v�i�P>�N�v�i�P>�+�G�G"�y�P �'�P �'�P children�|�y�y�%�z�z �L�n�ngain�9�3�3st�$�]$�]$i�v��(� �_� �_� �_�f�X�Xll�f���t#�O#�O#"��p�t�p�t�p.�y� h�>�� h�>�� h�>(�A�"�I��"�I��"�I�C�T�T�{8� �2�A�2�A�2��H �2�'�G�G�~�a�a(�n�l�m�l�m�l�K��ow�G�x�x�e�^�^ing��y�y�L�z�zs�G�����most��y�y�@�z�zB#�qA- A*=7�@a",)-P,_$1+-48-yB3%A+3�E ""�V̀����0�0pointerdowncapture&�<�a�ainfo!�e�T�T� �a�as$�_I�CI�CIlygon��3�3�~�z�z ���line��3�3��z�z ���pular�o�{�{sition�s���M�{�{�<�p�p� �}�8�}�8�}(�r�8� �$�8� �$�8� "�VG!�RVG!�RVG!�Z� �T� �T� ed�d�y�y�_�z�zsible�G��J��J��v����{�{�?�p�p�E�y�y"�Jfe�Ofe�Ofe�~�z�z�W��S��S��(�R(�R(�ct� t� t�o��s��s���G�G���U��U��g�^�^�z�kz�kz�,��tential�!�{�{wer�-��ful�? ��[�?�[�?�[�{� �D�-�E�-�E�-?�v�y�y�M� �3�3�M��z�z�/�y�T�T�&�K��;�q�1�a�a�t�X�g�kractise�f�{�{e�O�v�v��u�usence8�7�Z���~1��}�p�p*8�7�_�q�q�X"1���r�r8�7�$�T�T8�7�q�x�x�\ 8�71���a�a1��J�^�^ 1� 8�7s)�)��K�p�p)���z�z)�)�F�>fH% �>fH% �>fH% able&�+�a�acancel&��a�aes!�>��F��F��y��S��S�ing!�+�T�T�f�a�avent"�e�x�xiew � � � � �ous���b��b�`� P�L W !�@ W !�@ W !�z� �! �&�2�H�2�H�2�k�p��U�A �D�2�.�2�.�2��G�L ly"��x�x�G�^�^imary!�4�T�T�o�a�avate�:����*�3�)�<�F� �6�l�\�S�b�fobably%�1�G�Gduction�w��gress �$�|�[� �[� �[���3�3(�5�4�k�_�4�k�_�4�k6���]��]��Ij�| k�9S�[| k�9S�[| k�9S*�@�Q`�Q`�Q�{��ject�����p�pmise���pS��Q�a�a4��2 s\�t�2 s\�t�2 s\ S�.�[$&tu(�$&tu(�$&tu(F�|=�:�c�N�K=�:�c�N�K=�:�c�N S�N�4>�@:�e�|�Y>�@:�e�|�Y>�@:�e�|�4�E�?Xf=�_E�?Xf=�_E�?Xf=.�vDn`}(�KDn`}(�KDn`}(�1�� S� S�4�PH�?XfB�dH�?XfB�dH�?XfB: �>"nd(�G"nd(�G"nd(�i�c�cagate�<�y�y�7�z�z ing!�M�T�T��a�a on�h�y�y��z�z�G�T�T� �a�aeffectR��Q�a�a R� R� R� R�rties�;�{�{� �y�y�M$�$�$�TG�5G�5G�f�x�x��^�^y"��V�$�V�$�V��^�^s(��m�^�2�m�^�2�m�^(�K�/�~�Q�/�~�Q�/�~0� %�GS %�GS %�G� �x�x0�R (�GR (�GR (�G�=�^�^�0��vide�Q��� �{�{��p�p��T�T�y(�R(�R(��G�G�U�a�a�+(�8(�8(���d� �y�y(�.�%���%���%��I�z�z�C�G�Gs�a����{�{�!�'�T�'�T�'�Z�g��g��ging�a�3�3��x�x����T� � �=�^�^�K�c�cush%�f�G�Gt%�{�G�Gquality��{�{�x�p�peryselectorall��c�cick x , �/ �,�}S�L�}S�L�}S" x �C�{�{& � �<�r��r��r �/  x � �  �/  �/  �/  x  x  �  �  �  �/ ly"�t�x�x��^�^te""�s*t4�,*t4�,*t4"�*t4�*t4�*t4rad� �x�xius"�H�f�f�f�L�Lx�%�6���%�6���%�6�%�6�%�6�������%�6nge$�R� � te�`�)�)her� �a�aios"�?�x�x�]�^�^w$�� � e�N���n�� �s� �s� $�f�r� �r� �r�M�_�t��t��tT�c�Z�)� 5��Z�)� 5��Z�)� 5�i�y�y�yL��^� *� 5�q�^� *� 5�q�^� *� 5 �zach�"�3�3��G�Gt ��)�]�]�^   i (R 3W6zi (R 3W6zi (R 3W6z   ���4     �ZZV2>u1�'/~vE   �ZZV2>u1�'/~vE   �ZZV2>u1�'/~vE    ��F�0�0��`%$o�Q��i$(�f�8�3,1N�f77A �@*q �. !!�Ẁ����2m~   ��Zm��Zm��Zw "�v   |z%� �7z%� �7z%� �  �J    B c"w7I c"w7I c"w7   D ������j   $�0�H$�0�H$�0�V   0read�S�a�a�^���!�3�3�f���+�G�G�o�c�cing"�]�x�x�{�^�^l"�5�x�x�S�^�^istic% ly"�^�x�x�|�^�^sons"�� �n� �n� �s�G�G�2�x�h�x�h�x calculations"��x�x�/�^�^eive!"��`�]�`�]�`"�X�&`�_�&`�_�&`s!�-�T�T�s�a�aipes�` �r �r �} � � ognised!��T�T�H�a�a s�F�p�p�H�T�T��a�ammend�I���Y�p�p ed"��x�x��^�^rded$� � � t��3�3��z�z .�Y D*?�X D*?�X D*?duce�0�3�0�3�0�3�0�3�0�3�0�3d ��7 � � ��7 � � ��7 ��7 ��7 � � � � � � ��7f��y�y�@�z�z"�w �( �( ����� � "�3 �, �, �~�^�^"�M �Q �Q erence �O���[�G�G� �c�cred�h�y�y�c�z�zgistered�K�3�3 property�X�3�3ular)�L��lated�.�Q�c�T�T]�N��)�a�a�:ive:�p�a�2� �a�2� �a�2� �_�_�'� � �)�E�E�"�|"�|"eased!�@"�4"�4"�{"�A"�A"s!�A�T�T�|�a�aing!�3�T�T�n�a�amoved�O���n�?�u�u�a�8�v�v�Z�x�x�X�x�^�^s$�t� � ing""�=��!=��!=�"�@?�$�?�$�?�$nder"���2��2����i��i���G�5�G�5�G(�d��A�4��A�4��A(���,�(��,�(��,���ed��a�a��p�p�k�y�y�d�z�zrs N� N� N� N� N�ing'��a�a"�I�5�7�5�7�5"�}�z5�3�z5�3�z5s"�B=�==�==�t=�#=�#= �{orderE�5=�E�5=�E�5E�5E�5=�=�=�E�5ing"��x�x�;�^�^peat�5�H5�H5�>�y�yF�\�M  $(��r�M  $(��r�M  $(��w�z�zdelay(� �b�1�b�1�bing�w�3�3s�G�{�{�M�3�3type"��3+�Y�3+�Y�3+tition��3�3lace�h�{�{�b�y�y��z�z�?�x�x�]�^�^yed�.�3�3 resenting��)� �)� �)�n�z�z s$�0 � � sets� �a�aize+��x+�+��X �q �q +�+�olved�:�y�y�e�z�z�B�{�{r�&�p�p s�/�p�ps��y�y��3�3�1�z�z pectively$�f� � �6��tart�a�3�3ed�.�3�3delta�J !� !� !����2�F�F�#�c�cored)�l��speed�4 � � �)� )� )ult��3�3��T�T�_�x�x�~�G�G�N�a�a� �^�^ing"�H�x�x�|�^�^me�A�{�{�U�#�#d�?�3�3turn���.�-�c;�Y�c;�Y�c;�H�t��t��t� � �I� �I� �O*1�!*1�!*1(�$�e2�d�e2�d�e2�^��s(�R 90�k 90�k 90"�Z� �� �� � ���x� � �O+�+�+�E�c�cusing�n�y�y� �z�zverse�S��s�l�3�3ting��3�3gb�] � � �& �h �h a(�t2�n �V2�n �V2�n ��3�3(�-2�0 �2�0 �2�0 ight�/�y�y�h�z�z�b�F�F��t�t��S�S��Z�Z�v��oot#�4���m�c�ctate���.� �:�+ �:�+ �:�_�p�pL��5 �*�5 �*�5 X�'��v0"� ��v0"� ��v0"L�;�5 �+�5 �+�5 �L�T�T�5� � ��a�a(�((�L(�L(x��y�y"�)�YQ� �YQ� �YQ�=�z�zy�H�{�{��y�y�*�3�3�>�z�zz��y�y�;r�Cr�Cr�?�z�zion� �s �s ��3�3wvalue "�X�<�<ule!��T�T�S�a�as!��T�T�[�8B 0", !0B[q+:U!K +o,'8%jL8%B( !8$A yW 9X�e*+$ ""�V̀����0��a�a0run$�E� � �4B�B�Bning�{�3�3s" �F��K��K�N� l}#T%� cl}#T%� cl}#T%� <� 1GX{�CX1GX{�CX1GX{�CT�/��"`$F N��"`$F N��"`$F 4�CvpH�XP�-vpH�XP�-vpH�XP@�}�Nef�$�a�Nef�$�a�Nef�$4�|vpH�R�lvpH�R�lvpH�R: �o�h+N �a�h+N �a�h+N r�oM�S(D� �A N�|M�S(D� �A N�|M�S(D� �A N�(�bszc�<szc�<szc(�N�4� N�4� N�4��G�G: �'�k,T �`�k,T �`�k,T ~ �%0�Y(E�x�A N�z0�Y(E�x�A N�z0�Y(E�x�A N�"�y�3�;y�3�;y�3(��\b[� �\b[� �\b[am�[�y�y�x��e�v�p�p��y�y@�m� �;�D-�]� �;�D-�]� �;�D-�O�z�z"�D�:��:��:�l�Q�)�Q�)�Q�}� � "��E��E��E��<�$�<�$�<�R�����ple%�k-�-�-d%� }�L}�L}uration%�Z�8�8ing%�"�G�Gndbox"�h�x�x��^�^cale �P6�61�41�41�Q�N�{�{�\B�$�'�w$�'�w$�'�CZ�~-�xd�- �2-�xd�- �2-�xd�- �*�#��4��4��GB�7-�8d�--�8d�--�8d�MH�9 h%�g�3� h%�g�3� h%�g�3�=H�=�])Q�C�C�])Q�C�C�])Q�C� �" �L �F�t h%�g�!3� h%�g�!3� h%�g�!3}H�q�G)Q�C�?�G)Q�C�?�G)Q�C�# �x$� �t �t �#x����S�p�p��y�y�%�3�3�9�z�z"�5W�!W�!W"�o�'�'y��y�y�&�3�3�:�z�zing�x�y�y�0�z�zenarios%ope�| �a �a "�'�`�`�a�x�x��^�^reen�u�p�p�Y�Y�!�Y�!�Y�e� � �w�Y��Y��Yshot"�b�x�x��^�^ipt@�r �  �  �I�k�k"�$(!�(!�(!�Z �W �W "�zS �S �S @�R � )�[ � )�[ � )oll�j$HoHj�*  -�/�*  -�/�*  -�t   J��m1*�h�51*�h�51*�h R!DOD�  -�  -�  -0$HoH�   ��!DOD$HoHF$HoH�d (�J�} (�J�} (�J�I�>$HoHR n,J =�  n,J =�  n,J =� =�4 �o .   !P    #�D .   !P    #�D .   !P    #� !DODm�a�aD!DOD�A (�6�w (�6�w (�6l�!DOD5 j1K �  j1K �  j1K � "$HoH�.able"�m �q �q ����V ^�$ ^�$ ^� �W �W �P�c�c direction#�_��er$���~��~�ing��3�3�}�T�T ��^�0�\�0�\�0�8�a�alength$�S� � ref#�!�~�~�Y �N �N timeline$(�X T�# T�# Tx#����P�c�cy#(�0 �@0 �@0 �R�c�cprogress�~ � � �L �h �h .�3 S2�{ S2�{ S2.�m 6�~ 6�~ 6earch! �n �~ �=cond.�@a��J� a��J� a��J�� � �(�G�Gs�v�y�yX��k�`� .� ��k�`� .� ��k�`� .� ��z�z�p�-�-s�t>�d>�d>tion��y�y"�Q�3Q�3Q�S�z�z�,�r�r�b� � �J�X�Xe�"�{�{ �_�r�x�x� �.�&�^�^�_��gment(�O3��L3��L3� ���s)� ��lector�w�a�a��T�T�a�a�a s�{�#�#ikoff�\�y�y�y��quence��y�y��' D) *� C*-/@�7 D) *� C*-/@�7 D) *� C*-/@�}�z�z s�8�{�{�m�y�y4%�I�T �^�{�T �^�{�T �^��z�zries�x�y�y�s�z�zt@�aY P,1 �MY P,1 �MY P,1 � �{�{F�G ��V��/G ��V��/G ��V���|�3 GP  c�/L_&�C�q�3 GP  c�/L_&�C�q�3 GP  c�/L_&�CR�OG �:��V�W�0G �:��V�W�0G �:��V�W.�q 9��l 9��l 9�4���6���6���6�70t�r0t�r0t�E� � .�b [ �= [ �= [ .�) <��v <��v <�4�@�� ��� ��� �o,z�A,z�A,z�v��isopen"�F�x�xopen"�L�k�ks�l�a�a�0'�'�'crolldirection#�`��tatus�%�y�yting�q���&�{�{�V]�]�]@�@�X�,i�2�a�X�,i�2�a�X�,i�2� �3�3@��#�[!<:� �&D;% #V3RQ?' )`=�} ""�V̀����0#��y��,i�p�b��,i�p�b��,i�p!�Iw*�7w*�7w*�s�x�x�P��"��*�9�*�9�*�#�^�^� �c�c�o�� 0settings�O�fO�fOup�J�p�p�p�y�y"�)�~A�?�~A�?�~A�[�a�a�{Y�Y�Y"�S�F9�h�F9�h�F9hadow��y�y�9�z�z�]�x�x�{�^�^s"�K�x�x�i�^�^pe)�1��red �H. ����Y���Y��(�C�!�t�M�!�t�M�!�tortcut�f��c��c���Z�"�Z�"�Z s$�_� � hands)���uld��{�{�b�y�y�]�z�z��T�T�t�x�x�U� � � �^�^�E��w�T���2�p�pide"��x�x�.�^�^gnal��a�amilar"�:�x�x�X�^�^�\��ple���"�Y�T?�l�T?�l�T?�)�p�p�{�7�D�7�D�7�3�z��z��z�w�T�T�j�x�x�/�a�a�:�P��P��Pifies)�h��y�g�p�p ultaneously�L�y�y�g�z�znce#�E��gle�v�{�{�1�s��s��s"��??�9�??�9�??�,�!�[�!�[�!ze�2�3�2�3�2�3�2�3�x�x�2�3�2�3s��3�3kew��x�x�,�2�2�@�y�yx� �y�y�.�3�3�B�z�zy� �y�y�/�3�3�C�z�zlow"��x�xs�B�{�{maller�H�3�3�)�x�x�0�G�G�G�^�^rt��{�{ooth�v���J�x�x�~�^�^ed#� ��� �c�cing#�����c�cly �B  nap! ���x�x�=�^�^py��y�y� �z�zshot"�#�x�x�A�^�^ s"�@�x�x�^�^�^o���g��g��>�p�p�C�B�9�B�9�B�>b�b�b�|�x�x�h���}@�L@�L@�v�G�G��^�^��c�c�".�p.�p.me!�7�T�T"�E�p%�g�p%�g�p%�|�G�G�}�a�a"�q�b%�[�b%�[�b%� ��thing�9�a�a��-�M�-�M�-�8�-�3�-�3�-imes(�#���Q���Q��(�\�V�H�`�V�H�`�V�H�Q�x�x��^�^urce�x���k�{�{��p�p �g �w �6paced�7�y�y�2�z�zecial�n�3�3�S�z�z �r��fic�d���o�{�{�C � � ��x�x�.��"�o�G�G�M�^�^�h�c�c ally�L�p�p��x�x�C�^�^y"��x�x�K�^�^ed�r�`�`@�<'�[ �s'�[ �s'�[ ��`�`�$�+�+s�?�{�{lit 5� 5� 5� 5�5��"text 4� 4� 4� 4�4��"read�R�3�3ing8p p�74 8p� �o �o  i�(p�7�,�[� �[� �[�>8p�[�j  D�2 @  " �h�j  D�2 @  " �h�j  D�2 @  " (i����a��a�p�7p�7�0�x�xp�7�p��8p�V8p;  $<  K(/  $<  K(/  $<  K(/i�i�� �^�^i���c�cp�7s! �j��x�x�o�G�G�%�^�^value K� K� K� K� K� quarespace^�^�^�^�^�rc�P�{�{tagger:� 2:��/ �K �K  �o�v�v >:��j  �  �   ��z�z �m :�:�� children ��f�f direction � �z�zing��{�{rt x , �/ �>p�}�/p�}�/p�}, x �Q�,�Q�,�Q � �<�p�p �/ � �y�y�" x ��g 7N! '5 �7�q�g 7N! '5 �7�q�g 7N! '5 �7N � �K�z�z �/ �K, �/ �f �#�L �#�L �# �/ F x �H$#&#�k$#&#�k$#&# x  � , � �6 �+�* �+�* �+ �  �/ ed ��7�Z�����;�p�p�7�H�� ��k�7��T�T �7 �7 � ���w�a�a � � �7ing�r�a�a�;�{�{�W@�u@�u@�%��w��w��C��]��]�s��y�y��z�z�s�T�T�7� � �9�a�a���te6� ]8�< l]8�< l]8�< �M����p�p4��#�)�0�#�)�0�#�)��'�'� � �s� �s� �(�R�R�Q � � �^��G�G�F�8�8� �\ �\ ic�Y�3�3us�$ �o �o  ddeviation!�5�P�P�y�]�]icky"�@�x�x�u���Z� � �^�^�^ffness�h�{�{4� 0�,c�f0�,c�f0�,c��xU/<( U%z !BE ,!! 0$!�R1F<%`$M *+�/,*9��O�F?�6&. ""�V̀����0��%.(�O�)��)��)��c�c0still"�=�x�x�k�^�^���op�"�`�`�>�=>�=>"��#��#��#�<G�5G�5G�J�B�B� ��O�Oped�*�3�3 ropagation!�m�H�H�3�U�Us��3�3�8� � re#� � � �K �X �X raight�g��"��O��O��O�o� �h� �h� forward�T�p�p �q��ngely"�N�x�x�l�^�^ength�r�3�3�g�G�Gtched"�y �o �o � �U �U s"� �x�x�(�^�^ing��a�a�V@�u@�u@s�M�{�{�l �n �n �K�3�3�% �o �o yle"V��G�)�:�)�:�)��� V��R�p�p.� o;�= o;�= o;V��S�3�3.�J o;�> o;�> o;j�,A� (.v`�IG �MA� (.v`�IG �MA� (.v`�IG (�(�e2�e�e2�e�e2 V�V��O�G�Gj�XA�(.x`�3G �AA�(.x`�3G �AA�(.x`�3G (�a�$)6�f�$)6�f�$)6@�<u($2�uu($2�uu($2effectU��G�F�F U� U� U� U�s�)6�j6�j6�W�x�x�/���u�^�^�i�c�c�M���yubscribe"�f�D��D��D d�+�a�a rs�`�a�adden�e�3�3��G�G ggestions��{�{�{�p�p percharged� ���F�p�ppowers��y�y�X�z�zport�bW�W�W��T�T�'�x�x�=� � �;�a�a�E�^�^ed�*R�cR�cR�r�x�x�F� � ��^�^s� )b�)b�)b(��D9m� �D9m� �D9m$�g�;�@�;�@�;�O� �}��}��} � �Dvg Y� (�5, Y�V��i��i� 8(�5�s�{��d�{��d�{�FY�O " n� �j " n� �j " n� 4� �9�C�s�9�C�s�9�C>(�5�� +�� +�� + (�5� �s�s(�5� Y� Y�4�'� )�� )�� )��Y�Yp(�5�$��j$��j$�effect X� X� X� X� X�s ��3�3�v�x�x��^�^�8��witch# �Res�[�3�3ing"� �x�x�L�^�^ ynchronise"��x�x�A�^�^tax�1�{�{stem ����B�p�p�X�m� �m� �m�v�m�s�m�s�ms"�{�x�x��^�^t�8�a�a�T�`�`�6�p�p�^��j��j��m�L�i�L�i�L���k��k�(�h� �)� �)� ^�g�. �1�8~ �h�. �1�8~ �h�. �1�8~ �r��(�#�& �+�& �+�& X��0 �1�8~ �c�0 �1�8~ �c�0 �1�8~ �&�c�cag�s �W �W ���ilored�M�p�pke�@���I�p�p�O�y�y'��3�3�z�z�z�~�c��c��c��G�G�*�U� �U� �Us"� �x�x�O� � �>�^�^ing"�=�x�x�[�^�^lk"��x�x�!�^�^p�}���"�y�yZ �cH% �;{cH% �;{cH% �;" ���M��M�cancel!�c�T�Tpable!�p�T�Ts�v�p�prget(�Q�4+I�W�4+I�W�4+I�$�=�x�=�x�=(� �v+I��v+I��v+I�K�T�T�:��^!�Jg\%!:�*Jg\%!:�*Jg\%!:��G�G��a�a�r�c�c�,��s4�\�OXR�&\�OXR�&\�OXR.�X\�H�E\�H�E\�H�,�T�T�g�a�aechnical"�\�s�s�z�Y�Yll#�S��mplate b�7.[��`��e��e� b�7([��T ? �- ? �- ?  b�7 b�7 b�7.[��{��D��D�4[��0�0�0F[��s�#1�`�#1�`�#1 b�7orarily!�.�T�T�i�a�axt 6� 6� 6��8�x�x 6�6��"�V�^�^han� �a�a�i�*���"�{�g�p�p�9�W�y�y�^ �)�"��"��"���z�z"�Q�Q�Q�= �*�!�Y�!�Y�!� ��-�1�G�G*�@Q�Q�Q� �H�!�?�!�?�!�-�Y�]t��oJ,�oJ,�oJ"��!J�1�!J�1�!J$� ?�@i?�@i?�@i�jZJ�PZJ�PZJ4�\��U�N�N��U�N�N��U�NL��@�D�~�;�8�H�@�D�~�;�8�H�@�D�~�;�84����|�_���|�_���|� �T�Tf�[1�B�V|Q9S?�~|1�B�V|Q9S?�~|1�B�V|Q9S?�~"��w ��w ��w *�Np�X�agp�X�agp�X�a"�Nv�K� v�K� v�K�E�a�af�1�I�A|Q9S?�~p1�I�A|Q9S?�~p1�I�A|Q9S?�~"�S�y �a�y �a�y �d��_e�. r�!D ! ! & .!D ! ! & .!D ! ! & .x� \  jM1#][ \  jM1#][ \  jM1#]q�r�' /5 . :."/')I-5" /5 . :."/')I-5" /5 . :."/')I-)%\&5!1�B4I  E/]�C+8 ?�sc!\ �/L$�;=�=� !!�Ẁ����2�5"��0? E48 ' tW(5B? E48 ' tW(5B? E48 ' tW(5�R�-H�EC*# > b �.E\/S+JH�EC*# > b �.E\/S+JH�EC*# > b �.E\/S+J�Jr�(?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  (?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  (?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  �L�fH�Eb*# @ b NEj1c6KH�Eb*# @ b NEj1c6KH�Eb*# @ b NEj1c6��~V :  2  : " >V :  2  : " >V :  2  : " >��t%M1 !>. =g4( "   #)4&%M1 !>. =g4( "   #)4&%M1 !>. =g4( "   #)4&b� �~'! &*VX-'! &*VX-'! &*VX-�.r�-@4  " !     10@4  " !     10@4  " !     1�r�y A # 5  "5/y A # 5  "5/y A # 5  "5/��6Y :  2  / %" >~Y :  2  / %" >~Y :  2  / %" >��bM1 !?0 'g4( "   #)4&PM1 !?0 'g4( "   #)4&PM1 !?0 'g4( "   #)4&x�6' ,*x0' ,*x0' ,*x0��J!& 3:"* BJ!& 3:"* BJ!& 3:"* 0their�d�a�a�.���b�T�T��x�x�(�a�a�!�^�^m�J�a�a4�C�9(y'i��9(y'i��9(y'i4�o�?(y)i�v�?(y)i�v�?(y)in��{�{����B�x�x�� � �`�^�^re�@���.�{�{�P�p�p�@ �* �* �~��k��k��l�`�4�`�4�`���Q��Q��$�c�c���fore�_�y�y��z�z��T�T�W�a�a�V��se�[���k�{�{�c�<�?�<�?�<.�dqv��(qv��(qv��^�j��j��j�(�b!U�b!U�b!"�,`G�+,`G�+,`G�&���B� � �J�G�G�c�m!W�m!W�m!"�L,JG�',JG�',JG�`�c�c�h�h�hy�(�;(�;(�M���n0�eR'�}� R'�}� R'�}�M(�^R'��R'��R'�B�D�K�D�+�+�K�D�+�+�K�D�+��<� � :�r�Q�D�+�!�Q�D�+�!�Q�D�+ing"�<�x�x�Z�^�^s"�=�x�x�[�^�^k�>�a�ard)�z��s�b�a�a(�6�8�\��8�\��8�\4�&-I��U�$-I��U�$-I��U�>�p��p��pl��N��*d)�,Dp� =�N��*d)�,Dp� =�N��*d)�,Dp� ^� & � "Lb4W�S�0& � "Lb4W�S�0& � "Lb4W�Sr�P�N��jf)�LD��.>�N��jf)�LD��.>�N��jf)�LD��.(�D?:M&�p?:M&�p?:M&��H)(�/on4�]E�)(�/on4�]E�)(�/on4�]E��w��w��wZ�)L9�g  >�bL9�g  >�bL9�g  >�<�eZ�C& �oZ�C& �oZ�C& �(��M&�r�M&�r�M&� �B�8)(�1Yn4�]Ea�8)(�1Yn4�]Ea�8)(�1Yn4�]E�F�E� �E� �E6�smI) F�7?mI) F�7?mI) F�7ose�[��k��k���P�,�P�,�P�D�x�x�b�^�^ree��{�{�e�y�y4�m� � �� � �� � "��6�6�6�6�6 �q��js� �3�3ottles��a�augh�~��w��w��y�$�X�$�X�$�`�T�T�����a�a��c�cout(�9��?�8��?�8��?��3�3"�4�_��_��_�H� � ickerR�5K�R�5K�R�5R�5�C"R�5�x   K�K�K�R�5dy��y�yme�Ft�7�d�m��t�7�J�y�y�Y�4�o�&�9A 8�A,� �8�&�9A 8�A,� �8�&�9A 8�A,� um�� �z�z�+t�7�H�T�T�7&t�7�F�?�;�?�;�?�> t�7�%���t����J�!o1�&!o1�&!o1�4m��9�a�a�w$m��$�*�6�*�6�*am���c�c�*t�7�Kline��3�3 physics�U�3�3��G�Gs�J�{�{.�E#�M#�M#4��h��h��h.�@�ZCE;s8�Q� �79RMBx�D ""�V̀����0�#�N#�N#%�p��4��4�0timing! �fny�=�{�{ps"ox l t A !/ 5<2 := !/ 5<2 := !/ 5<2 :5��)� "64 !-4)� "64 !-4)� "64 !-N�vl t �Y1s0�+>�Y1s0�+>�Y1s0�+a��DP25�3)M .;P25�3)M .;P25�3)M .H�<�t QO-9g %8 r�<i:", �;z� QO-9g %8 r�<i:", �;z� QO-9g %8 r�<i:", �;z�P��Hl t �$�!G!I L.G7:7S<� @A'-$ 2 ZP�>�.�!G!I L.G7:7S<� @A'-$ 2 ZP�>�.�!G!I L.G7:7S<� @A'-$ 2 ZP�>F�4�, RO-9g %8 �2�>i:"�� _P RO-9g %8 �2�>i:"�� _P RO-9g %8 �2�>i:"�� _}�$�- @� Q $-",s"3\ @� Q $-",s"3\ @� Q $-",s"3I�&�r�<z  104  kM. �@^.R6 "�rz  104  kM. �@^.R6 "�rz  104  kM. �@^.R6 "�j�(R�20tY j6$20tY j6$20tY j6��l t �V y.uK �V y.uK �V y.uK;ll t [II%)K?g[II%)K?g[II%)K?���h @� Q $-62s"3^ @� Q $-62s"3^ @� Q $-62s"3M�d�-=|  306  kO. �@^.R6 "�+=|  306  kO. �@^.R6 "�+=|  306  kO. �@^.R6 "�UJ�>2,zY T9$2,zY T9$2,zY T9=8�y}"�qh}"�qh}"�q�ol�)�{�{� �3�3��x�x��^�^s ��:0 �6�"�v�v�^ ��{�{�{� ��I�p�p�Q �6�w ��3 �� �6�   �6� �D �6�Y ��6 ��l ��M ��D ��S �6�3p�-�y�y�f�z�z�`�T�T"�E�S+��S+��S+��a�a�@��ics�/�R�c�O��;tal��3�3�p�z�z�U� � ���uch�t�p�p4�!�= �`�= �`�= 4�\�= �m�= �m�= r�C���L�p�prack��a�a �X��L�\ -�t!� -�t!� -�t!�b�_�_ed$�R�%�g�%�g�%ing �y�y�ys$�g� �  ditionally"��x�xnsform<w x�7(<w�f-�lf-�lf- q�Fx�7�LLb�"Lb�"Lb(<w�S��4��4�Fq��0Lb�#Lb�#Lb x�7>x�7e�8|�\�T��8|�\�T��8|�\�T(x�7�| � � <w�j� � <wZ�G�G q�4q��z|�F�T�N|�F�T�N|�F�T(q��- �T �T x�7�m$�z$�z$ box)�s � � perspective� �y�y�1�3�3�E�z�z s����F�{�{�s�p�p( �p* �7* �7* �8]�X]�X]( �)* �8* �8* "�O+��N+��N+�"�+�m�J+�m�J+�m( � z�z�z value H� H� H� H� H�ition�- � �  "%��F �e �e  d�Mp� �b$!�l �.p� �b$!�l �.p� �b$!�l  4�cl�a��el�a��el�a� j%��Rp�I �d$!� $ �?p�I �d$!� $ �?p�I �d$!� $  �<�T�T ^�u    ��j    ��j    �  �&z�Oz�Oz %��C�a�a j %��q    � �b    � �b    �  %��  s&,�5�K��"(��B�j�jb,�5�) 2��� 2��� 2��"�( �4�x �4�x �4v(��L 2��3�o 2��3�o 2��3,�5�   � ,�5�u�*�  *aJP6n�*�  *aJP6n�*�  *aJP6,�5�#�G�G (��(��K�.�  *aJP6b�.�  *aJP6b�.�  *aJP6(��,�5�rlate�z�y�y��3�3�3�z�z x�G�u�u��3�3��v�v�$�G�Gvel!�x�T�T�G� � �>�a�aees�{�y�y��z�zick#�N��gger�C���R�{�{� �p�p�% �C �C �8�x�x�` �P �P �l�^�^ed�>���,�O�{�{�r�[�[ �=�=�x�x(�t�q�q�0� � �o�^�^(�,�B�Bing#�s��s�]�y�y��z�z��x�x�-�^�^ oubleshooting"�,�x�x�`�^�^ue��a�a�.�p�p�G�x�x�g�{�{�m�G�G�w�^�^��L�Lly"�F�x�x�r�^�^sted���y"�j�x�x��^�^s�f�p�pug!�5�T�T�{�a�atorials! �b �r ' �z,�UH)0GR �<+�*�\�|$1#X{5#P  ""�V̀����0��10tweak�,�{�{en.�/[.�)[.�)[.o�d�{�{��y�y��3�3�L�z�z:�{E�%�*�@�,E�%�*�@�,E�%�*�@"�n�# �f�# �f�# "�y�N �r�N �r�N :�1;�,��@�*;�,��@�*;�,��@"�&�% �5�% �5�% �Y��ype�3�5�H�5�H�5.� �9�L�j�9�L�j�9�Lp�#�W!o�yQ"#�e�W!o�yQ"#�e�W!o�yQ"#.�B�9� �+�9� �+�9� �R�x�x�&�G�G��^�^�l��s�y�a�a�6����p�p�'�i�i�'�3�3�`�j�j�o!�s!�s!�'!�D!�D!writerU�5N�U�5N�U�5U�5U�5N�N�N�U�5ically!�'�T�T�m�a�aui�"�5"��&�"�5 �S�(�S�(�S�/�F�6�F�6�F �"�5%�T�T�"�5�"�5�4�a�a�"�5s l����]�p�p@�4!�8(�Q�!�8(�Q�!�8(�Q@�4D)�v�{ �;D)�v�{ �;D)�v�{ @�m!�(�c�"!�(�c�"!�(�c nanimatable"��x�x�H�^�^derline�4����p�p�7�x�x�e�^�^neath"�7�x�x�U�^�^stand�t�3�3sirably"� �x�x�)�^�^ique� ����{�{�VH�2H�2H�tH�H�Hly�;�y�y�t�z�zt�x�a�as�>�3�3� � � �&�G�Glike�q�y�y�*�z�z necessary"�f�x�xplugin"� �S �S  subscribe�O�]�]til�>�3�3�f�x�x�D�G�G��^�^p�_�a�a�p�@�{�{�E�t��$��-��x�x�4�p���o�'�]�M�7�^�^�W�S�Wdate�*�y�y�c�z�zd�>�a�a�V�3�3 �ws�I����9�B�8�K�U��E�{�k�b�q�ugrade���(�4���(�4���(�4�(�4�(�4�����(�4rls�l�{�{s�H���}�{�{�S�3�3���D��D��1�x�x�^ � � �W�G�G�L��F��F��O�^�^age��a�a�,�p�p�Q�3�3�W�x�x�|� � �A�G�G��^�^e�C�a�aD`~�,���t�{�{RY`�D�d��d��dn `~�NN�(�N�7N�(�N�7N�(�N(��6�#�^�6�#�^�6�#jY`�8N�j�~�FN�j�~�FN�j�~\`~�K��H��H�P8`~� `~�KC1� KC1� KC1�B��~��~�.�9pp S�pp S�pp SRY`�<��O��O�4Y`� Y`� T!4� T!4� T!48`~animate ~�7 w�~�7�%*�Q*�Q*w��{*�R*�R* ~�7 ~�7 ~�7 w� w� w� ~�7 ionframe ��7 {� ��7 {� ��7 ��7 ��7 {� {� {� ��7d � �{�{�`�y�y(�$w�]�A$w�]�A$w�]� �z�z�#�T�T"�_c�vc�vc�\� � � )8�j)8�j)8�^�a�a"� e�Xe�Xeomref&�? �= �=  ragcontrols ��7 �� ��7 ����7�N ��7 ��7 �� �� �� ��7effect�E�6E�6Eful�.�@�;�@�;�@�)`�`�` �a��inview � �7 �� � �7 �� � �7 � �7&� �7�)���KS �� ������c�c � �7motiontemplate ^�7 W� ^�7 W� ^�7 ^�7 ^�7 W� W� W� ^�7 value�6 �o �o �f�l�l �X��event c�7 \� c�7 \� c�7 c�7c�7�M�� \� \� \� c�7 pageinview ��7 ��7 ��7 ��7 ��7 ��7r#�V�� educedmotion ��7 � � ��7 � � ��7 ��7 ��7 � � � � � � ��7f!�!�5!�5!�"��s"�|�x�x��^�^crolli�7�`��b��T �h �h  i�7 b� i�7 i�7Li�7�f 6!;X�( 6!;X�( 6!;X   v b� b�:b��K 6]�* 6]�* 6] i�7pring m�7 f� m�7 f� m�7 m�7m�7�p � �  f� f�f�� �X �X  m�7tate�&�y�y�M�x�x�a��time q�7 j� q�7 j� q�7 q�7 q�7 j� j� j� �,�)_ku}!14 !-�culK�ah]�i,s].Z< f�f$itionally be set as another element, to track its progress within the viewport. ``` scroll( animation { target: document.getElementById("item") } ) ``` ### `offset` **Default:** `["start start", "end end"]` `offset` describes intersections, points where the `target` and `container` meet. For example, the intersection `"start end"` means when the **start of the target** on the tracked axis meets the **end of the container.** So if the target is an element, the container is the window, and we're tracking the vertical axis then `"start end"` is where the **top of the element** meets **the bottom of the viewport**. #### Accepted intersections Both target and container points can be defined as: * **Number:** A value where `0` represents the start of the axis and `1` represents the end. So to define the top of the target with the middle of the container you could define `"0 0.5"`. Values outside this range are permitted. * **Names:** `"start"`, `"center"` and `"end"` can be used as clear shortcuts for `0`, `0.5` and `1` respectively. * **Pixels:** Pixel values like `"100px"`, `"-50px"` will be defined as that number of pixels from the start of the target/container. * **Percent:** Same as raw numbers but expressed as `"0%"` to `"100%"`. * **Viewport:** `"vh"` and `"vw"` units are accepted.[{"title":"Code Example 1","description":"","code":"import { scroll } from \"motion\"","language":"javascript","difficulty":"beginner","tags":["js","scroll"]},{"title":"Code Example 2","description":"","code":"scroll(progress => console.log(progress))","language":"javascript","difficulty":"beginner","tags":["js","scroll"]},{"title":"Code Example 3","description":"","code":"const animation = animate(\n \"div\",\n { transform: [\"none\", \"rotate(90deg)\"] },\n { ease: \"linear\" }\n) \n\nscroll(animation)","language":"javascript","difficulty":"beginner","tags":["js","animation","scroll"]},{"title":"Code Example 4","description":"","code":"scroll(callback, { axis: \"x\" })","language":"javascript","difficulty":"beginner","tags":["js","scroll"]},{"title":"Code Example 5","description":"","code":"scroll(callback, { container: document.getElementById(\"scroller\") })","language":"javascript","difficulty":"intermediate","tags":["js","scroll"]},{"title":"Code Example 6","description":"","code":"scroll(animation, { target: document.getElementById(\"item\") })","language":"javascript","difficulty":"intermediate","tags":["js","scroll"]},{"title":"Code Example 7","description":"","code":"scroll((progress, info) => {\n console.log(info.x.current)\n})","language":"javascript","difficulty":"beginner","tags":["js","scroll"]},{"title":"Code Example 8","description":"","code":"const cancel = scroll(callback)\n\ncancel()","language":"javascript","difficulty":"beginner","tags":["js","scroll"]},{"title":"Code Example 9","description":"","code":"scroll(\n (progress) => console.log(progress),\n { container: document.getElementById(\"carousel\") } \n)","language":"javascript","difficulty":"intermediate","tags":["js","scroll"]},{"title":"Code Example 10","description":"","code":"scroll(\n (progress) => console.log(progress),\n { axis: \"x\" } \n)","language":"javascript","difficulty":"beginner","tags":["js","scroll"]},{"title":"Code Example 11","description":"","code":"scroll(\n animation\n { target: document.getElementById(\"item\") } \n)","language":"javascript","difficulty":"intermediate","tags":["js","scroll"]}]{"props":[],"methods":[{"name":"scroll","signature":"scroll()","description":"scroll method"},{"name":"animate","signature":"animate()","description":"animate method"}],"types":[]}["js","scroll","animation","timeline","motion"]2025-08-29 11:54:072025-08-29 11:54:07 d Gd�PEk-�7��w�g �333https://motion.dev/docs/react-layout-animationsLayout animationreactlayoutAnimate layout changes in React with Motion. Auto layout transitions, FLIP, shared-element animations via layoutId, and performance tips (with code).Animate an element's size and position with the `layout` prop, and animate between any two elements with `layoutId`. ``` <motion.div layout /> ``` Animating layout is traditionally slow, but Motion performs all layout animations using the CSS `transform` property for the highest possible performance. Layout animation can animate previously unanimatable CSS values, like switching `justify-content` between `flex-start` and `flex-end`. ``` <motion.div layout style\={{ justifyContent: isOn ? "flex-start" : "flex-end" }} /> ``` Or by using the `layoutId` prop, it's possible to match two elements and animate between them for some truly advanced animations. ``` <motion.li layoutId\="item" /> ``` It can handle anything from microinteractions to full page transitions. Usage ----- Any layout change that happens as a result of a React re-render can be animated. ``` <motion.div layout style\={{ width: isOpen ? "80vw" : 0 }} /> ``` Note that CSS changes should happen immediately via `style`, not `animate`, as `layout` will take care of the animation. Layout changes can be anything, changing `width`/`height`, number of grid columns, reordering a list, or adding/removing new items: ### Shared layout animations When a new component is added that has a `layoutId` prop that matches an existing component, it will automatically animate out from the old component. ``` isSelected && <motion.div layoutId\="underline" /> ``` If the old component is still mounted when the new component enters, they will automatically crossfade from the old to the new. When removing an element to animate back to its origin layout, `[AnimatePresence](./react-animate-presence)` can be used to keep it in the DOM until its exit animation has finished. ``` <AnimatePresence\> {isOpen && <motion.div layoutId\="modal" />} </AnimatePresence\> ``` ### Setting a transition Layout animations can be customised using [the](./react-transitions) `[transition](./react-transitions)` [prop](./react-transitions). ``` <motion.div layout transition\={{ duration: 0.3 }} /> ``` If you want to set a transition specifically for **only** the layout animation, you can specify a specific `layout` transition. ``` <motion.div layout animate\={{ opacity: 0.5 }} transition\={{ default: { ease: "linear" }, layout: { duration: 0.3 } }} /> ``` When performing a shared layout animation, the transition defined for element we're animating **to** will be used. ``` <\> <motion.button layoutId\="modal" onClick\={() \=��*DY/�I�}� � �-33https://motion.dev/docs/react-gesturesGesture animationreactgesturesPower your UI with Motion for React's gestures: hover, tap, pan, drag & inView. Use while- props for animations & event listeners for interactive experiences.Motion extends React's basic set of event listeners with a simple yet powerful set of UI gestures. The `motion` component currently has support for **hover**, **tap**, **pan**, **drag** and **inView**. Each gesture has both a set of event listeners and a `while-` animation prop. Animation props --------------- `motion` components provide multiple gesture animation props: `whileHover`, `whileTap`, `whileFocus`, `whileDrag` and `[whileInView](../)`. These can define animation targets to temporarily animate to while a gesture is active. ``` <motion.button whileHover\={{ scale: 1.2, transition: { duration: 1 }, }} whileTap\={{ scale: 0.9 }} /> ``` All props can be set either as a target of values to animate to, or the name of any variants defined via the `variants` prop. Variants will flow down through children as normal. ``` <motion.button whileTap\="tap" whileHover\="hover" variants\={buttonVariants} \> <svg\> = ��QCW'!�+���q�] �Y33https://motion.dev/docs/vue-animationVue animationvueanimationsAnimate UIs in Motion for Vue with motion components. Animate CSS, transforms, & SVGs. Use variants for orchestration, gestures, and keyframes.Motion for Vue offers a number of ways to animate your UI. Scaling from extremely simple prop-based animations, to more complex orchestration. Basic animations ---------------- You'll perform almost all animations on [a](./vue-motion-component) `[<motion />](./vue-motion-component)` [component](./vue-motion-component). This is basically a DOM element with motion superpowers. ``` import { motion } from "motion-v" ``` For basic animations, you can update values on [the](./vue-motion-component#animate) `[animate](./vue-motion-component#animate)` [prop](./vue-motion-component#animate): ``` <motion.div :animate\="{ opacity: 1 }" /> ``` When any value in its animate prop changes, the component will automatically animate to the new target. Animatable values ----------------- Motion can animate any CSS value, even those that can't be animated by browsers, like `mask-image`. It supports: * Numbers: `0`, `100` etc. * Strings containing numbers: `"0vh"`, `"10px"` etc. * Colors: Hex, RGBA, HSLA. * Complex strings containing multiple numbers and/or colors (like `box-shadow`). * `display: "none"/"block"` and `visibility: "hidden"/"visible"`. ### Value type conversion In general, values can only be animated between two of the same type (i.e `"0px"` to `"100px"`). Colors can be freely animated between hex, RGBA and HSLA types. Additionally, `x`, `y`, `width`, `height`, `top`, `left`, `right` and `bottom` can animate between different value types. ``` <motion.div :initial\='{ x: "100%" }' :animate\='{ x: "calc(100vw - 50%)" }' /> ``` It's also possible to animate `width` and `height` in to/out of `"auto"`. ``` <motion.div :initial\='{ height: "0px" }' :animate\='{ height: "auto" }' /> ``` **Note:** If additionally animating `display` in to/out of `"none"`, replace this with `visibility` `"hidden"` as elements with `display: none` can't be measured. ### Transforms Unlike CSS, Motion can animate every transform axis independently: * Translate: `x`, `y`, `z` * Scale: `scale`, `scaleX`, `scaleY` * Rotate: `rotate`, `rotateX`, `rotateY`, `rotateZ` * Skew: `skew`, `skewX`, `skewY` * Perspective: `transformPerspective` `motion` components have enhanced `style` props, allowing you to set individual transforms: ``` <motion.section :style\="{ x: -20 }" /> ``` Animating transforms independently provides great flexibility, especially around gestures. ``` <motion.button :whileHover\="{ scale: 1.1 }" whilePress\="{ scale: 0.9 }" /> ``` Independent transforms perform great, but Motion's hybrid engine also uniquely offers hardware acceleration by setting `transform` directly. ``` <motion.li :initial\='{ transform: "translateX(-100px)" }' :animate\='{ transform: "translateX(0px)" }' :transition\='{ type: "spring" }' /> ``` **SVG note:** For SVG components, `x` and `y` **attributes** can be set using `attrX` and `attrY`. ### Transform origin `transform-origin` has three shortcut values that can be set and animated individually: * `originX` * `originY` * `originZ` If set as numbers, `originX` and `Y` default to a progress value between `0` and `1`. `originZ` defaults to pixels. ``` <motion.div :style\='{ originX: 0.5 }' /> ``` ### CSS variables Motion for Vue can( ''�QȀ��� �&Q0rather4� �a�aios<�Ue5�d ��  �|�r �=�ty�Z�)� 5�d ��  �|�rach9�t24��' �*6 �*6 �*&��#�X�X ��)�]�]@i (R 3W6z`  �ZZV2>u1�'/~vE  �H��Z xz%� < > c"w7@i (R 3W6z`  �ZZV2>u1�'/~vE d4�S�a�a�t��|�ting<�sl<�Kly<�tsons< ��  calculations<�'eive3� �_�_�3�`s;�Cipes8 �v  �  �v ognised;� s7�$�^�$mmend5�_�7�_�7 ed<�t9��_f8�)��  �/�)er3�>�_�_ence3 �ered8�~�A�~gistered9�G property9�Tlated;�yive9�l�a�2 �!eased; �V"s;�Wing;�Imoved5�e �U ��p�e �Uing<�*=�nder4"���2��2� �4� �u�Gz��A �4�ed4��a�a�t��B�t�rs2 N� N� N�ing4'��a�a�_�5s< �X=ordering<�%peat6 � 5�T�X�M  $(��U � 5�Tdelay9� �bing9�ss6�C�I�Ctype9� �3+tition9�lace6�d�x�y�U�d�xyed9�* resenting9 ��)�Lsets4� �a�aize2+�+�+��x �n olved8�P�C�Pr7� � s7� � s8���� ponsiveness3�@�_�_tart9�]ed9�*delta9 �F !�5speed9 �0 ult9� �)uing<�^me6�= �Q�=d9�;turn5��C�c; �&�t �6�  �e*1�:�e2��C�c;ed2�;��s3�)�8)�8)(�R 90�k 90�k 90�V� �!using8��g�verse9 �Od3��_�_easing3("� �: �: s3� �_�_�hting9�gb5 �s  �  �s  � a2���� 2�n � � 2�0 � 2�n ight8�E�F �x ��Eoot=�Jtate5�)� �:�=��5  �#��v0"��5 �b�)� �:�=��5 x8��%�YQ��y6�D��&��D�z8�7r��ion2�J�� �| � �| wvalue:�6ule;�.s;�+nning9�ws2�*H�H�H" �F��K��K�"l}#T%� 1GX{�C ��"`$F �YvpH�XPy�Nef�$�ZvpH�R �h+N (M�S(D� �A N�xszc"l}#T%� 1GX{�C ��"`$F �YvpH�XPam8�q��qe2�l���T�,�i� �;�D-�-�Z�: ��Q�T�,ndbox<�~cale2 �2 �K �P�L1�J�a$�'�-�xd�- ���-�8dO h%�g�3�S�])Q�C�L1�J�a$�'�-�xd�- x5��1��!��KW��1�y8��"��ing8ope8 � ��w � reen7�S �o�Y�Sshot<�xipt6n  �'�(!n  �'oll2����*  -�1*�h�[  -� (�J@ n,J =� �*  -�1*�h�[  -able< � �2 direction=�uing9��ref= �7x=�,y=�.0 progress5 �  �* �I S2 �  �* econd9�<a��Js3�L�_�_�  ��k�`� .� �}� s9 �p>tion8�0�{Q�1 �B�0e6���gment9�K3�lector6 �s�1 �s s9wikoff8�r��rparately3�W�_�_quence8�.�# D) *� C*-/@�[� s6�4�%E�T �^�v�4�ries2�v�q�q��Q�t4@�aY P,1 �MY P,1 �MY P,1 ��,G ��V�0�x�3 GP  c�/L_&�C�-G �:��V�W 9��&��6 M0t��,G ��V�isopen<�\ F �6%   %  .:, 5 * *   J5  1& |'# �gJ �-<$ 6�E 11 ( 3.%� ++�MȀ��� �J0setopen< �bs4�l�a�a �,'crolldirection= �vtatus8�; �;ting5��" �4]�V�X�,i�2��W��,i�p �_w*� �f��" �4]�V�X�,i�2s9 �Oup7�(���~A�(�hadow8���s�s<�ared< �-��ortcut8 �|� �}�Z �|�uld6��x�;�� ��xw5�j��j�ide<�&gnal4��a�amilar<�Pple5�U�T? �7 �z ��U�T? �7y7E E ultaneously8�b�E�bnce=�[gle6�r �G�s��?? � �!�r �G�sze<s9kew8 � �( � �x8��*� �y8� �+�!� low<s6�> �>maller9�D�?rt6� �ooth5 �` ed=�!ing=�nap<�5py8�)�j�)shot<�9 s<�Vo6 ��� �Y�B �b�~ ��� �Y�Bme;�M [�p%thing4�9�a�a �0�-imes8�9���:�V�H�g�9��urce2�a����g�f��g�fpaced3��_�_�M��Mec3� �_�_ial9�j�1fic5z�k �? �3�Dz�k ally7�*�)�*y<�1ed3 � �_�_ ��8'�[  �{ �s6�; �;lit25��K�� 5� 5�text24��K�� 4� 4�read9�Ning28p8p 8p  �W  �e�[F�#�j  D�2 @  " �f��i�) �W  �e�[s<�value2 K� K� K� quarespace2^�^�^�rc6�L �Ltagger2:��L :� :� �f  � �!   �y �f  � children: �b direction:�jing5�|�|rt2 x " x �N �X �X  x  p�} �Q�5�a4�+�g 7N! '5 �7�D ; �# p�} �Q�5�aed2 � � ��7�<�u�7�<ing4�r�a�a�7 �S@ �;��7s8��`� �te46� ]8�< l]8�< l]8�< �c�t�'�#�) �| �j�  �> �g �c�t�'�#�)ic9�Uus8 �: �:  ddeviation; �Kep3"� �# �# s3X�)Y ! �Y ! �Y ! icky<�V� ffness6�d�0�,c�1�dll3�T�_�_ �Sop4�"�`�` �&>��# �G �` �&>ped9�& ropagation; �s9�re= �' raight3�v�_�_�}� �O �M� �}� �O �M� forward7�2 �2ngely<�dength9�ntched< � s<� ing4��a�a �R@s2#� ���I � G � �I � udio3�~�^�^yle2 V� V�"V��G�)�:�)�:�)��0�' o;�%�( o;$BA� (.v`�IG �>�e2��0�' o;effect2 U� U�U��G�F�Fs9 %6�m�Eubscribe4"�f�D��D��D d4�+�a�a rs4�`�a�adden9�a ggestions6��Y��Y percharged5�"�$�"�$powers8565port7@W�=@Wed9 �&R�s5 �#)be�D9m }�; ~�} �#)be�D9m }�;vg2 Y� Y� Y�  +� �f�{�$ " n� �g�9�C�� + �~  +� �f�{�effect2 X� X� X�s8 ��  witches9�Wing<6 ynchronise<�%tax6�- �-stem4 ��  �n�m�� s<�t4�8�a�a �P� t� �i�L u��~� "�}�. �1�8~ � �P� t�ag6 o o ilored7�+ �+ke5V'�e'��X ��cV'�es<�6ing<�Slk<�p5 ��8$ cH% �; ��8cancel;�ypable;�s7�T �Trget8g�4+I � �=h�v+IaPg�4+Ip %  /  K  2 !   A*4#/ 4 ! �4 'r+�S*o 1&6  @  6�&  #$:� + g; 1  &&�RȀ��� �(�0targets8�5\�OXR�6\�HB�5\�OXRechnical< �rll=�implate7�(�� ? �(�orarily;Dxt26��K�� 6� 6��Nhan2��G�_�_�-� �a�a�i�@�E�m �%�"�n �Q �@�!�@�E�mt2�[���)�8)�8)��oJ,�oJ,�oJ�)�!J?�@i �HZJr��U�N��@�D�~�;�8s���|� $q1�B�V|Q9S?�~ 1�w �)�!J?�@i �HZJr��U�Ne2:r�@(.(T(.(T(.(hr�.O  o�.O  o�.O  o�. r�!D ! ! & .!D ! ! & .!D ! ! & .(' \  jM1#]4 /5 . :."/')I-5".? E48 ' tW(5FCH�EC*# > b �.E\/S+�D(?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  FDH�Eb*# @ b NEj1c6XV :  2  : " >�  %M1 !>. =g4( "   #)4&,'! &*VX-(' \  jM1#]4 /5 . :."/')I-5".? E48 ' tW(5FCH�EC*# > b �.E\/S+ir4�d�a�aD�x�Dm3�@�E�E�J�a�aY�9(y'in6} �{�X}re5�V�*�. �<  �� �`�V�*�.fore8�u�v�'�use3��_�_�q�g �y�<�`qv� �<�j >�b!�.,`G�<�q�g �y�<y4�(�;(�;(�c�{R'�}�<R'��Z�K�D�+�c�{R'�}ing<�Rs<�Sk4�>�a�as3�X�_�_�b�a�aL�8�\"-I��U �p&-�N��*d)�,Dp� "�& � "Lb4W�S(.�N��jf)�LD��.�Z?:M&.�^)(�/on4�]E �(�wL�8�\"-I��U �p&-�N��*d)�,Dp� ose8 q� r�P�Z q�ree6��{�i� � �|�6��{js9�ottles4��a�augh3�z�_�_ �� �W�$v�% ��out3��_�_�O��?���_�O��?idy8�1 �1me2�W��S�A�F�>�k�&�9A 8�A,� �z� ��?b�line9� physics9�Qs6�F�[#� �h�#�F�[#ny3�a�_�_9 9ps<o22 l t �P4�P4�PWP l t 7.K�0\7.K�0\7.K�0�x l t A !/ 5<2 := !/ 5<2 := !/ 5<2 :52)� "64 !-$ �Y1s0�+,"P25�3)M .: QO-9g %8 r�<i:", �;zj��!G!I L.G7:7S<� @A'-$ 2 ZP�>< RO-9g %8 �2�>i:"�� _4C @� Q $-",s"3LRz  104  kM. �@^.R6 " 20tY j62)� "64 !-$ �Y1s0�+,"P25�3)M .: QO-9g %8 r�<i:", �;zol6�%��%s2 �� ��5 ��:�u��@�u��@p8�C�D�v�Ctal9��Nuch7�R�7�= �Rr5Y*Y*rack4��a�a �ning4 ditionally<nsform2T<w=VDVDVD<w<w �Vf-� Lb ���Lb&�8|�\�T�=  �Vf-� Lb ation2�A�� er2@�R F � F � F perspective8�"�-�#�" s5�1�B�Q �* 4] �* �e+��1�B�Q �*  value2 H� H� H�ition3 �C  �X  (�cp� �b$!�l  �_l�a� (�dp�I �d$!� $   R &�    � �C  �X  (�cp� �b$!�l  s3�4�_�_ �B �W � 2���$ �4(�a 2��32 l�*�  *aJP6 �B �W � 2��late8���� x8 �]� �^ �]vel;�ees8��t�ick=�dgger5�Y�N�j �; �N�Y�N�jed5�T�K �P�S �T�K �Ping=� s8�s�t�%�s oubleshooting<�Bue4��a�a� �]}� ly<\sted55 5y<�s7D D1 %%d�2�*$(>`G �K 2 22a< �N �&%Z�!�   8; &  ""�VȀ����0q0tug;�Kweak6�( �(en9�+[.o2�H��`�)�*E�%�*�@ �# `�)ype6 �/�5��9�L(��W!o�yQ"#� �9� �h �/�5��9�Ls2�y�a�a�L�` �=�# �>!�L�` �=ically;�=ui5  �S  �F   �Ss:l5�'�;�J!�8(�Q�0D)�v�{ �K!�(�c�'�;�J!�8(�Q nanimatable<2derline5�J�s�M�J�sneath<�Mstand4�psirably<�!ique5# �lH#ly8�Q�R�Qt4�x�a�as9�:like8��� necessary<�|plugin7 ^  ^  subscribe4�O�]�]til9�:�|p2�{����&�_�a�a�<�/��<date8@A@d4�>�a�a�Rs2�+�D�Igrade2������rls6�h �hs3��A�A�^�y�O �'��G�^�yage2�#���l�_�_��a�a� Mm� e2*�1�a�a�.�YD�vD�vD�C�a�a��p�=�d �0N�(�N��6�#�1N�j�~�-�& �KC1��p�=�d �0N�(�Nanimate8 �l* �_* �l*d3� �\�\� ��v�|$w�]�i�9�uc��veffect8 �E �Eful8 �D�@ �` �D�@inview=�~ motionvalue8 �L  �D �L event=�yr3�<�_�_ �lef; �!�8s2�.��s<�croll5 � �# � 6!;X � �# pring= �& tate8�<�c�w�< transform2�3�� �Eing4��a�a �Aq�  �F�  �r�0 &�D �s�>�h#*�H�K �.� �Aq�  �F�  �r�0ually3�+�_�_�$�a�a�X�{��Xtilities2ze9s2 -� -� -�v78� ;��}��"8� 06 �t �talue20 D{>6$�,6$�,6$ D{�6�_�_�D{�[ L  %;�% L  %;�% L  %; ��\ �u�#.Y10�IE.`��4�|%-�eG`�e+ �}#3�K.Z10�IEC-�j�G *�X�$f>��\ �u�#.Y10�IE.`��s2A�O.^z.^z.^ A�NA�F >+6\`` >+6\`` >+6\` �,5  �s�U �5 =A*<�\�F8BQh$���]0�G�HB*<�\�8BSh c� 4�v �|� �,5  �s�U �5 =A*<�\�F8BQhnilla5}�2}�2r8�Z9�5 �[9�Z9�5 iable6�F �D/ �E/�F �D/ s8�# VAt �$ V�# Vnt8 �*n  � | R �*n s5�x�P> �=   +/:.%8�   :<'l�7�x�P> �=   +/:.%ous2e6��.��.locity2�S��B� �? c.c�? c.c�? c.�R�$ �Y�yrcel< �sion6 ?�/  e ?�/ s9 dy3�^�_�_�K�#��-�K�#ia4�i-�9-�9-b U/�'v3� *�(�T5�\�)�'u�V�Kp �5�^�)�Un�y�o� �/�M,�Nb U/�'v3� *�(�T5�\�)�'ew2 ��� �(�5  </J'+% X�,port5�n�T��"�*'1*�|�n�T��"sibility8 �b �b �ble8��J. � 7.�� . / F- �0���J. � 7.ual5� �U:�duration9 �Lly9 �(�hte7~ ~s2�"�;�@ �� �a �*V �� �acode5 �) �, �m �) �, �mue2���P#%  G=C>MB%b!�ZZ�2>w1�wH##P#%  G=C>MB%wait9�s6�5 �5nt8�M��+�$�Ms9�tch:��!y4��a�a �9��j �|�E �2� �9�s6a  a e5N�� �  �h4� �. �{�c�. �5� �P>(E0N�� �  �h4� �. �{b2 m~*m~�dB�B�B m~�{ �Q�L  BRK+S' ! 8%?9�>M"  1w3 *��O&(.!� N  .�:SCD0�& " 3`�ked animation is where a value is bound directly to scroll progress. When the scroll changes, the value changes by the relative amount. This is in contrast to a scroll-triggered animation, which is when an animation starts/stops when an element enters/leaves the viewport. In Motion, these can be built with `[inView](./inview)`. `scroll` is the only API that takes advantage of Motion's hybrid engine, using the `[ScrollTimeline](https://developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline)` [API](https://developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline) where possible for optimal performance. This removes scroll measurements and enables hardware-accelerated animations. Usage ----- Import `scroll` from Motion: ``` import { scroll } from "motion" ``` ### Callbacks `scroll()` can accept a callback function. This callback will be called when scroll changes with the latest `progress` value, between `0` and `1`. ``` scroll(progress \=> console.log(progress)) ``` ### Animation `scroll()` can also accept animations created with the `[animate()](./animate)` [function](./animate). ``` const animation = animate( "div", { transform: \["none", "rotate(90deg)"\] }, { ease: "linear" } ) scroll(animation) ``` Browsers that support the `ScrollTimeline` API will use this to run supported animations with hardware acceleration. ### Scroll axis By default, vertical scroll is tracked. By providing an `axis: "x"` option, it can instead track horizontal scrolling. ``` scroll(callback, { axis: "x" }) ``` ### Track element scroll `scroll()` tracks `window` scroll by default. It can also track the scroll of an `Element`, by passing it in via the `container` option. ``` scroll(callback, { container: document.getElementById("scroller") }) ``` ### Track element position We can track the progress of an element as it moves within a container by passing its `ref` to the `target` option. ``` scroll(animation, { target: document.getElementById("item") }) ``` ### Scroll offsets With the `offset` option we can define which parts of the `target` we want to track within the `container`, for instance track elements as they enter in from the bottom, leave at the top, or travel throughout the whole viewport. ### Pinning To use the browser for best performance, pinning should be performed with `position: sticky`. This works well, for instance, to create section-based full-screen effects, by using a larger container element to define the scroll distance and passing this to the `target` option: ### Scroll information By passing a callback with a second `info` argument, it's possible to get detailed information about scrolling. ``` scroll((progress, info) \=> { console.log(info.x.current) }) ``` The `info` object contains: * `time`: The time the scroll position was recorded. * `x`: Info on the `x` scroll axis. * `y`: Info on the `y` scroll axis. Each individual axis is an object containing the following data: * `current`: The current scroll position. * `offset`: The scroll offsets resolved as pixels. * `progress`: A progress value, between `0`\-`1` of the scroll within the resolved offsets. * `scrollLength`: The total scrollable length on this axis. If `target` is the default scrollable area, this is the container scroll length minus the container length. * `velocity`: The velocity of the scroll on this axis. ### Cancel animation `scroll()` returns a cleanup function. Call this to cancel the scroll animation. ``` const cancel = scroll(callback) cancel() ``` Options ------- ### `container` **Default:** `window` The container scroller element or window that we're tracking the scroll progress of. ``` scroll( (progress) \=> console.log(progress), { container: document.getElementById("carousel") } ) ``` ### `axis` **Default:** `"y"` The axis of scroll to track. Defaults to `"y"`. ``` scroll( (progress) \=> console.log(progress), { axis: "x" } ) ``` ### `target` By default, this is the **scrollable area** of the `container`. It can add %%��V��S������*#�8$�g5sF8$�g5sF8$�g5%:�09& (U+�,9& (U+�,9& (U+T�d�^�&1 L�>h�^�&1 L�>h�^�&1 L�>��E7"\$�xF�;T�>a�57"\$�xF�;T�>a�57"\$�xF�;T�>a"�G�*��*��*B�:�C�5_�C�5_�C�5Mf�&q~ZU�(�+�N G&q~ZU�(�+�N G&q~ZU�(�+�N �z�d�d(�@[�I@[�I@[6�U�; Z-U�; Z-U�; Z"�t"X�V"X�V"Xf�U&q~ZU�(�+�V G&q~ZU�(�+�V G&q~ZU�(�+�V �F0�\0�\00cancel"�v������|�T�T"�u �x �x �7�a�a�� � "��- ��- ��- "�v������|�T�T"�u �x �x �7�a�a�� � "��- ��- ��- hover������ling�� � �S�X�X�� � �S�X�Xpress�g�T�T�g�T�Ts��3�3��3�3not�,�3�3�,�3�3 pabilities����I�p�p����I�p�ple�8�p�p�l�3�3� ���C�c�c�8�p�p�l�3�3� ���C�c�cture�T�T�T��a�a�T�T�T��a�are��x�x�+�^�^��x�x�+�^�^ousel �"� � F��54�2�54�2�54�"� � F��54�2�54�2�54ses�`�p�p�:p�Yp�Yp�k�_�_�D�a�a�`�p�p�:p�Yp�Ypdn�:�c�c�:�c�center �W� � �+<�b<�b<�\����{�{����W� � �+<�b<�b<�\����{�{��� hallenges�n�x�x� �^�^�n�x�x� �^�^nge����C�{�{�e�p�p4�L� �m�;�� �m�;�� �m�;�Z�,�N�,�N�,�e�����B��B��P�����)�)����T.�^.�^.� �H��H��H*�Rc�]c�]c�����C�{�{�e�p�p4�L� �m�;�� �m�;�� �m�;�Z�,�N�,�N�,�e�����B��B��P�����)�)����T.�^.�^.d�;�3�3�Np�fp�fp�G�x�x���� {�h{�h{�y�^�^�I�c�c �[�_�_�;�3�3�Np�fp�fp�G�x�x���� {�h{�h{�y�^�^�I�c�cs�����n�p�p�H�y�y��z�z@�s� �T�l� �T�l� �T�Z���!q�q�q:�� �>�`� �>�`� �>�K��� 0�4+ >g4+ >g4+ >�h>�%>�%>�����n�p�p�H�y�y��z�z@�s� �T�l� �T�l� �T�Z���!q�q�q:�� �>�`� �>�`� �>�K��� 0�4+ >g4+ >g4+ >ing"��5T�s�5T�s�5T���"�4�'T�g�'T�g�'T�3�c�c"��5T�s�5T�s�5T���"�4�'T�g�'T�g�'T�3�c�cnel��x�x�.�^�^��x�x�.�^�^eap�f�\�\��B�B�f�\�\��B�Bcking �## �##markpath�N�y�y�N�y�yout �;���u�c�c�;���u�c�cild�'�y�y�t�h�n�h�n�h�[�x�x�/�s�p�s�p�s��^�^�Y�(Y�(Y�J� � �a�X�X�?]�,]�,]�'�y�y�t�h�n�h�n�h�[�x�x�/�s�p�s�p�s��^�^�Y�(Y�(Y�J� � �a�X�X�?]�,]�,]ren(�2�`:-�8�`:-�8�`:-(�k�B:;�I�B:;�I�B:;�a�i�m�i�m�i"�(� �4(� �4(� ��t�o�t�o�t"�B(�"�(�"�(�"(�Ak�wk�wk(�ys�ws�ws(�2�`:-�8�`:-�8�`:-(�k�B:;�I�B:;�I�B:;�a�i�m�i�m�i"�(� �4(� �4(� ��t�o�t�o�t"�B(�"�(�"�(�"(�Ak�wk�wk(�ys�ws�wsoose    ircin�j�3�3 �y���1���$�_�_�j�3�3 �y���1��out�S�{�{�l�3�3 �{���3���&�`��`��`�S�{�{�l�3�3 �{���3��le�f�y�y�u���z�i��i��i .�'�L�+�L�+�L�f�y�y�u���z�i��i��i .�'�L�+�L�+�Lout�k�3�3 �z���2���%�_�_�k�3�3 �z���2��lamp�6�q�qss� �{�{� �{�{ically�#�x�x�A�^�^�#�x�x�A�^�^ean�B� � �[�X�X�^�a�a�B� � �[�X�Xer$�m$�mup �z� � &�]� � �z� � &�]� � r�g�{�{�^� � �g�{�{�^� � ick�9!�$!�$!�t!�1!�1!�u��I��I��4�y�a�y�a�y �9!�$!�$!�t!�1!�1!�u��I��I��4�y�a�y�a�ys�*�X�X�*�X�Xentx�X� � �m�X�X�X� � �m�X�X�2�6!.!4T.,eGw3�V�%�xy-9-�]�APe�K072+� ""�V������0�0clienty�Z� � �o�X�X�Z� � �o�X�Xoses�P�x�x��^�^�P�x�x��^�^ode.�1�QsP�QsP�Qs�c0�(n�I�&n�I�&n�I$�s��Z��Z�'�1�:�0�h/ �Qm-�:0�=�s�c�Z�i�m�<�J�[�{�{C�k� � E��8�X�XC�V�<�b��C�<�A.�1�QsP�QsP�Qs�c0�(n�I�&n�I�&n�I$�s��Z��Z�'�1�:�0�h/ �Qj-�70�=�s�c�Z�i�m�<�J�[�{�{C�k� � E��8�X�XC�V�<lor(�/� �a� �a� (�w������(�z�z.�v�?��?��?(�/� �a� �a� (�w������(�z�zs�N�{�{�r "�N "�N "�J�r�C�r�C�r�+ "�O "�O "�F���L�c�c  � ���N�{�{�r "�N "�N "�J�r�C�r�C�r�+ "�O "�O "�F���L�c�cumns��x�x�:�^�^��x�x�:�^�^m6�&�b ��b ��b �?*�* �6* �6* �a*� | �Y| �Y| ��c�y�y�m �E �; �N$� �d��d��d����� �H �~ �n$�(�d�|�d�|�d�% �t����C �G �U � �K �# �0 �a �G �. �G �L6�&�b ��b ��b �?*�* �6* �6* �a*� | �Y| �Y| ��c�y�y�m �E �; �N$� �d��d��d����� �H �~ �n$�(�d�|�d�|�d�% �t����C �G �U � �K �# �0 �a �Gbines�����{�{�����{�{ing�p�y�y� �z�z�3�x�x�Q�^�^�p�y�y� �z�z�3�x�x�Q�^�^e� � s�t����{�{��p�p��3�3�t����{�{��p�p��3�3mitted�$�3�3�$�3�3panies�!���!��risonh�h�h�h�h�h�h�h�h�h�h�h�h�h�h�h�h�h�h�h�h�h�h�tible�Z�p�p��3�3�x�z�z�Z�p�p��3�3�x�z�zlete�u����p�p�)�L�L"� Z�H Z�H Z!�u����p�p�)�L�L"� Z�H Z�H Z! d�(�X�X�(�X�X ly�,���,�� s�x�3�3�x�3�3x�<�{�{"�w�w�w�w�w�w$�#�3�3"�9x�i�x�i�x�i"� ���<�{�{"�w�w�w�w�w�w$�#�3�3"�9x�i�x�i�x�iity�p�x�x��^�^�d�p�x�x��^�^�diant� �_�_onentV1�4� &��4 &��4 &�d-��~|'�W�A|'�W�A|'�Wv1�4�'�h�^5)�h�^5)�h�^5 x-�� �O#?�@*�O#?�@*�O#?�@h1�4��E Z[S |�G�E Z[S |�G�E Z[S |b1�4�6 �]O/�O �]O/�O �]O/\1�4�C C"�\ C"�\ C"h-�|�E Z[W ��F�E Z[W ��F�E Z[W �^-��  �]O/�- �]O/�- �]O/R-��& h�+ h�+ hR1�4�+ "�z�] "�z�] "�z�:81�4�#G�:G�:G�b"-��G�BG�BG�,-�.�[�[�1�]�]V1�4� &��4 &��4 &�d-��~|'�W�A|'�W�A|'�Wv1�4�'�h�^5)�h�^5)�h�^5 x-�� �O#?�@*�O#?�@*�O#?�@h1�4��E Z[S |�G�E Z[S |�G�E Z[S |b1�4�6 �]O/�O �]O/�O �]O/\1�4�C C"�\ C"�\ C"h-�|�E Z[W ��F�E Z[W ��F�E Z[W �^-��  �]O/�- �]O/�- �]O/R-��& h�+ h�+ hR1�4�+ "�z�] "�z�] "�z�:81�4�#G�:G�:G�b"-��G�BG�BG�,- s$/�7�X���SL)��> �y�C �y�C �yT/�7�,H�*�`�*�j�H�*�`�*�j�H�*�`�*�j�6L )��H�*�"J�z�,H�*�"J�z�,H�*�"J�z$/�7�:�77j�77j�770/�7�2�\�n2�\�n2�\�@ /�7$)���E7i�E7i�E7()��_1�H�i1�H�i1�H1.�\� �,.�E/US�VC�� 9�t !!�W������2� )�*/�7� �|�|�R$/�7��n�n�m�l�{�{�|� � �I�X�X)��}�v�v�s���2�a�a$/�7�X���SL)��> �y�C �y�C �yT/�7�,H�*�`�*�j�H�*�`�*�j�H�*�`�*�j�6L )��H�*�"J�z�,H�*�"J�z�,H�*�"J�z$/�7�:�77j�77j�770/�7�2�\�n2�\�n2�\�@ /�7$)���E7i�E7i�E7()��_1�H�i1�H�i1�H )�*/�7� �|�|�R$/�7��n�n�m�l�{�{�|� � �I�X�X)��}�v�v 0composable �r ��a�a �r rehensive**nference��x�x�$�^�^��x�x�$�^�^igD�7�7���K�{�{"<���G�+�G�+�G D�7 <� D�7 D�7 D�7 <� <� <� D�7$D�7��z�z�B<����D�7�7���K�{�{"<���G�+�G�+�G D�7 <� D�7 D�7 D�7 <� <� <� D�7$D�7��z�z�B<����uration �9���s�c�c�9���s�c�c e �F �F d�(���u�p�p�K�3�3�9�G�G�0���h���(���u�p�p�K�3�3�9�G�G�0���h��sidered ����<�c�c� e�Fe�Fe����<�c�c� e�Fe�Feole����[�p�p4�7 �&hJ �O �&hJ �O �&hJ .��s��x�s��x�s� :�4 _,�H _,�H _,�<�o<�o<@�M _#!-�l _#!-�l _#!-"�Q�H�H�Tc�%]c�%]c�%����[�p�p4�7 �&hJ �O �&hJ �O �&hJ .��s��x�s��x�s� :�4 _,�H _,�H _,�<�o<�o<@�M _#!-�l _#!-�l _#!-"�Q�H�Ht�}���]�<�A�<�A�<�K�p�pF�MXx G+n@�Xx G+n@�Xx G+n@�>�~�_D)Y � C*-/@\)9:M$��_D)Y � C*-/@\)9:M$��_D)Y � C*-/@\)9:M$:�Hn V*pH�Pn V*pH�Pn V*pH"���E��E��J�x�x@� �! /2�k�! /2�k�! /2�/�V�6�V�6�V.�_!M �G!M �G!M �a�a�a�|�^�^.�X�&6�l�&6�l�&6�V��6�y�_ .)&�_ .)&�_ .)&�m�,�a�,�a�,(�tQ%�-tQ%�-tQ%�f�X�X6�1�a 2+&�a 2+&�a 2+&�j� � 0�@J L@J L@J F�] R# 5%�] R# 5%�] R# 5%B�L+-8I�[+-8I�[+-8I��}���]�<�A�<�A�<�K�p�pF�MXx G+n@�Xx G+n@�Xx G+n@�>�~�_D)Y � C*-/@\)9:M$��_D)Y � C*-/@\)9:M$��_D)Y � C*-/@\)9:M$:�Hn V*pH�Pn V*pH�Pn V*pH"���E��E��J�x�x@� �! /2�k�! /2�k�! /2�/�V�6�V�6�V.�_!M �G!M �G!M �a�a�a�|�^�^.�X�&6�l�&6�l�&6�V��6�y�_ .)&�_ .)&�_ .)&�m�,�a�,�a�,(�tQ%�-tQ%�-tQ%�f�X�X6�1�a 2+&�a 2+&�a 2+&�j� � ant�N������N�����raint ��G�G�$�]$�]$�H$�e$�e$��G�G�$�]$�]$�H$�e$�e$ s"�SH"�TH"�TH""�M""�VM""�VM"""�SH"�TH"�TH""�M""�VM""�VM"" ref� �H �H �b �U �U � �H �H �b �U �U tainer ���v%�{%7|!#& "%5� %7|!#& "%5� %7|!#& "%5�5�c�c� �h�h�I�o�o ���v%�{%7|!#& "%5� %7|!#& "%5� %7|!#& "%5�5�c�c� �h�h�I�o�o s��x�x�F�^�^��x�x�F�^�^ing�L�{�{�m �n �n �& �o �o �5� � �]� � �L�{�{�m �n �n �& �o �o �5� � �]� � s�J�p�p�� � �L�)�) �J�p�p�� � �L�)�)ent��y�y�H�z�z�"�i��i��i�N�[��[��[��7�)�) ��y�y�H�z�z�"�i��i��i�N�[��[��[��7�)�)inue� �)�)� �)�) s �C�G�G�C�G�Gity��a�aract��)�)��)�)st �,� � �,� � ol�Q�y�y��3�3�|�z�z �e ��h� �  �`�_�_%�Q�y�y��3�3�|�z�z �e ��h� � ling�n�y�y ��3�3��z�z�n�y�y ��3�3��z�zs � �7�>�{�{ ��<� �7�9 7 �o9 7 �o9 7 ,�i�.�.B���Y9 > �f9 > �f9 > � �7�Y � �7 � �7 �� �� �� � �7 � �7 �� � �7�>�{�{ ��<� �7�9 7 �o9 7 �o9 7 ,�i�.�.B���Y9 > �f9 > �f9 > �G&2�1{K�j�%-OOE�^+u?� �H !!�W������2��`P�6�/ �A�n�z�z&�~� � ( ��K�W�W&H��t �3�u��& �3 �8&P�6�� � �,�8�o�o�N&H��>�d�d�&P�6�f    �1H��N,P�6�     aP�6�@P�6� �4 �jH��H��xH��P�6�`P�6�/ �A�n�z�z&�~� � ( ��K�W�W&H��t �30curve�|���=��$��$� "�@�N��N��N"�x�N�"�N�"�N"�Hi7�0i7�0i7�|���=��$��$� "�@�N��N��N"�x�N�"�N�"�Ns�6�y�y�/�z�z�6�y�y�/�z�zstom�) �q �q �O�R �p �p  �; �<�{�{ �) �q �q �O�R �p �p  �; �<�{�{ised�z�x�x�*�^�^�z�x�x�*�^�^ ing��{�{��{�{ze&&x�g�v�v�b�w�w��x�x�$�^�^.�O� � � � � �g�v�v�b�w�w��x�x�$�^�^.�O� � � � � d4�/�s ��s ��s 4�/�s ��s ��s amping(�O�,x�~�,x�~�,x���.%�q�R �T�R �T�R �!�c�c:�R�gf=��R�gf=��R�gf=�:� �gf=��Z�gf=��Z�gf=� (�O�,x�~�,x�~�,x���.%�q�R �T�R �T�R �!�c�c:�R�gf=��R�gf=��R�gf=�:� �gf=��Z�gf=��Z�gf=�nger��y�y��z�z��y�y��z�zta �8� � �8� � e��x�x�9�^�^��x�x�9�^�^ys �## �## eactivating�-�)�)�-�)�)celerate�w�3�3 �z���2�� �w�3�3 �z���2�� s�p���(���p���(�� ion�U��� ���U��� ��ides�}�3�3 �(���`�� �}�3�3 �(���`��larative�B�y�y�+�m�z�z �B �k�B�y�y�+�m�z�z �B �kfault�z0�B0�B04�y��)��,��)��,��)���B�"p=��O�"%2/��"p=��O�"%2/��"p=��O�"%2/4�2�U�+�5�K�U�+�5�K�U�+�5�4{�[{�[{�(�x�x���:�N�v-!��v-!��v-!:�d^' �w^' �w^' �o��]��]��X�^�^�7�c�c�P�NP�NP�:�I 4y��D$m� $&21"HN� 4y��D$m� $&21"HN� 4y��D$m� $&21"HN� �V�H�H�)�d)�d)4� � A)j�B� A)j�B� A)j�n)�1)�1)�2� 4y��D$m� $&21"LR� 4y��D$m� $&21"LR� 4y��D$m� $&21"LR�N&�;&�;&�z0�B0�B04�y��)��,��)��,��)���B�"p=��O�"%2/��"p=��O�"%2/��"p=��O�"%2/4�2�U�+�5�K�U�+�5�K�U�+�5�4{�[{�[{�(�x�x���:�N�v-!��v-!��v-!:�d^' �w^' �w^' �o��]��]��X�^�^�7�c�c�P�NP�NP�:�I 4y��D$m� $&21"HN� 4y��D$m� $&21"HN� 4y��D$m� $&21"HN� �V�H�H�)�d)�d)4� � A)j�B� A)j�B� A)j�n)�1)�1)�2� 4y��D$m� $&21"LR� 4y��D$m� $&21"LR� 4y��D$m� $&21"LRs�!����{�{�n�p�p��y�y�L�3�3�<�z�z�,� � ����x�)�)�H���!����{�{�n�p�p��y�y�L�3�3�<�z�z�,� � ����x�)�)�H�� transition�p�/�/�p�/�/eats��x�x�1�^�^��x�x�1�^�^ine(�:�8!��8!��8!(�a�i��6�i��6�i�"�3�:�3�:�3�:�*�T�T(�*F�Q�iF�Q�iF�Q�e�a�a����U��� ��(�:�8!��8!��8!(�a�i��6�i��6�i�"�3�:�3�:�3�:�*�T�T(�*F�Q�iF�Q�iF�Q�e�a�a����U��� ��config�)�p�p�)�p�pd�J���"�c��c��c���/��/����i��i��W�T�T�7�x�x�)H�DH�DH�q�G�G��a�a�g�^�^�&�[�&�[�&�["�)H�6H�6H�^�[�.�[�.�[�J���"�c��c��c���/��/����i��i��W�T�T�7�x�x�)H�DH�DH�q�G�G��a�a�g�^�^�&�[�&�[�&�["�)H�6H�6H�^�[�.�[�.�[ nuxtconfig�{�p�p�{�p�ps�K����p�p �n���&���K����p�p �n���&��ing�[�y�y��3�3�V�z�z�[�y�y��3�3�V�z�)�+f.,�;� .+!F+-BZ�J�K&.��[ Sports all the components for you. ``` export default defineNuxtConfig({ modules: \['motion-v/nuxt'\], }) ``` ### `unplugin-vue-components` Motion for Vue also supports [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) to auto-import all components from `motion-v`: ``` import Components from 'unplugin-vue-components/vite' import MotionResolver from 'motion-v/resolver' export default defineConfig({ plugins: \[ vue(), Components({ dts: true, resolvers: \[ MotionResolver() \], }), \], }) ``` > **Note:** Auto-import currently doesn't support [the <motion /> component](./vue-motion-component) so you'll need to import it manually. **Note:** Motion for Vue contains APIs specifically tailored for Vue, but every feature from [vanilla Motion](./quick-start) is also compatible and available for advanced use-cases. ### Development tools With Motion for AI, you can load the Motion for Vue docs straight into your AI code editor to improve the quality of its suggestions. [Learn more](./ai-llm-documentation). [![Add to VS Code](https://framerusercontent.com/images/mOTurneZubngSCtZ2IvwlqoPUs.png?width=348&height=82)](vscode:extension/Motion.motion-vscode-extension)[![Add to Cursor](https://framerusercontent.com/images/G3FXTpYrPji6khdFKeGo8YrbS08.png?width=324&height=82)](https://cursor.com/en/install-mcp?name=motion&config=eyJjb21tYW5kIjoibnB4IC15IG1vdGlvbi1haSJ9) Usage ----- The core of Motion for Vue is [the](./vue-motion-component) `[<motion />](./vue-motion-component)` [component](./vue-motion-component). It's a normal DOM element, supercharged with animation capabilities. ``` <template\> <motion.div /> </template\> ``` Animating a `motion` component is as straightforward as setting values via the `animate` prop: ``` <motion.ul :animate\="{ rotate: 360 }" /> ``` When values in `animate` change, the component will animate. Motion has great-feeling defaults, but animations can of course be configured via [the](./vue-transitions) `[transition](./vue-transitions)` [prop](./vue-transitions). ``` <motion.div :animate\="{ scale: 2, transition: { duration: 2 } }" /> ``` ### Enter animation When a component enters the page, it will automatically animate from the rendered value, but you can provide different values via the `initial` prop. ``` <motion.button :initial\="{ scale: 0 }" :animate\="{ scale: 1 }" /> ``` Or disable this initial animation entirely by setting `initial` to `false`. ``` <motion.button :initial\="false" :animate\="{ scale: 1 }" /> ``` ### Gestures `<motion />` extends Vue's event system with powerful gesture recognises. It currently supports hover, press, focus, and drag gestures. ``` <motion.button :whileHover\="{ scale: 1.1 }" :whilePress\="{ scale: 0.95 }" @hoverStart\="() \=> console.log('hover started!')" /> ``` Motion's gestures are designed to feel better than using CSS alone. For instance, hover events are correctly not triggered by touch screen taps. [Learn more about gestures](./vue-gestures). ### Scroll animations Motion supports both types of scroll animations, **scroll-triggered** and **scroll-linked**. To trigger an animation on scroll, the `whileInView` prop defines a state to animate to/from when an element enters/leaves the viewport: ``` <motion.div :initial\="{ backgroundColor: 'rgb(0, 255, 0)', opacity: 0 }" :whileInView\="{ backgroundColor: 'rgb(255, 0, 0)', opacity: 1 }" /> ``` Whereas to link a value directly to scroll position, it's possible to use `MotionValue`s via `[useScroll](./vue-use-scroll)`. ``` <script setup \> const { scrollYProgress } = useScroll() </script\> <template\> <motion.div :style\="{ scaleX: scrollYProgress }" /> </template\> ``` [Learn more](./vue-scroll-animations) about Motion's scroll animations. ### Layout animations Motion has an industry-leading layout animation engine that supports animating between changes in layout, using only transforms, between the same or different elements, with full scale correction. It's as easy as applying the %%�S̀����*(00�p          00�qf�s px� 1�p    0�t 0�qpx�| vw� px� 1�u6�v7�w8�x0�9�y2�q     0�z 0�r 1�{2�|3�}4�~5�  5�x6�7�8�9�3�  0�0�y  1�2�3�4�5� 6� 0�t deg�o7� 8� 4�44�x5� 6�7�8�9�5�o       0�  1�4�5�6�p+7�q+8�r9�s( 0�animate�o  ion�o    sync�uto� wait� backgroundcolor�  sefrequency�lur� ounce� x�x geometry�xutton�calc� mera�t ncel� ircle�pode�olor�ss�q mplete� nsole�q   t�r  urrent� speed� damping�efaulttransition�wlay�y iv�ouble� uration�q     ease�{in� out�{ lement�o  xample�of00�s eturbulence�ff�q ilter� rom�ygesture�t�height�import�ynfinity� itial�tem�yjs�olatest�q  i�xog�q   mass� ini�|otion�yvalue�ry�new�t umbers�qonupdate�q pacity�~path�}length�p use� osition�xromise�repeat�vdelay� type� stdelta� speed� verse�  gba�xotate�o x�ion�t scale�econds�tion�quence�ut� peed�  ring�|          tagger�y iffness�|op�  yle�then�ree�t ime�   line�us�o� ransform�| ition� latex�| ween�} ype�| ul�~v�alues�selocity�  isualduration�� P1 9    0  �_� !    � I R m�    �H 76    ,   X    = `layout` prop. ``` <motion.div layout /> ``` Or to animate between different elements, a `layoutId`: ``` <motion.div layoutId\="underline" /> ``` [Learn more](./vue-layout-animations) about layout animations. ### Exit animations By wrapping `motion` components with `<AnimatePresence>` we gain access to the `exit` prop. ``` <AnimatePresence\> <motion.div v-if\="show" key\="box" :exit\="{ opacity: 0 }" /> </AnimatePresence\> ``` [Learn more](./vue-animate-presence) about `AnimatePresence`. Learn next ---------- That's a very quick overview of Motion for Vue's basic features. But there's a lot more to learn! Next, we recommend diving further into the [the](./vue-motion-component) `[<motion />](./vue-motion-component)` [component](./vue-motion-component) to learn more about its powerful features, like variants. Or, you can dive straight in to our [examples](https://examples.motion.dev/vue), where each example comes complete with full source code that you can copy/paste into your project.[{"title":"Code Example 1","description":"","code":"npm install motion-v","language":"vue","difficulty":"beginner","tags":["vue"]},{"title":"Code Example 2","description":"","code":"export default defineNuxtConfig({\n modules: ['motion-v/nuxt'],\n})","language":"vue","difficulty":"beginner","tags":["vue"]},{"title":"Code Example 3","description":"","code":"import Components from 'unplugin-vue-components/vite'\nimport MotionResolver from 'motion-v/resolver'\n\nexport default defineConfig({\n plugins: [\n vue(),\n Components({\n dts: true,\n resolvers: [\n MotionResolver()\n ],\n }),\n ],\n})","language":"vue","difficulty":"intermediate","tags":["vue"]},{"title":"Code Example 4","description":"","code":"<template>\n <motion.div />\n</template>","language":"vue","difficulty":"beginner","tags":["vue"]},{"title":"Code Example 5","description":"","code":"<motion.ul :animate=\"{ rotate: 360 }\" />","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 6","description":"","code":"<motion.div\n :animate=\"{\n scale: 2,\n transition: { duration: 2 }\n }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 7","description":"","code":"<motion.button :initial=\"{ scale: 0 }\" :animate=\"{ scale: 1 }\" />","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 8","description":"","code":"<motion.button :initial=\"false\" :animate=\"{ scale: 1 }\" />","language":"vue","difficulty":"intermediate","tags":["vue","animation"]},{"title":"Code Example 9","description":"","code":"<motion.button\n :whileHover=\"{ scale: 1.1 }\"\n :whilePress=\"{ scale: 0.95 }\"\n @hoverStart=\"() => console.log('hover started!')\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue","gesture"]},{"title":"Code Example 10","description":"","code":"<motion.div\n :initial=\"{ backgroundColor: 'rgb(0, 255, 0)', opacity: 0 }\"\n :whileInView=\"{ backgroundColor: 'rgb(255, 0, 0)', opacity: 1 }\"\n/>","language":"vue","difficulty":"intermediate","tags":["vue"]},{"title":"Code Example 11","description":"","code":"<script setup >\n const { scrollYProgress } = useScroll()\n</script>\n\n<template>\n <motion.div :style=\"{ scaleX: scrollYProgress }\" />\n</template>","language":"vue","difficulty":"intermediate","tags":["vue","scroll"]},{"title":"Code Example 12","description":"","code":"<motion.div layout />","language":"vue","difficulty":"beginner","tags":["vue","layout"]},{"title":"Code Example 13","description":"","code":"<motion.div layoutId=\"underline\" />","language":"vue","difficulty":"beginner","tags":["vue","layout"]},{"title":"Code Example 14","description":"","code":"<AnimatePresence>\n <motion.div v-if=\"show\" key=\"box\" :exit=\"{ opacity: 0 }\" />\n</AnimatePresence>","language":"vue","difficulty":"intermediate","tags":["vue","animation"]}]["vue","getting-started","animation","gesture","scroll","drag","layout","motion","transition"]2025-08-29 11:54:042025-08-29 11:54:04 ""�V������0��z 0definition(�?�_q �\�_q �\�_q �'�{�{ (�?�_q �\�_q �\�_q �'�{�{ s�1�3�3�x�_�_�1�3�3gree�/�x�x�M�^�^�/�x�x�M�^�^s�0�{�{�0�{�{lay&.��Z�Z�Z��y�yP.�� �6�|�Q �6�|�Q �6�|�B�z�z �k��x�x.�.��1�^�^N�~��C: 8��C: 8��C: .�0.�r�B�B.�.�.�N�6��G> 8��G> 8��G> .�.�.�.�&.��Z�Z�Z��y�yP.�� �6�|�Q �6�|�Q �6�|�B�z�z �k��x�x.�.��1�^�^N�~��C: 8��C: 8��C: .�0.�r�B�B.�.�.�N�6��G> 8��G> 8��G> .�children�b�m�m�}�z�z (�w.&�.&�.&(�30&�0&�0&�b�m�m�}�z�z (�w.&�.&�.&(�30&�0&�0&s�`�{�{�`�{�{ta�F�3�3� �x�x�.�G�G�'�^�^�9���q�� �F�3�3� �x�x�.�G�G�'�^�^�9���q��scribes �]� � �6���n���]� � �6���n��igned�&���c�p�p�&���c�p�ps..troy�[�`�`tailed .� � � .� � � s�b5�E5�E5�3�G�G�5�+5�+5�b5�E5�E5�3�G�G�5�+5�+5ect��x�x�:�^�^� � �  �,E�fE�fE�!�=�=�u� � ��x�x�:�^�^� � �  �,E�fE�fE�!�=�=�u� � ed�{�T�T�/�x�x�A�a�a�c�^�^ �H.�Q.�Q. �{�T�T�/�x�x�A�a�a�c�^�^ �H.�Q.�Q.ing��)�)��)�)on �� � '�N � �   �� � '�N � �  s"�y:�[�C:�[�C:�["�4:�f�E:�f�E:�f� � � ������� �X�X "�y:�[�C:�[�C:�["�4:�f�E:�f�E:�f� � � ������� �X�Xrmines�`�3�3�D�G�G����V�� �`�3�3�D�G�G����V��v�7�,����O�d�d��_�p�p �7(��B %� %� % ��7�(�7�;�7�z � � � � � �7"�7� �C�>�C�>�C��##��R�{�{��b� �  ���/�X�X"��h�C�F�C�F�C ���Y����E�_�_ ��7�,����O�d�d��_�p�p �7(��B %� %� % ��7�(�7�8�7�w � � � � � �7"�7� �C�>�C�>�C��##��R�{�{��b� �  ���/�X�X"��h�C�F�C�F�C �eloper�b���y�{�{�O�3�3� ��D��D��-�x�x�Z � � �S�G�G�H��F��F��K�^�^�N�>~�~�~"�Ie �0e �0e �U�6�$�6�$�6�-� � ��A�A�b���y�{�{�O�3�3� ��D��D��-�x�x�Z � � �S�G�G�H��F��F��K�^�^�N�>~�~�~"�Ie �0e �0e �U�6�$�6�$�6�-� � ment�^� � ��{�{�a�p�p�^� � ��{�{�a�p�pices�� � �� � ialog�Z�x�x� �^�^�Z�x�x� �^�^d��x�x��^�^��x�x��^�^ff �h� � �h� � erence�t�x�x�(�^�^�t�x�x�(�^�^ s��x�x�:�^�^��x�x�:�^�^ t�-��"��^�~�^�~�^�5�4�G�4�G�4��3�3(�n�b���b���b��=� �o� �o� *�5�(� /�(� /�(� �t���F�L�5�L�5�L �t)��X�X�~�L�=�L�=�L� �X �X �-��"��^�~�^�~�^�5�4�G�4�G�4��3�3(�n�b���b���b��=� �o� �o� *�5�(� /�(� /�(� �t���F�L�5�L�5�L �t)��X�X�~�L�=�L�=�L ly�;�y�y�f�z�z ����;�y�y�f�z�z ���s��T�T�?�a�a��T�T�?�a�aicult�Az�z�z�_z�fz�fz�Az�z�z�_z�fz�fzrection�T#�3#�3#�Y������#�@#�@#�n�c�c�T#�3#�3#�Y������#�@#�@#�n�c�c lock �2�a�a�2�a�aly�p����~��~��~�9�p�p�B�"�Y�"�Y�"�w�3�3�{�"�Z�"�Z�"��x�x��)�k�)�k�)�� � �4�G�G��^�^�=�+�:�+�:�+ �[�_�_�p����~�L!.�T�|E/ "K�tH�X�"�jH/+0+�t@+;q ""�������V������0 ��~��~�9�p�p�B�"�Y�"�Y�"�w�3�3�{�"�Z�"�Z�"��x�x��)�k�)�k�)�� � �4�G�G��^�^�=�+�:�+�:�+0disable�k���+�p�p��y�y� �z�z�k���+�p�p��y�y� �z�zd�I� I� I�;I�I�I�I� I� I�;I�I�Icord����+�4�*�=�J��7�m�]�T�c�g�6 �2��:���P�6��6�;����+�4�*�=�G� �7�m�]�T�c�g�6 �2��:���P�6ver�4�{�{�u��'�~�c�c�4�{�{�u��'�~�c�crete���_�_�play�]�]�]�:]�]�]�9�x�x�m�^�^�]�]�]�:]�]�]�9�x�x�m�^�^t�X�{�{�X�{�{ance�[�3�3�q� � �:�G�G�P����� �[�3�3�q� � �:�G�G�P�����ort"�S*�\�v*�\�v*�\"�*�F�r*�F�r*�F"�S*�\�v*�\�v*�\"�*�F�r*�F�r*�Fion"�X0�_�m0�_�m0�_"� 0�I�i0�I�i0�I"�X0�_�m0�_�m0�_"� 0�I�i0�I�i0�Iribution%�l�_�_%v4�4�(*&&�v�(*&&�v�(*&&:�L7�$09 � 7�$09 � 7�$09 v�=~�8�D_>$�F90�X�~�8�D_>$�F90�X�~�8�D_>$�F90�X� (� (� (j�v~�8�_='�F�g�~�8�_='�F�g�~�8�_='�F�gF�bKA:@� �;KA:@� �;KA:@� p�,AN<`(.�X�M] �,AN<`(.�X�M] �,AN<`(.�X�M] @�D50 � e2�50 � e2�50 � e2�2� � F�KADA� �=KADA� �=KADA� p�@AM>b(.�Z�7] �%AM>b(.�Z�7] �%AM>b(.�Z�7] @�|15 �)6�15 �)6�15 �)6�&[�6[�6[�� %R�dGS�#%b4#"%N/$�c%R�dGS�#%b4#"%N/$�c%R�dGS�#%b4#"%N/$�H� � �_�X�X��D%R�dGS�#%b4#"%N/$�k%R�dGS�#%b4#"%N/$�k%R�dGS�#%b4#"%N/$4�4�(*&&�v�(*&&�v�(*&&:�L7�$09 � 7�$09 � 7�$09 v�=~�8�D_>$�F90�X�~�8�D_>$�F90�X�~�8�D_>$�F90�X� (� (� (j�v~�8�_='�F�g�~�8�_='�F�g�~�8�_='�F�gF�bKA:@� �;KA:@� �;KA:@� p�,AN<`(.�X�M] �,AN<`(.�X�M] �,AN<`(.�X�M] @�D50 � e2�50 � e2�50 � e2�2� � F�KADA� �=KADA� �=KADA� p�@AM>b(.�Z�7] �%AM>b(.�Z�7] �%AM>b(.�Z�7] @�|15 �)6�15 �)6�15 �)6�&[�6[�6[�� %R�dGS�#%b4#"%N/$�c%R�dGS�#%b4#"%N/$�c%R�dGS�#%b4#"%N/$�H� � �_�X�X��D%R�dGS�#%b4#"%N/$�k%R�dGS�#%b4#"%N/$�k%R�dGS�#%b4#"%N/$e�f���\�{�{�v�p�p�f���\�{�{�v�p�ping�J���Z�p�p�J���Z�p�po�p�T�'�T�'�T�i�V�&�V�&�V�o�1�I�1�I�1�<�G�G�"�2�.�2�.�2�^� � �p�T�'�T�'�T�i�V�&�V�&�V�o�1�I�1�I�1�<�G�G�"�2�.�2�.�2�^� � cs�q� q� q�n�p�p.�T� %�~� %�~� %���D��D��2�x�x�;�p���_ � � �X�G�G�M��F��F��P�^�^�y�c�c�S�C~�~�~"�Ne �0e �0e �Z�6�$�6�$�6�2� � ��A�A�q� q� q�n�p�p.�T� %�~� %�~� %���D��D��2�x�x�;�p���_ � � �X�G�G�M��F��F��P�^�^�y�c�c�S�C~�~�~"�Ne �0e �0e �Z�6�$�6�$�6�2� � ument��{�{��3�3(�!�5�7!�5�7!�5 �� � "��C=�-�C=�-�C=�-�X�X��{�{��3�3(�!�5�7!�5�7!�5 �� � "��C=�-�C=�-�C=�-�X�X ation�u���!�{�{��p�p�u���!�{�{��p�pes"�g�4"�&�4"�&�4""��4"� �4"� �4""�g�4"�&�4"�&�4""��4"� �4"� �4"n�5�p�p�g�T�T�v�x�x�"�a�a��^�^�5�p�p�g�T�T�v�x�x�"�a�a��^�^m"� Y�s�PY�s�PY�s�D�p�p.��"�i�U�"�i�U�"�i.�T�_"�k��_"�k��_"�k�e�x�x�;�a�a��^�^�h�)�)�B� � �f�_�_"� Y�s�PY�s�PY�s�D�p�p.��"�i�U�"�i�U�"�i.�T�_"�k��_"�k��_"�k�e�x�x�;�a�a��^�^�h�)�)�B� � n�S�{�{�l�3�3� �L �L (�f�Y&�g�Y&�g�Y&�P �Y �Y "��Z&�b�Z&�b�Z&�o���'���S�{�{�l�3�3� �L �L (�f�Y� Y7�.}njQQ�?-�+�:�)IPg�rops using `attrX`, `attrY` and `attrScale` respectively: ``` <motion.rect attrX\={0} animate\={{ attrX: 100 }} /> ``` ### Passing `MotionValue` [Motion values](./react-motion-value) should be passed via `style`, when animating regular styles, or via the component's attribute where appropriate: ``` const cx = useMotionValue(100) const opacity = useMotionValue(1) return <motion.rect cx\={cx} style\={{ opacity }} /> ``` Line drawing ------------ Motion simplifies the creation of “hand-drawn” line animations using three special values. Each is set as a `0`\-`1` progress value, where `1` is the total length of the line: * `pathLength`: total drawn length * `pathSpacing`: length between segments * `pathOffset`: where the segment starts These values work on `path`, `circle`, `ellipse`, `line`, `polygon`, `polyline`, `rect`. ``` <motion.path d\={d} initial\={{ pathLength: 0 }} animate\={{ pathLength: 1 }} /> ``` Path morphing ------------- It's possible to also animate the shape of a `path` via its `d` attribute. ``` <motion.path d\="M 0,0 l 0,10 l 10,10" animate\={{ d: "M 0,0 l 10,0 l 10,10" }} /> ``` This works natively in Motion **as long as the two paths are similar**. You can see in the example above that each path has the same number and type of path instructions. For interpolating between very different paths, you can incorporate a third-party path mixer like [Flubber](https://www.npmjs.com/package/flubber):[{"title":"Code Example 1","description":"","code":"<motion.svg>\n <motion.circle />\n</motion.svg>","language":"react","difficulty":"beginner","tags":["react"]},{"title":"Code Example 2","description":"","code":"<motion.circle\n style={{ fill: \"#00f\" }}\n animate={{ fill: \"#f00\" }}\n/>","language":"react","difficulty":"beginner","tags":["react","animation"]},{"title":"Code Example 3","description":"","code":"<motion.circle\n cx={0}\n animate={{ cx: 50 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 4","description":"","code":"<motion.svg\n viewBox=\"0 0 200 200\"\n animate={{ viewBox: \"100 0 200 200\" }} // 100px to the right\n/>","language":"react","difficulty":"beginner","tags":["react","animation"]},{"title":"Code Example 5","description":"","code":"<motion.svg\n viewBox=\"0 0 200 200\"\n animate={{ viewBox: \"-100 -100 300 300\" }} // Zoom out\n/>","language":"react","difficulty":"beginner","tags":["react","animation"]},{"title":"Code Example 6","description":"","code":"<motion.div style={{ rotate: 90 }} />","language":"react","difficulty":"intermediate","tags":["react"]},{"title":"Code Example 7","description":"","code":"<motion.rect style={{ rotate: 90 }} />","language":"react","difficulty":"intermediate","tags":["react"]},{"title":"Code Example 8","description":"","code":"<motion.rect style={{ rotate: 90, transformBox: \"view-box\" }} />","language":"react","difficulty":"intermediate","tags":["react"]},{"title":"Code Example 9","description":"","code":"<motion.div animate={{ x: 100 }} />","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 10","description":"","code":"<motion.rect attrX={0} animate={{ attrX: 100 }} />","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 11","description":"","code":"const cx = useMotionValue(100)\nconst opacity = useMotionValue(1)\n\nreturn <motion.rect cx={cx} style={{ opacity }} />","language":"react","difficulty":"beginner","tags":["react"]},{"title":"Code Example 12","description":"","code":"<motion.path\n d={d}\n initial={{ pathLength: 0 }}\n animate={{ pathLength: 1 }}\n/>","language":"react","difficulty":"intermediate","tags":["react","animation"]},{"title":"Code Example 13","description":"","code":"<motion.path\n d=\"M 0,0 l 0,10 l 10,10\"\n animate={{ d: \"M 0,0 l 10,0 l 10,10\" }}\n/>","language":"react","difficulty":"beginner","tags":["react","animation"]}]["react","animations","svg","animation","motion"]2025-08-29 11:54:082025-08-29 11:54:08SS** * **SVG** (like path drawing animations) * **WebGL** (3D graphics) The best part? It's also tiny, with a mini HTML/SVG version of the `animate()` function that's just 2.3kb! By the end of this quick guide, you'll have installed Motion and made your first animation. Install ------- You can install Motion in two ways: 1. A package manager like npm or Yarn (**most popular)** 2. HTML `script` tag ### Package manager Motion can be installed via the `"motion"` package. ``` npm install motion ``` Then imported in your JavaScript: ``` import { animate, scroll } from "motion" ``` ### `script` tag It's possible to import Motion directly using a `script` tag. This is perfect if you're working with a basic HTML page, or using a no-code tool like Webflow. Import using the modern `import` syntax: ``` <script type\="module"\> import { animate, scroll } from "https://cdn.jsdelivr.net/npm/motion@latest/+esm" </script\> ``` Or you can add `Motion` as a global variable using the legacy include: ``` <script src\="https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js"\></script\> <script\> const { animate, scroll } = Motion </script\> ``` **Note:** It's best practise to replace "latest" in these URLs with a specific version, like `11.11.13`. You can find the latest version at [JSDelivr](https://www.jsdelivr.com/package/npm/motion). ### Development tools With Motion for AI, you can load the Motion docs straight into your AI code editor to improve the quality of its suggestions. [Learn more](./ai-llm-documentation). [![Add to VS Code](https://framerusercontent.com/images/mOTurneZubngSCtZ2IvwlqoPUs.png?width=348&height=82)](vscode:extension/Motion.motion-vscode-extension)[![Add to Cursor](https://framerusercontent.com/images/G3FXTpYrPji6khdFKeGo8YrbS08.png?width=324&height=82)](https://cursor.com/en/install-mcp?name=motion&config=eyJjb21tYW5kIjoibnB4IC15IG1vdGlvbi1haSJ9) Create an animation ------------------- The "Hello world!" of any animation library is a simple transform animation. Let's start by importing the `[animate](./animate)` [function](./animate). ``` import { animate } from "motion" ``` `animate` can animate one or more elements. You can either use a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll#obtaining_a_list_of_matches) (like `".my-class"`) or provide the elements directly: ``` // CSS selector animate(".box", { rotate: 360 }) // Elements const boxes = document.querySelectorAll(".box") animate(boxes, { rotate: 360 }) ``` You can see here we're setting `rotate` to `360`. This will rotate the element 360 degrees: What can be animated? --------------------- Motion lets you animate anything: * **CSS properties** (like `opacity`, `transform` and `filter`) * **SVG attributes and paths** * **Independent transforms** (`x`, `rotateY` etc) * **JavaScript objects** (containing strings/colors/numbers) With Motion, you don't have to worry about achieving the best performance available. When a value can be hardware accelerated, like `opacity`, `filter` or `transform`, it will be. `animate` isn't limited to HTML. It can animate single values or any kind of object. For example, the rotation of a Three.js object: ``` animate( cube.rotation, { y: rad(360), z: rad(360) }, { duration: 10, repeat: Infinity, ease: "linear" } ) ``` Customising animations ---------------------- Motion comes with smart defaults, so your animations should look and feel great out of the box. But you can further tweak options like: * **Duration** (how long the animation lasts) * **Delay** (how long it waits before starting) * **Easing** (how it speeds up and slows down) * **Repeat** (how it repeats, how many times, etc) ``` animate( element, { scale: \[0.4, 1\] }, { ease: "circInOut", duration: 1.2 } ); ``` Motion also has amazing [spring animations](./spring) for natural, kinetic animations: ``` animate( element, { rotate: 90 }, { type: "spring", stiffness: 300 } ); ``` �\� � � s � D � +�$��QcL�%��-�I +�91%3Code Example 12reactlayoutfunction Accordion() { const [isOpen, setOpen] = useState(false) return ( <motion.div layout style={{ height: isOpen ? "100px" : "500px" }} onClick={() => setOpen(!isOpen)} /> ) }["react","layout"]intermediate2025-08-29 11:54:06� �H +{13Code Example 11reactlayout<motion.div layoutRoot style={{ position: "fixed" }} />["react","layout"]beginner2025-08-29 11:54:06��G +�C3Code Example 10reactlayout<motion.div layoutScroll style={{ overflow: "scroll" }} />["react","scroll","layout"]beginner2025-08-29 11:54:06��F )�][%3Code Example 9reactlayout<> <motion.button layoutId="modal" onClick={() => setIsOpen(true)} // This transition will be used when the modal closes transition={{ type: "spring" }} > Open </motion.button> <AnimatePresence> {isOn && ( <motion.dialog layoutId="modal" // This transition will be used when the modal opens transition={{ duration: 0.3 }} /> )} </AnimatePresence> </>["react","animation","spring","layout"]intermediate2025-08-29 11:54:06�j�E )�I%3Code Example 8reactlayout<motion.div layout animate={{ opacity: 0.5 }} transition={{ default: { ease: "linear" }, layout: { duration: 0.3 } }} />["react","animation","layout"]intermediate2025-08-29 11:54:06��D )uI%3Code Example 7reactlayout<motion.div layout transition={{ duration: 0.3 }} />["react","animation","layout"]intermediate2025-08-29 11:54:06�0�C )�1I3Code Example 6reactlayout<AnimatePresence> {isOpen && <motion.div layoutId="modal" />} </AnimatePresence>["react","animation","layout"]beginner2025-08-29 11:54:06��B )o13Code Example 5reactlayoutisSelected && <motion.div layoutId="underline" />["react","layout"]beginner2025-08-29 11:54:06��A )�1%3Code Example 4reactlayout<motion.div layout style={{ width: isOpen ? "80vw" : 0 }} />["react","layout"]intermediate2025-08-29 11:54:06n�@ )G13Code Example 3reactlayout<motion.li layoutId="item" />["react","layout"]beginner2025-08-29 11:54:06�,�? )�91%3Code Example 2reactlayout<motion.div layout style={{ justifyContent: isOn ? "flex-start" : "flex-end" }} />["react","layout"]intermediate2025-08-29 11:54:06f�> )713Code Example 1reactlayout<motion.div layout />["react","layout"]beginner2025-08-29 11:54:06�^�= +�3%3Code Example 12reactgesturesconst MyComponent = () => { return ( <motion.svg whileHover="hover"> <filter id="blur"> <motion.feGaussianBlur stdDeviation={0} variants={{ hover: { stdDeviation: 2 } }} /> </filter> </motion.svg> ) }["react","gesture"]intermediate2025-08-29 11:54:06�I�< +�k3%3Code Example 11reactgestures<motion.div whileTap={{ scale: 2 }}> <button onPointerDownCapture={e => e.stopPropagation()} /> </motion.div>["react","gesture"]intermediate2025-08-29 11:54:06��; +o%3Code Example 10reactgestures<motion.a whileFocus={{ scale: 1.2 }} href="#" />["react"]intermediate2025-08-29 11:54:06��: )�33Code Example 9reactgestures<motion.div drag dragDirectionLock onDirectionLock={callback} />["react","gesture"]beginner2025-08-29 11:54:06� �9 )�#33Code Example 8reactgesturesconst MyComponent = () => { const constraintsRef = useRef(null) return ( <motion.div ref={constraintsRef}> <motion.div drag dragConstraints={constraintsRef} /> </motion.div> ) }["react","gesture"]beginner2025-08-29 11:54:06��8 )�3%3Code Example 7reactgestures<motion.div drag="x" dragConstraints={{ left: 0, right: 300 }} />["react","gesture"]intermediate2025-08-29 11:54:06� �7 )�3%3Code Example 6reactgestures<motion.div drag whileDrag={{ scale: 1.2, backgroundColor: "#f00" }} />["react","gesture"]intermediate2025-08-29 11:54:06 ""�V������0 003d�J49+T�$49+T�$49+T13�P3�.3�.30243 �N73�m�_�_803�-23�F$ �$ �$ 0003�P43�M�_�_53�J �? �? 33�O|'�@|'�@|'53�l�_�_93�K�_�_43"�Kz# �(z# �(z# 53�t�_�_753��_�_863�o�_�_a3:�)�H)�)�H)�)�H) cceleration3�6�_�_pts3�)�8)�8)djusted3�v�_�_vanced3&ll3�m�_�_n3B�}{�}{�}{�d3>  �&z�` )Dz�` )Dz�` )>imate32�?�?�?�view3 �ion30 �y�B��B��B�5 s3.n~(�:�"�:�"�:� other3�{�_�_ticipate3�'�_�_pi3 o~s3�1re3��_�_t3�7��D��D�tr3 P�effect3 O�back3� �_�_in3�!�_�_out3�#�_�_out3�"�_�_e3.�t�b�H�b�H�bcome3�))�8)�8)ginning3�9�_�_zier3�G�_�_oth3� �_�_uilt3�8c�~c�~ct3�Q�$�=�$�=�$y34�A>�R�)>�R�)>�Rcan3:�<"�b�"�b�"�bses3�k�_�_hange3� �H��H��Hd3�[�_�_ircin3�$�_�_out3�&�`��`��`out3�%�_�_ode3�<m3 �Gparison3h�liant3� �_�_onent3�.�[�[nst3F�] R# 5%�] R# 5%�] R# 5%trol3 �`�_�_urse3��_�_reate3��_�_s3��_�_ss3,\��2 �8 �8  ubicbezier3.�@ �@ �@ rsor3 �3ve3"�Hi7�0i7�0i7default3�N&�;&�;&initions3�x�_�_lay3.�v3��E�_�_eloper3��A�Aifferent3� �X �X rectly3�[�_�_scord3�6ver3rete3��_�_ tribution3�l�_�_ocs3��A�Am3�f�_�_wn3 �Luration3��0�1�0�1�0vcuqx74mh8wmjkmhiom2yli43 �Ix3 v�ease30�E�^#R�^#R�^#d3� �[�[progress3�q�_�_in3(�F6�6�6out3� �_�_out3��P�Ping3�P �e /,J    )& /,J    )& /,J    )s3diting3�>ffect3Q{ither3�\�_�_mil3�R�_�_n3��A�Ad3�T�_�_ter3�1�_�_venly3��_�_ts3 $�xamples3��clusive3�0it3�3�_�_plore3faqs3e�st3�Q�_�_eature3g�el3ing3�>�_�_s3��_�_irst3�~�_�_ollowing3�5�_�_r36%�(7 J�t)>7 J�t)>7 J�t)rame30� rusercontent3 �Fom34z�jnYt*knYt*knYt*unction3f�$A�9D .A�9D .A�9D s3N"�e = �yS = �yS = �y generated3�{�_�_sture3s3 #�t3 ��bithub3�8ves3�:�_�_sap3w�uide3��s3 d�have3�3�_�_eight3 �Qover3%��}w3ttps30��F:� :� :�_i3�*�H�Hmages3 �Hport3*�U&nYt*^&nYt*^&nYt*ed3�u�_�_ rovements3 kn30�9c�)Ec�)Ec�)stance3�#)�8)�8) tegrations3 [�view3'�s3� f�{f�{ft3"� �)�!�)�!�)s3��_�_js3pust3�=�_�_keep3�N�_�_owalski3�S�_�_learn3vel3�%ifetime3�Cke3!�2near3"�(�J��J��Jl3��_�_onger3�F�_�_map3 F�value3 E�igrate3 y�ion3 x� rroreasing3($�; �9 �9 d3��_�_s3�G�_�_x32�odifiers3 ��]�]re3�+tion3�% <% <*6 VDt*-6 VDt*-6 VDt*D value3 B�zilla3��A�Aname3�B�_�_d3�C�_�_ew3"�u�*)��*)��*)xt3�"o3�E�_�_vel3�i�_�_umber3��_�_of3:�\,)��\,)��\,)�n3�U�_�_e3�)�8)�8)Cr3�g�_�_g3��A�Aut3 �,*�7*�7*ver3�a�_�_passing3"�~�a�e�a�e�ayment3�B erformance3~�lus3 �qng3 �Jowerful3�:in3�3 #�7 #�7 #out3�`�]�]out3�8�_�_recise3�_�_�_ss3)�view3 �ous3�ivate3�5ogress3F� �o=(� �o=(� �o=(7    " &$"   $  * %   " p       >,          "  J  #     Stagger animations ------------------ When animating multiple elements, it can feel more natural or lively to offset the animations of each. This is called **staggering**. Motion provides a `stagger` function that can be used to dynamically set `delay`: ``` import { animate, stagger } from "motion" animate( "li", { y: 0, opacity: 1 }, { delay: stagger(0.1) } ) ``` What's next? ------------ You've just learned the basics of Motion and created a simple animation. But there's so much more to discover, like: * [**Keyframes and sequences**](./animate): Create more complex animations * [**Controls**](./animate): Pause, resume or change animations * [**Scroll-linked animations**](./scroll)**:** Link values to scroll position * [**Scroll-triggered animations**](./inview): Trigger animations when elements enter the viewport Or you can dive straight into our [examples](https://examples.motion.dev), which are clear, simple, and feature source code that can be easily copy/pasted, or opened straight into the [v0](https://v0.dev/) AI code editor.[{"title":"Code Example 1","description":"","code":"npm install motion","language":"javascript","difficulty":"beginner","tags":["js"]},{"title":"Code Example 2","description":"","code":"import { animate, scroll } from \"motion\"","language":"javascript","difficulty":"beginner","tags":["js","animation","scroll"]},{"title":"Code Example 3","description":"","code":"<script type=\"module\">\n import { animate, scroll } from \"https://cdn.jsdelivr.net/npm/motion@latest/+esm\"\n</script>","language":"javascript","difficulty":"beginner","tags":["js","animation","scroll"]},{"title":"Code Example 4","description":"","code":"<script src=\"https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js\"></script>\n<script>\n const { animate, scroll } = Motion\n</script>","language":"javascript","difficulty":"beginner","tags":["js","animation","scroll"]},{"title":"Code Example 5","description":"","code":"import { animate } from \"motion\"","language":"javascript","difficulty":"beginner","tags":["js","animation"]},{"title":"Code Example 6","description":"","code":"// CSS selector\nanimate(\".box\", { rotate: 360 })\n\n// Elements\nconst boxes = document.querySelectorAll(\".box\")\n\nanimate(boxes, { rotate: 360 })","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 7","description":"","code":"animate(\n cube.rotation,\n { y: rad(360), z: rad(360) },\n { duration: 10, repeat: Infinity, ease: \"linear\" }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 8","description":"","code":"animate(\n element,\n { scale: [0.4, 1] },\n { ease: \"circInOut\", duration: 1.2 }\n);","language":"javascript","difficulty":"intermediate","tags":["js","animation"]},{"title":"Code Example 9","description":"","code":"animate(\n element,\n { rotate: 90 },\n { type: \"spring\", stiffness: 300 }\n);","language":"javascript","difficulty":"intermediate","tags":["js","animation","spring"]},{"title":"Code Example 10","description":"","code":"import { animate, stagger } from \"motion\"\n\nanimate(\n \"li\",\n { y: 0, opacity: 1 },\n { delay: stagger(0.1) }\n)","language":"javascript","difficulty":"advanced","tags":["js","animation","stagger"]}]{"props":[],"methods":[{"name":"animate","signature":"animate()","description":"animate method"}],"types":[]}["js","getting-started","quick","start","animation","scroll","spring","keyframes","stagger","motion"]2025-08-29 11:53:102025-08-29 11:53:10unction](./animate) and Motion for React's `[motion](./react-motion-component)` [component](./react-motion-component) have the following easing functions built-in and you can just refer to them by name. ``` // Named easing ease: "easeIn" // Bezier curve ease: \[0.39, 0.24, 0.3, 1\] ``` But you can still import them separately to use them directly, either for use with the tiny `animate` function from `"motion/dom"` or for novel use-cases. Usage ----- All of Motion's easing functions can be imported straight from `"motion"`: ``` import { easeIn } from "motion" ``` By passing a `0`\-`1` progress value to these functions, you'll receive an eased progress back. ``` const eased = easeIn(0.75) ``` Functions --------- Motion provides a number of built-in easing functions: * `cubicBezier` * `easeIn`/`easeOut`/`easeInOut` * `backIn`/`backOut`/`backInOut` * `circIn`/`circOut`/`circInOut` * `anticipate` * `linear` * `steps` > _I usually use the_ `_"easeOut"_` _curve for enter and exit transitions. The acceleration at the beginning gives the user a feeling of responsiveness. I use a duration no longer than_ `_0.3_`_/_`_0.4_` _seconds to keep the animation fast._~ Emil Kowalski, [Animations on the Web](https://animations.dev/) ### `cubicBezier` `cubicBezier` provides very precise control over the easing curve. ``` import { cubicBezier } from "motion" const easing = cubicBezier(.35,.17,.3,.86) const easedProgress = easing(0.5) ``` New easing curve definitions can be generated with [Motion Studio](../studio). ### `steps` `steps` creates an easing with evenly-spaced, discrete steps. It is spec-compliant with [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#step-easing-function) `[steps](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#step-easing-function)` [easing](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#step-easing-function). ``` import { steps } from "motion" const easing = steps(4) easing(0.2) // 0 easing(0.25) // 0.25 ``` By default, the "steps" change at the end of a step, this can be changed by passing `"start"` to `steps`: ``` const easing = steps(4, "start") easing(0.2) // 0.25 ``` The distribution of steps is linear by default but can be adjusted by passing `progress` through another easing function first. ``` const easing = steps(4) easing(circInOut(0.2)) ``` Modifiers --------- Easing modifiers can be used to create mirrored and reversed easing functions. ### `reverseEasing` `reverseEasing` accepts an easing function and returns a new one that reverses it. For instance, an ease in function will become an ease out function. ``` import { reverseEasing } from "motion" const powerIn = (progress) \=> progress \* progress const powerOut = reverseEasing(powerIn) ``` ### `mirrorEasing` `mirrorEasing` accepts an easing function and returns a new one that mirrors it. For instance, an ease in function will become an ease in-out function. ``` import { mirrorEasing } from "motion" const powerIn = (progress) \=> progress \* progress const powerInOut = mirrorEasing(powerInOut) ``` Previous [ View animations ](./animate-view) Next [ hover ](./hover) Level up your animations with Motion+ ------------------------------------- More than 180+ Motion examples, exclusive APIs like [Cursor](./cursor), private Discord and GitHub, and powerful VS Code animation editing tools. One-time payment, lifetime updates. ![](https://framerusercontent.com/images/dvcUQX74Mh8wmjKmhIoM2Yli4.png?scale-down-to=1024&width=2000&height=2000) ![](https://framerusercontent.com/images/dvcUQX74Mh8wmjKmhIoM2Yli4.png?scale-down-to=1024&width=2000&height=2000) ![](https://framerusercontent.com/images/dvcUQX74Mh8wmjKmhIoM2Yli4.png?scale-down-to=1024&width=2000&height=2000) [ Get Motion+ ](../plus) [ Get Motion+ ](../plus) [ Get Motion+ ](../plus)["js","reference","easing","functions","animation","gesture","scroll","spring","stagger","motion","transition"]2025-08-29 11:42:202025-08-29 11:42:20 ""�V������0�006 �KI16b�mE06� 16 �n36�p26 G'�h3006�e246�<486�)606� ^d61kb6H46�L826 �+906�aa6$*0 $(l]%�)bout6�T ccelerated6�`hieving6�Udd6 �A_i6� �_lso6 8�mazing6�Vn6 �Hd6 K�h`"i4imate6:&C1*�( 7 H/(d6�0ing6�ion6"V�t�Z{ s6$/�e @ E  y6 �P�'thing6 '�pi6�|re6�bs6�Ct6�wtributes6�>vailable6�Ybasic6�s6�!e6t�=1 �ifore6�6st64�/�xox6� �es6 �rowser6ut6 �$�y6 I�called6�{n6&%9O4b 118IVdn6 �6hange6�?ircinout6�Olass6�ear6�code6�$n�Ilors6�Jm6�|* bines6es6�plete6x6�8nfig6�Gst6 �Y�<taining6�Hrols6�:py6�mreate6 �I�od6�%ss6*�J,ube6�rsor6 �4 stomising6�defaults6�grees6�,lay6 �1Zv6 �`eloper6�ument6�irectly6 ��~scover6�0t6�Tve6�Xocs6 � qument6� ation6�n6�Own6�?rawing6.uration6 � "' ynamically6�each6�xse6 �Aily6�lng6�8y6 ditor6 ��kffects6ither6�olement6�}/�!s6 �l �[hn6 �B8d6Kgine6ter6�Rsm6�<tc6 �E�xample6�zs6�\tension6 �-'yjjb21tyw5kijoibnb4ic15ig1vdglvbi1hasj96�Hfeature6�fel6 �Rilter6 �<)nd6�srst6Xor6��wcramerusercontent6 �#om6�1�2�+un6 ction6C��#rther6�'g3fxtpyrpji6khdfkego8yrbs086�9et6ting6lobal6�Eraphics62eat6�uide6 Ohardware6�_s6�Uve6 R�eight6 �*llo6�Mre6�ow6�, tml6)23�Rtps6�5.+ 7�kybrid6if6�mages6 �%port6� �3�*ed6~ing6�\rove6�n6 _"iclude6�J dependent6�Afinity6�stall6Z �Jed6S$to6� �Oview6�Ms6��@�)n6�jt66UX� G ,s6 �  javascript6  c�Gs6�V�,delivr6�7+ust6 F�Z keyframes6�2 ind6�vetic6�\lasts6�0test6�;earn6�ed6�gacy6�It6�Xs6�2i6�brary6�Nke6(<BI�6+K� mited6�lless6near6�k6�Eed6�Bst6�vely6�rl6Qm6�oad6�ng6 �-ok6�made6Vnager6ey6�Ester6tches6�cp6�Deans6#ini6<odern6�+ule6�0re6�S�A st6jtion6JT  .  % &!NHB,> urnezubngsctz2ivwlqopus6�&zilla6�vuch6�-ltiple6�jy6�name6�Etural6 �[et6 �8xt6�o6�#te6�^pm6gA/umbers6�Kobject6 �x s6�Gtaining6�f6 $�L;5w&X-fset6�tne6�ipacity6�9+�3ened6�ptions6�)r6h: �._Og6�wur6�[t6� package6d �ge6�rt65sted6�nth6-s6�@use6�<erfect6�ormance6 �Dng6 �'opular6ksition6�Isible6� tential6ractise6�boperties6�7vide6�s6�~quality6�eryselectorall6 �~ick6 Nrad6 �e6 �� peat6 � 5s6�Clace6�dsume6�=otate6� �:y6�Dion6 �| s61GX{�Ccale6�Jript6n oll6�1*�hee6�lector6 �squences6�4t6�ting6�"hould6�imple6�U�T?ngle6�rlows6�>mart6�o6 ��urce6�gpecific6�keds6�;ring6 �W  rc6�Ltagger6�f  ing6�|rt6 �Qed6ing6�7iffness6�draight6� �Oings6�I uggestions6�vg6     &                  /    #               -                       � ��-������^� +�0syntax6�-t6 �Pag6 o hat6?�@ie64 /5 . :."/')I-5"n6}re6�*se6�gis6"-I��Uree6�imes6�Fny69o6$ �Y1s0�+ol6�%s6�ransform6 �Vf- s6�Bigger6�Ned6�Kweak6�(o6`ype6 �/�5unique6p6�<rls6�hs6�ye6�pd6�ing6� v06 �talue6�\s6 �s�Uriable6�Fe6�rsion6 ?�/ ia6vewport6�Ts6� code6 �,waits6�5ys6ae6� b6�{flow6�'gl6  0hat6 �-�nen6�Z�jich6�aidth6 �(ll6 �'Bth6 "cP�LKorking6�ld6�Nry6�Sww6�zx6�Cy6 ��arn6iou6 $. ?)4i1Yy<r6W+�� z6�             � � �  v � V �E1D�`���e�3���^ +�+3Code Example 10jsscrollscroll( (progress) => console.log(progress), { axis: "x" } )["js","scroll"]beginner2025-08-29 11:54:07�7�] )�[+%3Code Example 9jsscrollscroll( (progress) => console.log(progress), { container: document.getElementById("carousel") } )["js","scroll"]intermediate2025-08-29 11:54:07t�\ )_+3Code Example 8jsscrollconst cancel = scroll(callback) cancel()["js","scroll"]beginner2025-08-29 11:54:07� �[ )�+3Code Example 7jsscrollscroll((progress, info) => { console.log(info.x.current) })["js","scroll"]beginner2025-08-29 11:54:07��Z )� +%3Code Example 6jsscrollscroll(animation, { target: document.getElementById("item") })["js","scroll"]intermediate2025-08-29 11:54:07��Y )�+%3Code Example 5jsscrollscroll(callback, { container: document.getElementById("scroller") })["js","scroll"]intermediate2025-08-29 11:54:07j�X )K+3Code Example 4jsscrollscroll(callback, { axis: "x" })["js","scroll"]beginner2025-08-29 11:54:07�S�W )�C3Code Example 3jsscrollconst animation = animate( "div", { transform: ["none", "rotate(90deg)"] }, { ease: "linear" } ) scroll(animation)["js","animation","scroll"]beginner2025-08-29 11:54:07t�V )_+3Code Example 2jsscrollscroll(progress => console.log(progress))["js","scroll"]beginner2025-08-29 11:54:07j�U )K+3Code Example 1jsscrollimport { scroll } from "motion"["js","scroll"]beginner2025-08-29 11:54:07�i�T )�;13Code Example 7reactscrollconst backgroundColor = useTransform( scrollYProgress, [0, 0.5, 1], ["#f00", "#0f0", "#00f"] ) return <motion.div style={{ backgroundColor }} />["react","scroll"]beginner2025-08-29 11:54:07��S )�wC3Code Example 6reactscrollconst { scrollYProgress } = useScroll(); const scaleX = useSpring(scrollYProgress, { stiffness: 100, damping: 30, restDelta: 0.001 }) return <motion.div style={{ scaleX }} />["react","scroll","spring"]advanced2025-08-29 11:54:07�H�R )�y13Code Example 5reactscrollconst { scrollY } = useScroll() const [scrollDirection, setScrollDirection] = useState("down") useMotionValueEvent(scrollY, "change", (current) => { const diff = current - scrollY.getPrevious() setScrollDirection(diff > 0 ? "down" : "up") })["react","scroll"]beginner2025-08-29 11:54:07�A�Q )�c1%3Code Example 4reactscrollconst { scrollYProgress } = useScroll(); return ( <motion.div style={{ scaleX: scrollYProgress }} /> )["react","scroll"]intermediate2025-08-29 11:54:07�m�P )�;1%3Code Example 3reactscrollfunction Component() { const scrollRef = useRef(null) return ( <div ref={scrollRef} style={{ overflow: "scroll" }}> <motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ root: scrollRef }} /> </div> ) }["react","scroll"]intermediate2025-08-29 11:54:07�+�O )�71%3Code Example 2reactscroll<motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} />["react","scroll"]intermediate2025-08-29 11:54:07��N )�%3Code Example 1reactscroll<motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} />["react"]intermediate2025-08-29 11:54:07�U�M +� 1%3Code Example 18reactlayout<motion.div layout style={{ borderRadius: 10, padding: 5 }}> <motion.div layout style={{ borderRadius: 5 }} /> </motion.div>["react","layout"]intermediate2025-08-29 11:54:06��L +�13Code Example 16reactlayout<motion.section layout> <motion.img layout /> </motion.section>["react","layout"]beginner2025-08-29 11:54:06��K +q1%3Code Example 15reactlayout<motion.div layout style={{ borderRadius: 20 }} />["react","layout"]intermediate2025-08-29 11:54:06�p�J +�G13Code Example 14reactlayoutimport { LayoutGroup } from "motion/react" function List() { return ( <LayoutGroup> <Accordion /> <Accordion /> </LayoutGroup> ) }["react","layout"]beginner2025-08-29 11:54:06 v# � � � e � =R��8?��vu�6 )c3Code Example 5reactgestures<motion.div onPan={(e, pointInfo) => {}} />["react"]beginner2025-08-29 11:54:06��5 )y3%3Code Example 4reactgestures<motion.button whileTap={{ scale: 0.9, rotate: 3 }} />["react","gesture"]intermediate2025-08-29 11:54:06�;�4 )�Q3%3Code Example 3reactgestures<motion.a whileHover={{ scale: 1.2 }} onHoverStart={event => {}} onHoverEnd={event => {}} />["react","gesture"]intermediate2025-08-29 11:54:06�u�3 )�M33Code Example 2reactgestures<motion.button whileTap="tap" whileHover="hover" variants={buttonVariants} > <svg> <motion.path variants={iconVariants} /> </svg> </motion.button>["react","gesture"]beginner2025-08-29 11:54:06�X�2 )�sK%3Code Example 1reactgestures<motion.button whileHover={{ scale: 1.2, transition: { duration: 1 }, }} whileTap={{ scale: 0.9 }} />["react","animation","gesture"]intermediate2025-08-29 11:54:06�\�1 +!�3%3Code Example 29vueanimations<script setup> import { useMotionValue, motion, animate, RowValue } from "motion-v" import { onMount, onUnmount } from "vue" const count = useMotionValue(0) let controls onMount(()=>{ controls = animate(count, 100, { duration: 5 }) }) onUnmount(()=>{ controls.stop() }) </script> <template> <motion.pre><RowValue :value="count"/></motion.pre> </template>["vue","animation"]intermediate2025-08-29 11:54:06�7�0 +!�G3%3Code Example 28vueanimations<script setup> const [scope, animate] = useAnimate() watch(scope, () => { const controls = animate([ [scope.current, { x: "100%" }], ["li", { opacity: 1 }] ]) controls.speed = 0.8 return () => controls.stop() }) </script> <template> <ul ref="scope"> <li /> <li /> <li /> </ul> </template>["vue","animation"]intermediate2025-08-29 11:54:06��/ +!�/%3Code Example 27vueanimations<motion.div v-for="(item,index) in items" :custom="index" :variants="variants" />["vue"]intermediate2025-08-29 11:54:06�g�. +!�G%3Code Example 26vueanimationsconst variants = { hidden: { opacity: 0 }, visible: (index) => ({ opacity: 1, transition: { delay: index * 0.3 } }) }["vue","animation","stagger"]intermediate2025-08-29 11:54:06�^�- +!� G3Code Example 25vueanimationsconst list = { visible: { opacity: 1, transition: { when: "beforeChildren", staggerChildren: 0.3, // Stagger children by .3 seconds }, }, hidden: { opacity: 0, transition: { when: "afterChildren", }, }, }["vue","animation","stagger"]advanced2025-08-29 11:54:06�B�, +!�u%3Code Example 24vueanimationsconst list = { visible: { opacity: 1 }, hidden: { opacity: 0 }, } const item = { visible: { opacity: 1, x: 0 }, hidden: { opacity: 0, x: -100 }, } return ( <motion.ul initial="hidden" whileInView="visible" :variants="list" > <motion.li :variants="item" /> <motion.li :variants="item" /> <motion.li :variants="item" /> </motion.ul> )["vue"]intermediate2025-08-29 11:54:06y�+ +!M3%3Code Example 23vueanimations:animate="['visible', 'danger']"["vue","animation"]intermediate2025-08-29 11:54:06�&�* +!�%3%3Code Example 22vueanimations<motion.div :variants="variants" initial="hidden" animate="visible" />["vue","animation"]intermediate2025-08-29 11:54:06p�) +!S%3Code Example 21vueanimations<motion.div :variants="variants" />["vue"]intermediate2025-08-29 11:54:06�!�( +!�/%3Code Example 19vueanimations<motion.button :initial="{ opacity: 0 }" :whileHover="{ backgroundColor: 'rgba(220, 220, 220, 1)' }" :whilePress="{ backgroundColor: 'rgba(255, 255, 255, 1)' }" :whileInView="{ opacity: 1 }" />["vue","gesture"]intermediate2025-08-29 11:54:06�Y�' +!� 3%3Code Example 18vueanimations<motion.circle :cx="500" :animate="{ cx: [null, 100, 200], transition={{ duration: 3, times: [0, 0.2, 1] }} }" />["vue","animation"]intermediate2025-08-29 11:54:06 ""�V������0�&�g�Y&�g�Y&&�P �Y �Y "��Z&�b�Z&�b�Z&�o���'��0done (�}J �YJ �YJ (�}J �YJ �YJ t�p�x�x�$�^�^�p�x�x�$�^�^uble�x�3�3�x�3�3s�g�3�3�g�3�3wn ��C�{�{�h ���y�y�V �J��z�z�8*�_bp"�fbp"�fbp"�d �`�b��� �M �*�bp"�sbp"�sbp"�/ �j �y �} �L �Z � �P �( �5 �f �L�~���7 �L �Q ��C�{�{�h ���y�y�V �J��z�z�8*�_bp"�fbp"�fbp"�d �]�b��� �M �*�bp"�sbp"�sbp"�/ �j �y �} �L �Z � �P �( �5 �f �Lrag� �7�U�� ���<�p�p � �7�f�y�y��� �z�zn� �7K� 6>E n� 6>E n� 6>E n�   ;� �7 � �7�LZ��.� 6HF n~� 6HF n~� 6HF n�� ��� �7 B� �7�4#"%�44#"%�44#"% B���i4#"%�<4#"%�<4#"% � �7�U�� ���<�p�p � �7�f�y�y��� �z�zn� �7K� 6>E n� 6>E n� 6>E n�   ;� �7 � �7�LZ��.� 6HF n~� 6HF n~� 6HF n�� ��� �7 B� �7�4#"%�44#"%�44#"% B���i4#"%�<4#"%�<4#"%  constraints"�Z!�!�!"�&#� &#� &#"�Z!�!�!"�&#� &#� &# directionlock�g�P�P�-�]�]�g�P�P�-�]�]elastic�?�T�T��a�a�?�T�T��a�agable"�w�z�J�z�J�z(�2���L���L��"�w�z�J�z�J�z(�2���L���L��ed�c�T�T�)�a�a�c�T�T�)�a�aing�.�T�T�t�a�a�.�T�T�t�a�amomentum�J�T�T��a�a�J�T�T��a�a transition�Q�T�T� �a�a@�,0#"%�0#"%�0#"%@�d0#"%�$0#"%�$0#"% �Q�T�T� �a�a@�,0#"%�0#"%�0#"%@�d0#"%�$0#"%�$0#"%wbacks� �n �n �$ �T �T � �n �n �$ �T �T er�C�IC�IC�C�IC�ICing�2�{�{�f�3�3�E�x�x " �|�l�2�l�2�l �2�{�{�f�3�3�E�x�x " �|�l�2�l�2�ln�m���m��iven � �ops�A�3�3�)�G�G�4���l�� �A�3�3�)�G�G�4���l��ts�-�p�p�-�p�puration�9���"'�6"'�6"'��p�p4�<y�!�[�my�!�[�my�!�[�� �0&8!^kE #�(�oA/�-/{( �~ �0&8!^kE #�(�oA/�-/{( �~ �0&8!^kE #�(�oA/�-/{( :�u�9�#��r�9�#��r�9�#��=�T�T� � %=�%=�%=L#�+�jNU��jNU��jNU�x�a�a�9%?�~%?�~%?�(�{<h# % y ��OC1J%s<h# % y ��OC1J%s<h# % y ��OC1J%�2�{�{�(�3<h# % y ��OC1L'w<h# % y ��OC1L'w<h# % y ��OC1L'��0�1�0�1�0�9���"'�6"'�6"'��p�p4�<y�!�[�my�!�[�my�!�[�� �0&8!^kE #�(�oA/�-/{( �~ �0&8!^kE #�(�oA/�-/{( �~ �0&8!^kE #�(�oA/�-/{( :�u�9�#��r�9�#��r�9�#��=�T�T� � %=�%=�%=L#�+�jNU��jNU��jNU�x�a�a�9%?�~%?�~%?�(�{<h# % y ��OC1J%s<h# % y ��OC1J%s<h# % y ��OC1J%�2�{�{�(�3<h# % y ��OC1L'w<h# % y ��OC1L'w<h# % y ��OC1L' s�C��#��#� ����O�� �C��#��#� ����O��ing��T�T4�V � ��N � ��N � ��C�a�a"� ��X ��X � ��a�a��T�T4�V � ��N � ��N � ��C�a�a"� ��X ��X �vcuqx74mh8wmjkmhiom2yli4 � � � �> �G �= �P �] �# �J � �p �g �v �z �I �W � �M �% �2 �c �I �0 �I �N � � � �> �G �= �P �Z �  �J � �p �g �v �z �I �W � �M �% �2 �c F2+��_YC1Y,-2�<<mU�+K� ""�V������0��I0dx v� v� v� v� v� v� v� v� v� v� v� v� v� v� v� v� v� v� v� v� v� v� v�ynamic�}�y�y�&�z�z �&���^��)�}�y�y�&�z�z �&���^��)ally� �{�{� �{�{e��y�y�?�%�%�R�z�z(�d� �@� �@� (�� �B� �B� � ���L�q�q��y�y��y�y�?�%�%�R�z�z(�d� �@� �@� (�� �B� �B� � ���L�q�q��y�yach�s���|�{�{��p�p.�7.�!@�;7.�!@�;7.�!@L�>C6�S�A(�VC6�S�A(�VC6�S�A(.�z7.�OB� 7.�OB� 7.�OB� �e�q�e�q�e"�q�S�!�S�!�S�/� � �C�s�p�s�p�s"�$�>��>��>�ts�+s�+s:�?�VN�!$��VN�!$��VN�!$�+�: �r �r �L� � ��X�X:�w�VN�!$�!�VN�!$�!�VN�!$� � � �s���|�{�{��p�p.�7.�!@�;7.�!@�;7.�!@L�>C6�S�A(�VC6�S�A(�VC6�S�A(.�z7.�OB� 7.�OB� 7.�OB� �e�q�e�q�e"�q�S�!�S�!�S�/� � �C�s�p�s�p�s"�$�>��>��>�ts�+s�+s:�?�VN�!$��VN�!$��VN�!$�+�: �r �r �L� � ��X�X:�w�VN�!$�!�VN�!$�!�VN�!$� � � rly��se�A�<A�<A�N�y�y4�<�?�;D�c�?�;D�c�?�;D�G�z�z�)�x�x�7� � �Y�^�^:�]6�#F�c]6�#F�c]6�#F"�% �A% �A% :�9]6�#F�k]6�#F�k]6�#F0�E�^#R�^#R�^#�A�<A�<A�N�y�y4�<�?�;D�c�?�;D�c�?�;D�G�z�z�)�x�x�7� � �Y�^�^:�]6�#F�c]6�#F�c]6�#F"�% �A% �A% :�9]6�#F�k]6�#F�k]6�#Fd� �[�[progress�q�_�_in�g(� (� ( �v*�W*�W*�.*�_*�_*(�F6�6�6�g(� (� ( �v*�W*�W*�.*�_*�_*out�=�.��.��. ��[�&�[�&�[�W�[�.�[�.�[� �_�_�=�.��.��. ��[�&�[�&�[�W�[�.�[�.�[out�O�y�y"�z�p(��p(��p(�H�z�z �w*�R*�R*�9�{�{�/*�Z*�Z*��P�P�O�y�y"�z�p(��p(��p(�H�z�z �w*�R*�R*�9�{�{�/*�Z*�Z*ier�r�M�h�M�h�M�/�G�G�u� �w� �w� �-� �� �� �r�M�h�M�h�M�/�G�G�u� �w� �w� �-� �� �� st��x�x�O�^�^��x�x�O�^�^ly�p�{�{�1�y�y�*�z�z�p�{�{�1�y�y�*�z�zng ���{�{�5�y�y8 ��z �rz �rz �.�z�z �i � �� �G�G@�?� �2� �2�  ��>! ��m �L �L  �� � �@�w� �:� �:�  � ��P �e /,J    )& /,J    )& /,J    ) � ���{�{�5�y�y8 ��z �rz �rz �.�z�z �i � �� �G�G@�?� �2� �2�  ��>! ��m �L �L  �� � �@�w� �:� �:�  �s��3�3 ����I����3�3 ����I��y���� �{�{��p�p�9���,�^�^�?�c�c�c��#���� �{�{��p�p�9���,�^�^�?�c�c�c��#dit�?�3�3�1�G�G����7�� �?�3�3�1�G�G����7��ing�� � �3�<�2�E�\�L��?�u�e�\�k�o�>�L��B��'�X�>�%�>�C�� � �3�<�2�E�\�I��?�u�e�\�k�o�>�L��B��'�X�>or��k��k��k�t�p�p��k��k��k�t�p�ps�}���}��ffectQ{Q{��x�xQ{Q{�/�^�^Q{Q{Q{Q{Q{Q{Q{Q{,Q{�D�Z�ZQ{Q{��x�xQ{Q{�/�^�^Q{Q{Q{Q{Q{Q{s��A �@�V �^ �^ �{��l�f� � �t �D �D ��c�c�6�!�)�))�%b�e� �vho�4y,@�sD�U�38�O ""�V������0 ���a�a��A �@�V �^ �^ �{��l�f� � �t �D �D ��c�c�6�!�)�) 0efficiently ortlessly ither�s�{�{�o�y�y:�s�{�<� �[�{�<� �[�{�<� �h�z�z"�H�<[�A�<[�A�<["��<[�N�<[�N�<["�yM�+� M�+� M�+�IF�GF�GF�s�)�)�bF�F�F"�1M�+�M�+�M�+�y���\�_�_�s�{�{�o�y�y:�s�{�<� �[�{�<� �[�{�<� �h�z�z"�H�<[�A�<[�A�<["��<[�N�<[�N�<["�yM�+� M�+� M�+�IF�GF�GF�s�)�)�bF�F�F"�1M�+�M�+�M�+ lasticity�8�T�T�~�a�a�8�T�T�~�a�aement$� �K�O�K�O�K�K(�/�!�/�!�/�!�E�Z��Z��Z:����)�/���)�/���)�(�|I�j0.�o1�y"#8-(�w)M:M }I�j0.�o1�y"#8-(�w)M:M }I�j0.�o1�y"#8-(�w)M:M :�U�C��?)�>�C��?)�>�C��?)4�(BBx.$�j(BBx.$�j(BBx.$r�n�ej7�W�X� �;V�ej7�W�X� �;V�ej7�W�X� �;H�|%".@�1%".@�1%".@�\R�;�+ a�%;=�,�+ a�%;=�,�+ a�%;=�"��E��E�:�O(BB�.$�l(BB�.$�l(BB�.$d�l9�Y�{X� �;�/l9�Y�{X� �;�/l9�Y�{X� �;B�4%"*F�P0%"*F�P0%"*F�P(��D�J�D�J�D�#����;9�D9�D9B�35!' I6p5!' I6p5!' I6�4�^ -  "5"< $^ -  "5"< $^ -  "5"< l�;4'/!6v4'/!6v4'/!6�[��Z�j (#{ (#{ (#�C�a�a$� �K�O�K�O�K�K(�/�!�/�!�/�!�E�Z��Z��Z:����)�/���)�/���)�(�|I�j0.�o1�y"#8-(�w)M:M }I�j0.�o1�y"#8-(�w)M:M }I�j0.�o1�y"#8-(�w)M:M :�U�C��?)�>�C��?)�>�C��?)4�(BBx.$�j(BBx.$�j(BBx.$r�n�ej7�W�X� �;V�ej7�W�X� �;V�ej7�W�X� �;H�|%".@�1%".@�1%".@�\R�;�+ a�%;=�,�+ a�%;=�,�+ a�%;=�"��E��E�:�O(BB�.$�l(BB�.$�l(BB�.$d�l9�Y�{X� �;�/l9�Y�{X� �;�/l9�Y�{X� �;B�4%"*F�P0%"*F�P0%"*F�P(��D�J�D�J�D�#����;9�D9�D9B�35!' I6p5!' I6p5!' I6�4�^ -  "5"< $^ -  "5"< $^ -  "5"< l�;4'/!6v4'/!6v4'/!6�[��Z�j (#{ (#{ (#s �.�{�{4 �p �[h� �[h� �[h �y�Z�Z*�h�M$� �M$� �M$�"�vw1Z�7w1Z�7w1Z4�!�14�,$�M�14�,$�M�14�,$.� � V!�8 � V!�8 � V!l�|E�8(�Ci`J�*}EpE�8(�Ci`J�*}EpE�8(�Ci`J�*}E#�:� � .�G �V!�: �V!�: �V!r�67�>(�EiJJ�*}Er7�>(�EiJJ�*}Er7�>(�EiJJ�*}E�U���8 �h� ��{�{�JJ�CJ�CJ( � �Q�?�Q�?�Q�cJ�zJ�zJ"�_�)_�)_�C�a�a �.�{�{4 �p �[h� �[h� �[h �y�Z�Z*�h�M$� �M$� �M$�"�vw1Z�7w1Z�7w1Z4�!�14�,$�M�14�,$�M�14�,$.� � V!�8 � V!�8 � V!l�|E�8(�Ci`J�*}EpE�8(�Ci`J�*}EpE�8(�Ci`J�*}E#�:� � .�G �V!�: �V!�: �V!r�67�>(�EiJJ�*}Er7�>(�EiJJ�*}Er7�>(�EiJJ�*}E�U���8 �h� ��{�{�JJ�CJ�CJ( � �Q�?�Q�?�Q�cJ�zJ�zJ"�_�)_�)_lipse��3�3�{�z�z �����3�3�{�z�z ���mil�H�C�>�C�>�C��C�F�C�F�C�R�_�_�H�C�>�C�>�C��C�F�C�F�Ckowal�}���5���}���5��ulate�� � �� � d��T�T�Z�a�a��T�T�Z�a�an�)���F8�E8�E8�%�p�p�R�3�3���D��D��0�x�x�] � � �V�G�G�K��F��F��N�^�^�Q�A~�~�~"�Le �0e �0e �X�6�$�6�$�6�0� � ��A�A�)���F8�E8�E8�%�p�p�R�3�3���D��D��0�x�x�] � � �V�G�G�K��F��F��N�^�^�Q�A~�~�~"�Le �0e �0e �X�6�$�6�$�6�0� � ables �x� � �x� � couraged� � d�O�{�{R�1� "�j#��e� "�j#��e� "�j#�"�( �t�| �t�| �t4�Z*!� *!� *!� ��"�T �f�p �f�p �f(�s�:$��:$��:$�.�-� �$-� �$-� 4!��a",�,�a",�,�a",(�+�:$��:$��:$� �u3�]�SCO/5� !!�W������2��T�_�_�n�N�N�O�{�{R�1� "�j#��e� "�j#��e� "�j#�"�( �t�| �t�| �t4�Z*!� *!� *!� ��"�T �f�p �f�p �f(�s�:$��:$��:$�.�-� �$-� �$-� 4!��a",�,�a",�,�a",(�+�:$��:$��:$0ended�[�T�T��a�a �W�[��[��[ �[�T�T��a�a �W�[��[��[vent�v� � � ,�.,�.,�v� � � ,�.,�.,ing�B�T�T�}�a�a�B�T�T�}�a�as��y�y�g�3�3��z�z"�Y�P�u�P�u�P�F�G�G"��P��P��P�\���n� � ��X�X���� �a�a��y�y�g�3�3��z�z"�Y�P�u�P�u�P�F�G�G"��P��P��P�\���n� � ��X�X���gine��������m�m�7�4�>�4�>�4�9�y�y�r�z�z�U� � ��������m�m�7�4�>�4�>�4�9�y�y�r�z�z�U� � hance�h�� �S�h�� �Sd��y�y�I�z�z��y�y�I�z�zssure�2�f�f�f�L�L�2�f�f�f�L�Ls�A� � �A� � ter�;���V�{�{��p�p�RB�9B�9B�KB�:B�:B"�  �6 �6 �=� � "�[ �C �C �'�� �{�/( � ������H� �Q� �Q� �_���1�_�_�;���V�{�{��p�p�RB�9B�9B�KB�:B�:B"�  �6 �6 �=� � "�[ �C �C �'�� �{�/( � ������H� �Q� �Q� �_��ed �m���!�c�c�>�m>�m>�m���!�c�c�>�m>�m>info�r�)�)�r�)�)s�@������ ��_��_�� �y�y�%�z�z�C�x�x0�}%"PU�.%"PU�.%"PU�Y�<� � �q�^�^(�5%"L[�}%"L[�}%"L[�}�.}�.}�@������ ��_��_�� �y�y�%�z�z�C�x�x0�}%"PU�.%"PU�.%"PU�Y�<� � �q�^�^(�5%"L[�}%"L[�}%"L[�}�.}�.}ire �i�G�G�;�i�G�G�;ly�o���/�p�p��y�y� �z�z � �o���/�p�p��y�y� �z�z �quals�I�O�O��\�\�<���t�� �I�O�O��\�\�<���t��sm�@�{�{�@�{�{pecially�$�y�y�]�z�z �`���$�y�y�]�z�z �`��tc�I��y��y��k�s�s�<�3�3�$�t�t��x�x��G�G�%�^�^��X�X�|�a�a�I��y��y��k�s�s�<�3�3�$�t�t��x�x��G�G�%�^�^��X�Xven�Z�y�y��z�z�3�^�^�)���Z�y�y��z�z�3�^�^�)��ly�Q�3�3 ����M����_�_�Q�3�3 ����M��th�7�h��a��Q�p�p h�7 a�Lh�7X!�)�dY*!�)�dY*!�)�dY h�7 h�7La�;!�)�oY)!�)�oY)!�)�oY a� a� h�7 h�7.�E�;�%�;�%�;*�^��<��<� a�h�7�h��a��Q�p�p h�7 a�Lh�7X!�)�dY*!�)�dY*!�)�dY h�7 h�7La�;!�)�oY)!�)�oY)!�)�oY a� a� h�7 h�7.�E�;�%�;�%�;*�^��<��<� a�s�/�� $��n�p�p $�4� s�'K�V s�'K�V s�'K�;�x�x $� $�4�R s�2K�X s�2K�X s�2K�Y�^�^ $� $�.$�j� a� a�  $�($�j�b_�b_�b $� $� $�$���_�_�/�� $��n�p�p $�4� s�'K�V s�'K�V s�'K�;�x�x $� $�4�R s�2K�X s�2K�X s�2K�Y�^�^ $� $�.$�j� a� a�  $�($�j�b_�b_�b $�target�B� � ��X�X�B� � ��X�Xr�^�{�{�n� � �;�X�X�e���^�{�{�n� � �;�X�Xy�Q�p�p�v�y�y"�'��y'��y'��/�z�z ����:�X�X�Q�p�p�v�y�y"�'��y'��y'��/�z�z ����:�X�Xone � ## � ##xample�~�{�{��p�p��y�y�!�z�z�g� � �b���! �~�{�{��p�p��y�y�!�z�z�g� � �b���!s* �5�*���a(��M�y�y,( ��]�n�n& �5�b�� ��$ �5�   0 �5�:�x�x�    0 �5����;   !����S ��8 ��|�^�^�} ��C�c�c; �5�� O4-�y�++ :�cF�!%bcF�F[J�?�/0I� � &&�V���R������(� �5�m��*.��5�H�H4��C�V�V��x.���%�% ��+��.��<�O�O����!* �5�*���a(��M�y�y,( ��]�n�n& �5�b�� ��$ �5�   0 �5�:�x�x�   0 �5����8   !����S ��8 ��|�^�^�} ��C�c�c; �5� �5�m��*.��5�H�H4��C�V�V��x.���%�% ��+��0exceeds�F���~���F���~��pt� �3�3� �3�3lusive�z��~�%�.�$�7�D� �1�g�W�N�]�a�0 �=��4� ��J�0��0�5�z��~�%�.�$�7�A��1�g�W�N�]�a�0 �=��4� ��J�0ist��x�x�0�^�^��x�x�0�^�^ing�Y�3�3�(�x�x�T�^�^�\������o�M�M�Y�3�3�(�x�x�T�^�^�\�����t$�5�t�t�\� �Y �Y *�, )�: )�: )�1"�% )�9 )�9 )�h�x�x�B��^�^�)���)�a���3�_�_$�5�t�t�\� �Y �Y *�, )�: )�: )�1"�% )�9 )�9 )�h�x�x�B��^�^�)���)�a��pand�g�gs�2�X�X�2�X�Xect�L�x�x��^�^�1���L�x�x��^�^�1��rience�l���l�� slaining�l�x�x� �^�^�l�x�x� �^�^icitly�n���n�)�)�n���n�)�)ore""ort�y0�B0�B0�y0�B0�B0ressed �� � �� � tend�3�x3�x3�3�x3�x3s����>�p�p�m�T�T�%�a�a����>�p�p�m�T�T�%�a�asion����1�w�w��l�l�R����1�w�w��l�l�Rvely�{�x�x��^�^�{�x�x��^�^remely�z�y�y�n�3�3�2�z�z�R�G�G�,���d���z�y�y�n�3�3�2�z�z�R�G�G�,���d��'yjjb21tyw5kijoibnb4ic15ig1vdglvbi1hasj9�/���L�{�{�+�p�p�/���L�{�{�+�p�pf00�x�3�3�2�T�T�O���m�a�a�W�c�c�F�� �x��c��c��x�3�3�2�T�T�O���m�a�a�W�c�c�F��ake�.� � �.� � lse�t���4�l�l��i�i��j�j�L�T�T�N�x�x�U�G�G��a�a��^�^�3���$%�h%�h%"�-.%�o.%�o.%�k���7�q�q�t���4�l�l��i�i��j�j�L�T�T�N�x�x�U�G�G��a�a��^�^�3���$%�h%�h%"�-.%�o.%�o.%�k��qse�e�e�e�e�e�e�e�e�e�e�e�e�e�e�e�e�e�e�e�e�e�e�shion ��G�G��G�Gt�G������Q�_�_�G�����eatureg���{�{�R�p�pg�g�g�g�g�g�g�g�g�g�g�g�g���{�{�R�p�pg�g�g�g�g�g�g�g�g�s*�G �W$ �W$ �W$�P�$P�$P�$�T�x�x�r�^�^� *�G �W$ �W$ �W$�P�$P�$P�$�T�x�x�r�^�^�ing�|�{�{� � � �Y�X�X����|�{�{� � � �Y�X�Xdisplacementmap�0���0��edback�_�3�3 �b����� �_�3�3 �b�����l�(���"R�+R�+R�e�p�p�/�y�y�*�z�z�>�x�x�\�^�^��W�*�W�*�W�<�W�2�W�2�W�(���"R�+R�+R�e�p�p�/�y�y�*�z�z�>�x�x�\�^�^��W�*�W�*�W�<�W�2�W�2�Wing�m�p�p �4���l���>�_�_�m�p�p �4���l��s��_�_s�+�x�x�I�^�^�+�x�x�I�^�^ gaussianblur�4�T�T�x�a�a�4�T�T�x�a�a�61�0-v� A10< Sp.�e� �F�S5�w�K%D�ZK + ""�V������0� 0feturbulence��3�3 �-���E���}�� ��3�3 �-���E���}��w��x�x�-�^�^��x�x�-�^�^ff4�<�-(�V��-(�V��-(�V����<�a�a4�<�-(�V��-(�V��-(�Vigma ��6U����6��6��6��6��6��6 ��6U����6��6��6��6��6��6lesize�Y�x�x�w�^�^�[�d�)�)�Y�x�x�w�^�^�[�d�)�)l�B���B��ter�@)�T)�T)��3�3�- �- �- �K+ �-+ �-+ �$���\���@)�T)�T)��3�3�- �- �- �K+ �-+ �-+ �$���\��ing  s�~�T�T�D�a�a�*���,� � �#�X�X �~�T�T�D�a�a�*���,� � �#�X�Xnd�w�{�{�w�{�{e������ish�U��� ���U��� ��ed�^�3�3�k�x�x��^�^�^�3�3�k�x�x��^�^s� �� �K����� � �� �K�����re�8�3�3�Bu�!Bu�!Bu����KBu�.Bu�.Bu�T�c�c�P� � "�[�+[�+[�x�)�1�)�1�) �8�3�3�Bu�!Bu�!Bu����KBu�.Bu�.Bu�T�c�c�P� � "�[�+[�+[�x�)�1�)�1�)d� � � �U�)�)�[�X�X� � � �U�)�)�[�X�Xs�-���e���-���e��ing�g�T�T�-�a�a� � � � �X�X �g�T�T�-�a�a� � � � �X�Xst�p���\�{�{�Y�y�y�R�z�z�;�&�0�&�0�&�Z�x�x�v�1�2�1�2�1��^�^�K���o�l�l��)�)� ���~�_�_�p���\�{�{�Y�y�y�R�z�z�;�&�0�&�0�&�Z�x�x�v�1�2�1�2�1��^�^�K���o�l�l��)�)� ��t�M�x�x�k�^�^�M�x�x�k�^�^xed(� �v�n �v�n �v(�E �b�h �b�h �b(� �v�n �v�n �v(�E �b�h �b�h �blex"�$ �k �k "�P �Q �Q  �"�$ �k �k "�P �Q �Q  �ibility����#�y�y�\�z�z����#�y�y�\�z�zle ip  ow�~�y�y��z�z�^�T�T��a�a�~�y�y��z�z�^�T�T��a�aubber������ocus����L�p�p�$�y�y��z�zF� �L  �; �L  �; �L  F�Y �W  �= �W  �= �W  �E�X�X����L�p�p�$�y�y��z�zF� �L  �; �L  �; �L  F�Y �W  �= �W  �= �W  �E�X�Xed�)�T�T�d�a�a�)�T�T�d�a�allow �o �> �o �>ing �7� � �5�_�_ �7� � r2�m n&�8K n&�8K n&�8"��wc�%�wc�%�wc\�%TF G�<�aKTF G�<�aKTF G�<�a�  �m:�/?� �^3�1 �G �:�/?� �^3�1 �G �:�/?� �^3�1 �G �Ed� #�X�0�-H�y�$�i#�X�0�-H�y�$�i#�X�0�-H�y�$� �%;�/?�E �`3` �G �;�/?�E �`3` �G �;�/?�E �`3` �G �2��n�i��n�i��n�il�4�R&R(R�e)�/OyW<4�R&R(R�e)�/OyW<4�R&R(R�e)�/OyW&* �7{D �N{D �N{D @)�p�I� |��I� |��I� |<�5l�8 � l�8 � l�8 2�<�q�t��q�t��q�t`�p�V&T(R�Q)�/OyWb�V&T(R�Q)�/OyWb�V&T(R�Q)�/OyW �q{�j{�j{*�HCd�mHHCd�mHHCd�m^�zYRx�V�3F�M�$YRx�V�3F�M�$YRx�V�3F�M� J;�B�{�{ �<�Q<�Q<, �T�8 j�8 j�8 �81�)1�)1^�2YRx�V�3F�M�,YRx�V�3F�M�,YRx�V�3F�M(�n*vn*vn*�8��6%�(7 J�t)>7 J�t)>7 J�t)* �A�0�.�0�.�02�m n&�8K n&�8K n&�8"��wc�%�wc�%�wc\�%TF G�<�aKTF G�<�aKTF G�<�a�  �m:�/?� �^3�1 �G �:�/?� �^3�1 �G �:�/?� �^3�1 �G �Ed� #�X�0�-H�y�$�i#�X�0�-H�y�$�i#�X�0�-H�y�$� �%;�/?�E �`3` �G �;�/?�E �`3` �G �;�/?�E �`3` �G �2��n�i��n�i��n�il�4�R&R(R�e)�/OyW<4�R&R(R�e)�/OyW<4�R&R(R�e)�/OyW&* �7{D �N{D �N{D @)�p�I� |��I� |��I� |<�5l�8 � l�8 � l�8 2�<�q�t��q�t��q�t`�p�V&T(R�Q)�/OyWb�V&T(R�Q)�/OyWb�V&T(R�Q)�/OyW �q{�j{�j{*�HCd�mHHCd�mHHCd�m^�zYRx�V�3F�M�$YRx�V�3F�M�$YRx�V�3F�M� J;�B�{�{ ^+P�"P�m-@E�Z?+U�"+]_ET!�~,&# ""�V������0��<�Q<�Q<., �T�8 j�8 j�8 �81�)1�)1^�2YRx�V�3F�M�,YRx�V�3F�M�,YRx�V�3F�M(�n*vn*vn*0force�u�3�3�j�G�G�!���Y�� �u�3�3�j�G�G�!���Y��ever �u�G�G�u�G�Gward�V�3�3 �x���0�� �V�3�3 �x���0��ur�E�3�3� ���F�c�c�R���3�)�)� �� �E�3�3� ���F�c�c�R���3�)�)� ��rame ��70� � ��70� � ��7 ��7 ��70�0� � � � ��7 ��70�0�0�0�0� � 0���u�u0�0�20��Y&q �*&q �*&q  ��70� � ��70� � ��7 ��7 ��70�0� � � � ��7 ��70�0�0�0�0� � 0���u�uloop�>� � � �a�a�>� � r ��6R����6��y�y��6"��6��r�r��6�1����X�X��6��6 ��6R����6��y�y��6"��6��r�r��6�1����X�X��6��6ates�K�x�x��^�^�K�x�x��^�^ usercontent� ���I�'�h�h�k��]�]�! �; �D �: �M �Z �  �G �} �m �d �s �w �F �T � �J �" �/ �` �F �- �F �K� ���I�'�h�h�k��]�]�! �; �D �: �M �W � �G �} �m �d �s �w �F �T � �J �" �/ �` �Feely� �y�y�Y�z�z� �y�y�Y�z�zom6�[| t��#| t��#| t��n4z��1�2�+�s1�2�+�s1�2�+:� 2�C��m 2�C��m 2�C�<�y+�H��:9+�H��:9+�H��:lzz�\ �Bh�7W�;� �j � �Bh�7W�;� �j � �Bh�7W�;� �j <�1,���p;,���p;,���p"��H�s�H�s�HB�Q`�[N��L`�[N��L`�[N��64z���>�8��>�8��>�8&z� '�'�'4�@�g �P�u�g �P�u�g �P:�}`�aN�|�@`�aN�|�@`�aN�|�V�%�@�%�@�%.�r�Z � �Z � �Z  z�2z�!0 � 0 � 0 z�!j�#j�#j z�px�/x�/xz��!�X�X.�*�b � �b � �b "z�?�BF�BF�B& z��d�d4z�jnYt*knYt*knYt*(z��$�j3�H�j3�H�j36�[| t��#| t��#| t��n4z��1�2�+�s1�2�+�s1�2�+:� 2�C��m 2�C��m 2�C�<�y+�H��:9+�H��:9+�H��:lzz�\ �Bh�7W�;� �j � �Bh�7W�;� �j � �Bh�7W�;� �j <�1,���p;,���p;,���p"��H�s�H�s�HB�Q`�[N��L`�[N��L`�[N��64z���>�8��>�8��>�8&z� '�'�'4�@�g �P�u�g �P�u�g �P:�}`�aN�|�@`�aN�|�@`�aN�|�V�%�@�%�@�%.�r�Z � �Z � �Z  z�2z�!0 � 0 � 0 z�!j�#j�#j z�px�/x�/xz��!�X�X.�*�b � �b � �b "z�?�BF�BF�Bull�w���{��d��d��O�T�T�s$�T��t��t��5�h���0�d� � ��a�a��x�h�x�h�x�q�c�c �w���{��d��d��O�T�T�s$�T��t��t��2�h���-�d� � ��a�a��x�h�x�h�x�q�c�cn��{�{��{�{ction(�G��#�=��#�=��#�uE�CuE�CuEd��\�?�� �k�n�\�?�� �k�n�\�?�� �k�/�z�z�H/1�/1�/1���4 � �$�P��$�P��$�P"�9�9�9H�N�e �q�U]N�e �q�U]N�e �q�U�l0� � J� J� (� �Y+� �Y+� �Y+(�=�'r��'r��'r.� s}`� s}`� s}`H�KN�e �q�]]N�e �q�]]N�e �q�]�`�,`�,`�B|�|�|f�$A�9D .A�9D .A�9D �+e�>Be�>Be�>(�G��#�=��#�=��#�uE�CuE�CuEd��\�?�� �k�n�\�?�� �k�n�\�?�� �k�/�z�z�H/1�/1�/1���4 � �$�P��$�P��$�P"�9�9�9H�N�e �q�U]N�e �q�U]N�e �q�U�l0� � J� J� (� �Y+� �Y+� �Y+(�=�'r��'r��'r.� s}`� s}`� s}`H�KN�e �q�]]N�e �q�]]N�e �q�]�`�,`�,` ality ��G�G�$���\����G�G�$���\�� s "���y�y}WB|�=$�c.�K.��u�9C ""�V������0�"��\�3�3�G�z�z "� "��e*�W*�W*"��"��~X�%X�%X"��d� �  "�"��1�X�X�*�_*�_* "�"��[��N"�e = �yS = �yS = �y "� "���y�y"��\�3�3�G�z�z "� "��e*�W*�W*"��"��~X�%X�%X"��d� �  "�"��1�X�X�*�_*�_* "� 0fundamentals�k � � �k � � rther�K���+�{�{�[�p�p�Q�Q�Q�?Q�Q�Q�>���v���K���+�{�{�[�p�p�Q�Q�Q�?Q�Q�Q�>���v��ture�S�x�x�q�^�^�S�x�x�q�^�^yi�r�x�x��^�^�r�x�x��^�^g�@�%�% �!���M�q�q��y�y �@�%�% �!���M�q�q��y�y3fxtpyrpji6khdfkego8yrbs08� ���=�{�{��p�p� ���=�{�{��p�pain�>���'�p�p�T�y�y�o�z�z�>���'�p�p�T�y�y�o�z�zs��T�T�T�a�a�U�{�{�e� � �2�X�X�\�� ��T�T�T�a�a�U�{�{�e� � �2�X�Xeneral� �y�y�E�z�z� �y�y�E�z�zly� �� �;�a�a� ��te �!�G�G�!�G�G d��T�T�W�a�a�-�{�_�_��T�T�W�a�a�-ion "�,o�Eo�Eo"�,o�Eo�Eoor L�Q �6 �6 L�Q �6 �6 sture"���������p�p �v�i�i�$&��H�j�j�&h� G:Q ?E�X�WG:Q ?E�X�WG:Q ?E�X�1�/f��G:Q ?E�c�VG:Q ?E�c�VG:Q ?E�c���: �+D%�dD%�dD%��)�)< �?�ET%v�ET%v�ET%�"���������p�p �v�i�i�$&��H�j�j�&h� G:Q ?E�X�WG:Q ?E�X�WG:Q ?E�X�1�,f��G:Q ?E�c�VG:Q ?E�c�VG:Q ?E�c���: �+D%�dD%�dD%��)�)< �?�ET%v�ET%v�ET%�s4�5�b�X�(�X�(�X�l #�.���0�0,�5�T�y�y�K�#��7�3�3 ��4�z�z�KL �5�+y��p!Ry��p!Ry��p!l�5�`�5 #� #�B �� |��{!Q|��{!Q|��{!�� ��5�tC(�5� ���g #� #�&#�iG<� G<� G< #�&#�i��@��@���j�� #� #� #� #�4�5�b�X�(�X�(�X�l #�.���0�0,�5�T�y�y�K�#��7�3�3 ��4�z�z�KL �5�+y��p!Ry��p!Ry��p!l�5�]�5 #� #�B �� |��{!Q|��{!Q|��{!�� ��5�tC(�5� ���g #� #�&#�iG<� G<� G< #�&#�i��@��@���j�� #�t�7�s ��1���7�HX  ��<�3�3�qU��kX�7�0�7�P�x�x��7� ��{� � �Z �����a�a�#���^�^�#��z�7�Z�7�) ��##�) ��4 ��f ��> ��K��g ��b ��I ��bB ��Ve s�se s�se s�g�7�s ��1���7�HX  ��<�3�3�qU��kX�7�0�7�P�x�x��7� ��{� � �Z �����a�a�#���^�^�#��z�7�Z�7�) ��##�) ��4 ��f ��> ��K��g ��b elementbyid��3�3(�!�5�7!�5�7!�5 �� � ��)�)�.�X�X ��3�3(�!�5�7!�5�7!�5 �� � ��)�)�.�X�Xprevious �k���k��s�.'�'�'�.'�'�'ters�a+�a+�a+�a+�a+�a+ingvelocity"�gq?�1q?�1q?ithub��� �p�p� �-�6�,�?�L��9�o�_�V�e�i�8�F� �<�e�)�)c�!�R�8��8�=��� �p�p� �-�6�,�?�I��9�o�_�V�e�i�8�F� �<�e�)�V(�.,eXUq0"A+T�N�j��  # !!�W������2��)c/�!�R�80given�c�x�x��^�^�c�x�x��^�^s�0���h���:�_�_�0���h��lobal�I�{�{ �\�G�G�I�{�{ �\�G�Got��y�y��y�yrade�x���x��ients�C�3�3�C�3�3phics�6�{�{�6�{�{y�;�y�y�;�y�yeat�#�{�{�l�p�p�"�g�g�[�h�h�7���q�c�c��}�}�]�7�X�X�8���#�{�{�l�p�p�"�g�g�[�h�h�7���q�c�c��}�}�]�7�X�X�8��id� �x�x�9�^�^�!V�+V�+V�YV�3V�3V � �x�x�9�^�^�!V�+V�+V�YV�3V�3Voup <�7 5� <�7 5� <�7<�7�Hi�i�i <�7 5�5��%i�wi�wi 5� <�7<�7���5���� <�7 5� <�7 5� <�7<�7�Hi�i�i <�7 5�5��%i�wi�wi 5� <�7<�7���5����ed�2�x�x�f�^�^�2�x�x�f�^�^wing����_�{�{�o� � �<�X�X�f������_�{�{�o� � �<�X�Xsapw�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w�w� uaranteed� �T�T�H�a�a� �T�T�H�a�aide �)�4X�� ��P�{�{�?�p�p�)�4���)�4�)�4�)�4�����,�G�G�)�4���)�4������������������ �)�4X�� ��P�{�{�?�p�p�)�4���)�4�)�4�)�4�����,�G�G�)�4���)�4������������s �'�7 d� �'�7 d� �'�7 �'�7 �'�7 d� d� �'�7 �'�7 d� d� d� d� d� d� d� d� d� �'�7 d� �'�7 d� �'�7 �'�7 �'�7 d� d� �'�7 �'�7 d� d� d� d� d� d�h�8�3�3�8�3�3alf�d�3�3�d�3�3nd�l���l��le�O�x�x�{�^�^�O�x�x�{�^�^rs��T�T�d�a�a�� � �a�X�X�$� � ��T�T�d�a�a�� � �a�X�X�$� � s� �x�x�>�^�^� �x�x�>�^�^ing�J��+�r'��� �J��+�r'��� ppen�8�3�3�u�x�x�*�G�G�!�^�^�x���[�)�)�0�� �8�3�3�u�x�x�*�G�G�!�^�^�x���[�)�)�0��s�\��w��w��� �V� �V� �\��w��w��� �V� �V� rdware�c�{�{�:�p�p�=�y�y�v�z�z�yR�:R�:R�c�{�{�:�p�p�=�y�y�v�z�z�yR�:R�:Rs��l�.�l�.�l�Y�{�{�k�z�x�z�x�z�d��b��b��$�;�z�;�z�;��[�!�[�!�[� �I �I .�!K�^�M�K�^�M�K�^�M�l���: �V �V .�MM�b�9�|M�b�9�|M�b�9� �c�c�g���>�m>�m>��X�X��l�.�l�.�l�Y�{�{�k�z�x�z�x�z�d��b��b��$�;�z�;�z�;��[�!�[�!�[� �I �I .�!K�^�M�K�^�M�K�^�M�l���: �V �V .�MM�b�9�|M�b�9�|M�b�9� �c�c�g���>�m>�m>��X�Xve�V��|��|���y�y�H�z�z�j�$�2�$�2�$�`��_��_��%�/�4�/�4�/���Z��Z���3�_�_�<�a�a�V��|��|���y�y�H�z�z�j�$�2�$�2�$�`��_��_��%�/�4�/�4�/���Z��Z��eader �v���v��ight����M�.�h�h�o� �]�]�%*�, �O �O � �O*�e �P �P �H �XH� �L�D��G��L�D��G��L�D��G� �+ �R � �xH�6�R�0��G��R�0��G��R�0��G�4 �~ � �Q �_ �# �U �- �: �kL�`# 7�# 7�# 7g �8 �Q �V����M�.�h�h�o� �]�]�%*�, �O �O � �O*�e �P �P �H �XH� �L�D��G��L�D��G��L�D��G� �( �R � �xH�6�R�0��G��R�0��G��R�0��G�4 �~ � �Q �_ �# �U �-/5/�]`�w,`�T3�G�,h+S�Cr�9�l ""�V������0�/ �: �kL�`# 7�# 7�# 7g0held�R�X�X�R�X�Xlo�Q�{�{�Q�{�{p� ��)�)� ��)�)re�#�{�{�#�{�{x�s2�I2�I2�,2�J2�J2�s2�I2�I2�,2�J2�J2iddenL�b�n)�' H�nb�n)�' H�nb�n)�' HF�?b�0)G V�b�0)G V�b�0)G V�y���-�c�c.�X "�3 "�3 ".� %�6 %�6 %L�b�n)�' H�nb�n)�' H�nb�n)�' HF�?b�0)G V�b�0)G V�b�0)G V�y���-�c�c.�X "�3 "�3 ".� %�6 %�6 %gh   er�`0�0�0�{�8�8.�<�d�+�Y�d�+�Y�d�+.�t�d�+�a�d�+�a�d�+ �`0�0�0�{�8�8.�<�d�+�Y�d�+�Y�d�+.�t�d�+�a�d�+�a�d�+st��x�x��x�xstorical �r�G�G�r�G�Gook�Z�y�y��z�z��T�T(�m�/�L�/�L�/Z�'{�Q{�Q{ �7���Z�y�y��z�z��T�T(�m�/�L�/�L�/Z�'{�Q{�Q{s }�7 v� }�7 v� }�7 }�7 }�7 v� v� v� }�7 }�7 v� }�7 v� }�7 v� }�7 }�7 }�7 v� v� v� }�7 }�7 v�rizontal �]� � �]� � urs �## �##ver�|�t�t%��J�M�M�!�y�y%���z�z< �f�& !f�& !f�& %�%�< �=i�/ "i�/ "i�/ %�%��N%�b     v     v     v%��V%�%�%�%��}%��|�t�t%��J�M�M�!�y�y%���z�z< �f�& !f�& !f�& %�%�< �=i�/ "i�/ "i�/ %�%��N%�b     v     v     v%��V%�%�ed� �o �o � �o �o nd �f�a�a�f�a�as�}�T�T�8�a�a�}�T�T�8�a�atart�Z�p�p �d�a�a�Z�p�p �d�a�aw�;��(�0 �c �c �C�p�p�C�3�3 ��G�G�x���l�{��{��{ �$�{��{��{�;��(�0 �c �c �C�p�p�C�3�3 ��G�G�x���l�{��{��{ �$�{��{��{ever�7�y�y�0�z�z�m�x�x�.�G�G� �^�^�7�y�y�0�z�z�m�x�x�.�G�G� �^�^ref�E�T�T� �a�a�E�T�T� �a�asla�u3�H3�H3�.3�I3�I3�u3�H3�H3�.3�I3�I3tml 4�-23�R�623�R�623�R "�z�lR�?�lR�?�lR:�&A ���VA ���VA ��"�3�^U�K�^U�K�^U �� �  4�-23�R�623�R�623�R "�z�lR�?�lR�?�lR:�&A ���VA ���VA ��"�3�^U�K�^U�K�^U �� � element �2�a�a�2�a�atps>�7�c�b IO�b IO�b I�xR��'.+ 7�k�;.+ 7�k�;.+ 7�k+6��n| �\| �\| �\=�7� �y�y�mB��<�?L %�{�?L %�{�?L %�]��0�7�K��D��D��+7<�7�.'�?�~'�?�~'�?�)5$�7�=���8$��G � � �T��@�G�G�"*��*��F��F��N6��p'�?�d'�?�d'�?�&��U�7�?���D0�7� �0�>�0�>�0�>��##k���R�{�{C(��+~=�T~=�T~=E:��6e �$�e �$�e �$r.��B�6;�k�6;�k�6;C0��i�0�F�0�F�0���� � � ��Y��C0��F:� :� :�_��8>�7�c�b IO�b IO�b I�xR��'.+ 7�k�;.+ 7�k�;.+ 7�k+6��n| �\| �\| �\=�7� �y�y�mB��<�?L %�{�?L %�{�?L %�]��0�7�K��D��D��+7<�7�.'�?�~'�?�~'�?�&5$�7�=���8$��G � � �T��@�G�G�"*��*��F��F��N6��p'�?�d'�?�d'�?�&��U�7�?���D0�7� �0�>�0�>�0�>��##k���R�{�{C(��+~=�T~=�T~=E:��6e �$�e �$�e �$r.��B�6;�k�6;�k�6;C0��i�0�F�0�F�0���� � � ybrid�����{�{�6�p�p�8�y�yL�*=MG&V��0*=MG&V��0*=MG&V��q�z�z�T� � �����{�{�6�p�p�8�y�yL�*=MG&V��0*=MG&V��0>#7�-���9$�$+.�j-9�u�v !!�W����� �2 �*=MG&V� �q�z�z�T� � 0i��r� �r� �r�Q�z�z (� �3�)�3�)�3(�X�3�1�3�1�3�*�H�H��r� �r� �r�Q�z�z (� �3�)�3�)�3(�X�3�1�3�1�3 convariants�p�T�T�+�a�a�p�T�T�+�a�ad�1�T�T�u�a�a����0�T�T �1�T�T�u�a�a����0�T�Teal�E�y�y�p�z�z'�E�y�y�p�z�z's�D�x�x�b�^�^�D�x�x�b�^�^f��{�{�1�p�p4�Y��t�B�.��t�B�.��t�BL��dpF"�Q'�n�dpF"�Q'�n�dpF"�Q':���4�E�m��4�E�m��4�E"�e :� :� ::�8V� �C)�#V� �C)�#V� �C)�[�%�g�%�g�%4�juc9�xuc9�xuc9"� :� :� :L�b: Q�>�-)�: Q�>�-)�: Q�>�-)j�"�\� $�D$��\� $�D$��\� $�D$�!)�d)�d)�d�)�)(�" *)�c *)�c *)j�Z�\� $�D$�%�\� $�D$�%�\� $�D$�5���e9�*9�*9��{�{�1�p�p4�Y��t�B�.��t�B�.��t�BL��dpF"�Q'�n�dpF"�Q'�n�dpF"�Q':���4�E�m��4�E�m��4�E"�e :� :� ::�8V� �C)�#V� �C)�#V� �C)�[�%�g�%�g�%4�juc9�xuc9�xuc9"� :� :� :L�b: Q�>�-)�: Q�>�-)�: Q�>�-)j�"�\� $�D$��\� $�D$��\� $�D$�!)�d)�d)�d�)�)(�" *)�c *)�c *)j�Z�\� $�D$�%�\� $�D$�%�\� $�D$rames�b�)�)�b�)�)mage�e�y�y�A�3�3��z�z�"�[�[�@�A�A�e�y�y�A�3�3��z�z�"�[�[�@�A�As� ���I�)�h�h�k��]�]�! �= �F �< �O�6�x�x�< �" �I � �o�T�^�^�\ �u �y �H �V � �L �$ �1 �b �H �/ �H �M� ���I�)�h�h�k��]�]�! �= �F �< �O�6�x�x�9 � �I � �o�T�^�^�\ �u �y �H �V � �L �$ �1 �b �Hg�/�x�x�M�^�^�/�x�x�M�^�^ mediately�w�3�3�v�x�x�"�^�^�$�]$�]$�S$�e$�e$ �w�3�3�v�x�x�"�^�^�$�]$�]$�S$�e$�e$plement��3�3�h�x�x��^�^����=�� ��3�3�h�x�x��^�^����=�� ation��x�x�2�^�^��x�x�2�^�^ort�Y��@� �3�*�s �3�*�s �3�*(� �A �A � �d�d�.�[�\X�y�\X�y�\X�Y� f� f� ��x�x�}��"�'�'�'�\�a�a�S�^�^�T�%�@�%�@�%��i�i�w � � �i�&�&� �Q �Q �7���$�~�~*�U&nYt*^&nYt*^&nYt*���I��I��Y��@� �3�*�s �3�*�s �3�*(� �A �A � �d�d�.�[�\X�y�\X�y�\X�Y� f� f� ��x�x�}��"�'�'�'�\�a�a�S�^�^�T�%�@�%�@�%��i�i�w � � �i�&�&� �Q �Q �7��ant �k�G�G�t�k�G�G�ted�U����{�{�U�3�3�{� � ��X�X�u�_�_�U����{�{�U�3�3�{� � ��X�Xing�`�{�{�`�{�{s�s�p�p�s�p�pssible�>�x�x�\�^�^�>�x�x�\�^�^rove��{�{�v�p�p�a�x�x��{�{�v�p�p�a�x�xments k k k k k k k k k k k k k k k k k k k k k k kn@��1mO6�OhleO6�OhleO6�Ohl�c"i�t"i�t"i<��&(��� 5(��� 5(��� ���1|IB�C^�UV�� IB�C^�UV�� IB�C^�UV��T���)�� �"�}uo-E"U`�i�)�� �"�}uo-E"U`�i�)�� �"�}uo-E"U`���fIB�GC^�I�)��IB�GC^�I�)��IB�GC^�I�)�0��1�A�`�v�`�v�`�8x��1��7�t=D�c� �7�t=D�c� �7�t=D�c�0��1�#&�i&�i&�,(�+�:H�w�:H�w�:H@�r+�Bj(�+�Bj(�+�Bj($���-�`��`��`l���z�;�t=D�c��;�t=D�c��;�t=D�c$���&�:&�:&:��1*� �\.� �\.� �\R��1�s]r�r"dh�]s]r�r"dh�]s]r�r"dh� ##>p�3B�; �5_A+�pv�Y+{m/�Q%r0B�? ""�V�����!�0�B�;B0��[7 !2A�[7 !2A�[7 !2��X�XN���s]r�r"dl�as]r�r"dl�as]r�r"dl�� � 0�9c�)Ec�)Ec�)��a�a@��1mO6�OhleO6�OhleO6�Ohl�c"i�t"i�t"i<��&(��� 5(��� 5(��� ���1|IB�C^�UV�� IB�C^�UV�� IB�C^�UV��T���)�� �"�}uo-E"U`�i�)�� �"�}uo-E"U`�i�)�� �"�}uo-E"U`���fIB�GC^�I�)��IB�GC^�I�)��IB�GC^�I�)�0��1�A�`�v�`�v�`�8x��1��7�t=D�c� �7�t=D�c� �7�t=D�c�0��1�#&�i&�i&�,(�+�:H�w�:H�w�:H@�r+�Bj(�+�Bj(�+�Bj($���-�`��`��`l���z�;�t=D�c��;�t=D�c��;�t=D�c$���&�:&�:&:��1*� �\.� �\.� �\R��1�s]r�r"dh�]s]r�r"dh�]s]r�r"dh� ##>p�3B�;B�;B0��[7 !2A�[7 !2A�[7 !2��X�XN���s]r�r"dl�as]r�r"dl�as]r�r"dl�� � 0inactive"�' �P �P "�' �P �P clude�N�{�{�~�{�{�� � �[�X�X����N�{�{�~�{�{�� � �[�X�Xd�P�g�g�n�M�M�P�g�g�n�M�Ms�b���b��ing ! �,� � ! �,� � orporate�T�� �x���W�e�e��m�m �T�� �x���W�e�e��m�mrectly��x�x�$�^�^��x�x�$�^�^reased�>�{�{�>�{�{dible�/�3�3�i�x�x��^�^�/�3�3�i�x�x��^�^ definitely�}�3�3�r�G�G�)�d��d��d�a�d�%�d�%�d �}�3�3�r�G�G�)�d��d��d�a�d�%�d�%�dpendent�E�{�{�1�y�y�7�3�3�j�z�z�E�{�{�1�y�y�7�3�3�j�z�z ly�y)�R)�R)��3�3�2)�S)�S)�y)�R)�R)��3�3�2)�S)�S)x"��\�\"�>�[�[ �`����{�{� ��"��\�\"�>�[�[ �`����{�{� ��ividual��y�y�P�z�z�0� � ��y�y�P�z�z�0� � ly�n�y�y�5�3�3�'�z�z�n�y�y�5�3�3�'�z�zustry� ���e�p�p �&�^�^� ���e�p�p �&�^�^ertia!�2E�pE�pE�>�T�T�y�a�a4�5E�v&Y�8E�v&Y�8E�v&Y4�mE�v&Y�@E�v&Y�@E�v&Y !�2E�pE�pE�>�T�T�y�a�a4�5E�v&Y�8E�v&Y�8E�v&Y4�mE�v&Y�@E�v&Y�@E�v&Yl��3�3 ����>�� ��3�3 ����>��finitely ��?�� �y��{�{�?�y�y�4 �* �* �x�z�z �T Q�% Q�% Q� Q�- Q�- Q��{�{�?�y�y�4 �* �* �x�z�z �T Q�% Q�% Q� Q�- Q�- Qluence�q���)���q���)��o .� �c �c �T�)�)��7�7.� �c �c �T�)�)��7�7rmation 0�z�z�z �M�)�)0�z�z�z �M�)�)itial.�X f� f� f.�  o�l o�l od�:ur�F @1yo�:�ur�F @1yo�:�ur�F @1yo�:(�}�+�g�%�+�g�%�+�gd�suro� B1yoZ�"uro� B1yoZ�"uro� B1yoZ�E57�*57�*57��G�G�}1<�z1<�z1<�"��:��`�O�b�\�`�O�b�\�`�O�b�Y�{�{:�8�`�O�i�]�`�O�i�]�`�O�i��a�a.�X f� f� f.�  o�l o�l od�:ur�F @1yo�:�ur�F @1yo�:�ur�F @1yo�:(�}�+�g�%�+�g�%�+�gd�suro� B1yoZ�"uro� B1yoZ�"uro� B1yoZ�E57�*57�*57��G�G�}1<�z1<�z1<�"��:��`�O�b�\�`�O�b�\�`�O�b�Y�{�{:�8�`�O�i�]�`�O�i�]�`�O�ily�j�y�y�c�z�z�j�y�y�c�z�zline�:�x�x�n�^�^�:�x�x�n�^�^nerhtml�a�y�y��z�z�a�y�y��z�zput(�"�X�6�J�X�6�J�X�6(�]�X�A�L�X�A�L�X�A 2 � 5"}5"}5" (�"�X�6�J�X�6�J�X�6(�]�X�A�L�X�A�L�X�Aside�!�)�)�!�)�)tall.�= �]�+ �]�+ �].�^ �J� �J� �J.�E �P� �P� �P.�= �]�+ �]�+ �].�^ �J� �J� �J.�E �P� �P� �Ped�W$�Y$�Y$�W$�Y$�Y$nce�l�p�p��y�y��������z�z�X�T�T�1���8)�c)�c)�<�G�G��a�a�k�c�c�$���;���s���#)�8)�8)�u�a�a�l�p�p��y�y��������z�z�X�T�T�1���8)�c)�c)�r0a7#l0CtYL�E@C�??$�0i=�i,.1x� !!�W�����"�2 ��<�G�G&��a�a�k�c�c�$���;���s��0instant �## �##ly�D�y�y�=�z�z�D�y�y�=�z�zead��T�T�[� � �^�a�a��T�T�[� � �^�a�aructions�o���o�� tegrations ��7 [� �� ��7 [� �� ��7 ��7 ��7 [� [� �� �� �� ��7 ��7 [� [� [� [� [� �� [� [� [� [� ��7 [� �� ��7 [� �� ��7 ��7 ��7 [� [� �� �� �� ��7 ��7 [� [� [� [� [� �� [� lligently��a�araction�/�x�x�M�^�^�/�x�x�M�^�^ s�I�y�y�t�z�z�I�y�y�t�z�z ve�{�x�x��^�^�{�x�x��^�^ested�^�x�x�|�^�^�^�x�x�|�^�^ ing�U�x�x�s�^�^�U�x�x�s�^�^polating�q���q��ruptible��x�x�6�^�^��x�x�6�^�^ ng�)�y�y�$�z�z��x�x�7�^�^�)�y�y�$�z�z��x�x�7�^�^ on*�q*�qsection �i� � (�E������i� � (�E����� observer�g�'�'�g�'�'entry"�4 � � "�4 � � s �^E�GE�GE�^E�GE�GEo�L5�e5�e5"��O��O��O*�l��n5M��n5M��n5��3�3 �7���|� � �(�)�)�o���L5�e5�e5"��O��O��O*�l��n5M��n5M��n5��3�3 �7���|� � �(�)�)�o��uitive� ���I�� � ���I�� ly�0���0��view'��)�{�{�&�y�y'��!�z�z� �T�T '��� � '��B�a�a'�'�'���'�^ /3 : ,0  =r /3 : ,0  =r /3 : ,0  ='��a'�'�'�'�'��)�{�{�&�y�y'��!�z�z� �T�T '��� � '��B�a�a'�'�'���'�^ /3 : ,0  =r /3 : ,0  =r /3 : ,0  ='��a'�options.� >�>�>.� >�>�>o�f�)�)�f�)�)s�o]6� ]6� ]64���@�)���@�)���@�).�'.�]!�E.�]!�E.�]!`��Bhl^�?�$�1=�Bhl^�?�$�1=�Bhl^�?�$�1�� �%�~�D �6�N�d@F'k�%�~�D �6�N�d@F'k�%�~�D �6�N�d@F'Z�Q�hn^_�2�A>�hn^_�2�A>�hn^_�2�A:�4ZhO�L�_ZhO�L�_ZhO�Lx�� �fHF88\$�LD� �fHF88\$�LD� �fHF88\$�L"�x�?�C�?�C�?d� � �c-YI�  � �c-YI�  � �c-YIN� D~�0 I`D~�0 I`D~�0 I`:�oZhO�W�aZhO�W�aZhO�Wp�J"�l2F88\$�L�R"�l2F88\$�L�R"�l2F88\$�L�0�Q�Q4�_?" W[ �|?" W[ �|?" W[ d�5�5@! �iQ�4$�:�5@! �iQ�4$�:�5@! �iQ�4$ �,5�!.�O.�O.�@r�/nr�/nr�/6�%h�}P<%h�}P<%h�}P<.�YsN7[�sN7[�sN7[d�m�5@! �iQ�4$�B�5@! �iQ�4$�B�5@! �iQ�4$"�X.�<.�<.�8�f�f� f�{f�{f"�ml9�/l9�/l9�o]6� ]6� ]64���@�)���@�)���@�).�'.�]!�E.�]!�E.�]!`��Bhl^�?�$�1=�Bhl^�?�$�1=�Bhl^�?�$�1�� �%�~�D �6�N�d@F'k�%�~�D �6�N�d@F'k�%�~�D �6�N�d@F'Z�Q�hn^_�2�A>�hn^_�2�A>�hn^_�2�A:�4ZhO�L�_ZhO�L�_ZhO�Lx�� �fHF88\$�LD� �fHF88\$�LD� �fHF88\$�L"�x�?�C�?�C�?d� � �c-YI�  � �c-YI�  � �c-YIN� D~�0 I`D~�0 I`D~�0 I`:�oZhO�W�aZhO�W�aZhO�Wp�J"�l2F88\$�L�R"�l2F88\$�L�R"�l2F88\$�L�0�Q�Q4�_?" W[ �|?" W[ �|?" W[ d�5�5@! �iQ�4$�:�5@! �iQ�4$�:�5@! �iQ�4$ �,5�!.�O.�O.�@r�/nr�/nr�/6�%h�}P<%h�}P<%h�}P<.�YsN7[�sN7[�sN7[d�m�5@! �iQ�4$�B�5@! �iQ�4$�B�5@! �iQ�4$"�X.�<.�<. animating��a�adone �T �/ �/ �T �/ �/ n�n�{�{�/�+�O�+�O�+�c��K��K��n�{�{�/�+�O�+�O�+�c��K��K�on�.�,�N�,�N�,"�Z��,��,��.�,�N�,�N�,"�Z��,��,�pen4�m��` � ��` � ��` (���j�p��j�p��j4�m��` � ��` � �<,A�}1+@/-2TI$-�U0�Q;�j&WJ !!�W�����#�2��` '(���j�p��j�p��j 0isselected�3�x�x�c�^�^�3�x�x�c�^�^visible�`�y�y�]�z�z�`�y�y�]�z�zt.�l?Jk*�l?Jk*�l?Jk*F�:UX� G ,�EUX� G ,�EUX� G ,:�.DV~R9xC� DV~R9xC� DV~R9xC^�f^�d>}gZ� �W�:�3^�d>}gZ� �W�:�3^�d>}gZ� �W�:l��>xef� �Z�6A�>xef� �Z�6A�>xef� �Z�6^�^�d>�=g\� w�M�?^�d>�=g\� w�M�?^�d>�=g\� w�M@�M�]!e �vM�]!e �vM�]!e ~�9_:���>"C�""]_:���>"C�""]_:���>"C�""4�aG�>+�<G�>+�<G�>+4�Y w�?�" w�?�" w�?(�� �(� �(� F�>M�]!Y �xM�]!Y �xM�]!Y � �+0_<� ��>"C�""0_<� ��>"C�""0_<� ��>"C�""4�M�/�;M�/�;M�/�H�d�:�d�:�dF�nC�O ��$�-C�O ��$�-C�O ��$�ns#��{�{�%� � .�)�'H�9�'H�9�'H0�EEhZyEEhZyEEhZF�&C�O ��$�5C�O ��$�5C�O ��$"� �)�!�)�!�)$�E��n_��n_��n.�l?Jk*�l?Jk*�l?Jk*F�:UX� G ,�EUX� G ,�EUX� G ,:�.DV~R9xC� DV~R9xC� DV~R9xC^�f^�d>}gZ� �W�:�3^�d>}gZ� �W�:�3^�d>}gZ� �W�:l��>xef� �Z�6A�>xef� �Z�6A�>xef� �Z�6^�^�d>�=g\� w�M�?^�d>�=g\� w�M�?^�d>�=g\� w�M@�M�]!e �vM�]!e �vM�]!e ~�9_:���>"C�""]_:���>"C�""]_:���>"C�""4�aG�>+�<G�>+�<G�>+4�Y w�?�" w�?�" w�?(�� �(� �(� F�>M�]!Y �xM�]!Y �xM�]!Y � �+0_<� ��>"C�""0_<� ��>"C�""0_<� ��>"C�""4�M�/�;M�/�;M�/�H�d�:�d�:�dF�nC�O ��$�-C�O ��$�-C�O ��$�ns#��{�{�%� � .�)�'H�9�'H�9�'H0�EEhZyEEhZyEEhZF�&C�O ��$�5C�O ��$�5C�O ��$em(�"n�nn�nn�@�3�3(�=~�_~�_~�L�x�x�!�6�V�6�V�6�x�^�^.�_%�0%�0%.�(�3(�3((�"n�nn�nn�@�3�3(�=~�_~�_~�L�x�x�!�6�V�6�V�6�x�^�^.�_%�0%�0%.�(�3(�3(s�+�y�y�j�3�3�[�z�z��x�x�B�^�^�+�y�y�j�3�3�[�z�z��x�x�B�^�^ration�b�6��6��6 ����<�� �b�6��6��6 ����<��s�E����� �t� �t� $�N�.�vP�.�vP�.�v(�E�L�"��L�"��L�"(�|�)�6�X�)�6�X�)�6(�~�.�5��.�5��.�54�V�_I��4�_I��4�_I���7�U�7�U�7��G�G4��cI�}�*�cI�}�*�cI�}"�*<�T�<�T�<�T:��f�e�j�>�f�e�j�>�f�e�j# �R�{�{:�7�f�e�j�F�f�e�j�F�f�e�j��_�_�}�f}�f}�E����� �t� �t� $�N�.�vP�.�vP�.�v(�E�L�"��L�"��L�"(�|�)�6�X�)�6�X�)�6(�~�.�5��.�5��.�54�V�_I��4�_I��4�_I���7�U�7�U�7��G�G4��cI�}�*�cI�}�*�cI�}"�*<�T�<�T�<�T:��f�e�j�>�f�e�j�>�f�e�j# �R�{�{:�7�f�e�j�F�f�e�j�F�f�e�jelf�!���!��janky�-�x�x�K�^�^�-�x�x�K�^�^vascript������"�$c�G�Uc�G�Uc�G�M� �,� �,� �Z�G�G�a���_�)�)���������"�$c�G�Uc�G�Uc�G�M� �,� �,� �Z�G�G�a���_�)�)���iu0u42jc��x�x�,�^�^��x�x�,�^�^ob�j��]��]����C��C��j��]��]����C��C�ined � ## � ##s �7*p�D�,�Q�,�Q�, � �7p�t�3�3 � �7 �7 �7pp � � � �7 �7ppppp �pppp �7*p�D�,�Q�,�Q�, � �7p�t�3�3 � �7 �7 �7pp � � � �7 �7ppppp �pdelivr"�;+�7+�7+"�;+�7+�7+ump�w�D�Ds�x�a�ast�J�Z�#�Z�#�Z��[� �[� �[��z�z��G�M�G�M�G�P�I��I��I�e-�~-�~-�K� � �=�_�_�J�Z�#�Z�#�Z��[� �[� �[��z�z��G�M�G�M�G�P�I��I��I�e-�~-�~-�K� � ify�!�x�x�M�^�^��!�x�x�M�^�^�content�-�x�x�Y�^�^�-�x�x�Y�^�^keep�a�x�x�41�o�gP�h/�@2D�Z. �P91 ""�V�����$�0��^�^�D���|���N�_�_ �a�x�x��^�^�D���|��0keeps�T�y�y�M�z�z�T�y�y�M�z�zy�W���3�p�p�c�y�y�^�z�z �I� �Q� �Q� �W���3�p�p�c�y�y�^�z�z �I� �Q� �Q� board��.�(�.�(�.�L�9�*�9�*�9 "�B��X��X� ��.�(�.�(�.�L�9�*�9�*�9 "�B��X��X�frame"�.�-.�-.��3�3"�.�..�.. �`�����"�.�-.�-.��3�3"�.�..�.. �`����� s�< �6�{�{ "�o �n �n  @�$�j� ^":� �j� ^":� �j� ^": "�j �o �o  4"�blu �Wlu �Wlu �+ 0�$`U<�`U<�`U<�q (�\`U<�`U<�`U< �< �6�{�{ "�o �n �n  @�$�j� ^":� �j� ^":� �j� ^": "�j �o �o  4"�blu �Wlu �Wlu �+ 0�$`U<�`U<�`U<�q (�\`U<�`U<�`U< ind�z�{�{�r�y�y�+�z�z�"�x�x�}�G�G�@�^�^�z�{�{�r�y�y�+�z�z�"�x�x�}�G�G�@�^�^etic�`�{�{�`�{�{owalski�I�C�>�C�>�C��C�F�C�F�C�S�_�_�I�C�>�C�>�C��C�F�C�F�Cl"�? � � "�? � � abel�l�y�y:�s� �� �� �g�z�z�l�y�y:�s� �� �� �g�z�zled�F7�~7�~7�F7�~7�~7rgely��x�x�6�^�^��x�x�6�^�^r��3�3�j� � ��3�3�j� � st�M�d�d��{�{� �l�l��a�a�M�d�d��{�{� �l�ls�4�{�{�4�{�{test�s��"�?�A�A�0�y�yF�* �{�u �{�u �{�^�z�z�� � T�S`T- eZ`T- eZ`T- e�s��"�?�A�A�0�y�yF�* �{�u �{�u �{�^�z�z�� � youtb ���  �w�  �w�  �o    F|� �4 �4    ��q |  ��9 �  �� 0 B   A(" $  >(  + 0@ I;n2&� 0 B   A(" $  >(  + 0@ I;n2&� 0 B   A(" $  >(  + 0@ I;n2&� �� |� �h |e0 D"  C(" %  >( + 0@ I;n2&0 D"  C(" %  >( + 0@ I;n2&0 D"  C(" %  >( + 0@ I;n2&|�   ��Z   �� � | �K� �  b ���  �w�  �w�  �o    F|� �4 �4    ��q |  ��9 �  �� 0 B   A(" $  >(  + 0@ I;n2&� 0 B   A(" $  >(  + 0@ I;n2&� 0 B   A(" $  >(  + 0@ I;n2&� �� |� �h |e0 D"  C(" %  >( + 0@ I;n2&0 D"  C(" %  >( + 0@ I;n2&0 D"  C(" %  >( + 0@ I;n2&|�   ��Z   �� � | �K� �  group 9�7 2� 9�7 2� 9�7(9�7�. �h �h  9�7 2�(2�� �M �M  2� 9�7 9�7 2� 9�7 2� 9�7 2� 9�7(9�7�. �h �h  9�7 2�(2�� �M �M  2� 9�7 9�7 2�id�0����m�mT�~;Z<U�u�(;Z<U�u�(;Z<U�u�KF�cZ>U�a�UZ>U�a�UZ>U�a�0����m�mT�~;Z<U�u�(;Z<U�u�(;Z<U�u�HF�cZ>U�a�UZ>U�a�UZ>U�aroot�"�t�t�T�Z�Z�"�t�t�T�Z�Zs �2�^�^ �w*�2�^�^ �w*croll�|�t�t�.�Z�Z�|�t�t�.�Z�Zzy ?�7 ?�7 ?�7 ?�7 ?�7 ?�7 ?�7�T� � "�5�)�)�m�X�X ?�7 ?�7 ?�7 ?�7 ?�7 ?�7 ?�7�T� � "�5�)�)�m�X�Xmotion =�76� =�76� =�7 =�7 =�76�6�6� =�7 =�76� =�76� =�76� =�7 =�7 =�7N/}m��q}S)l/+h�r��y�Z:9;�( ""�V�����%�0 �6�'6�6� =�7 =�76�0lead� � � � � � ing� ���f�p�p �'�^�^� ���f�p�p �'�^�^rn6I�7�>�xw�xw�x3��{�{RA�r�<�}aB% G�<�}aB% G�<�}aB%  I�7 A� I�7 I�7 I�7  A� A� A�I�7{���~I�7�x�4� �  ��X�X A�6I�7�>�xw�xw�x3��{�{RA�r�<�}aB% G�<�}aB% G�<�}aB%  I�7 A� I�7 I�7 I�7  A� A� A�I�7{���~I�7�x�4� �  ��X�X A�ed�#�{�{�#�{�{ve �B� � (� ������B� � (� �����info��)�)��)�)s�V����p�p��T�T$�"oV�QoV�QoV�X�=� � �;�a�a�Zk\� k\� k\�l���V����p�p��T�T$�"oV�QoV�QoV�X�=� � �;�a�a�Zk\� k\� k\�l��ing�^�)�)�^�)�)ft�.�y�y�g�z�z"�8�+��+��+��x�x"�s�+�+�+�+�+�5�^�^�A���<�)�) �.�y�y�g�z�z"�8�+��+��+��x�x"�s�+�+�+�+�+�5�^�^�A���<�)�)gacy�M�{�{�� � �M�{�{�� � ngth� �3�3�q�z�z�W�v�v� � �  �m��� �3�3�q�z�z�W�v�v� � � ss�[�c�c�y�I�I�H���$���2� � ��X�X�\�� �[�c�c�y�I�I�H���$���2� � ��X�X�\��ons�n�x�x� �^�^�n�x�x� �^�^t�\�{�{�v�z�z�S�D�D�\�{�{�v�z�z�S�D�Dhargic��3�3��G�G�B���z�� ��3�3��G�G�B���z��s�6�{�{�(�R(�R(�7(�8(�8(�6�{�{�(�R(�R(�7(�8(�8(vel�o�t�s��#��,�9��&�7�G�G��L�C�R�V�%�3�w�)���?�%� �%�*�o�t�s��#��,�6�|�&�7�G�G��L�C�R�V�%�3�w�)���?�%raged�R�x�x�p�^�^�R�x�x�p�^�^ing i��{�{j�D~:��7�J�&~:��7�J�&~:��7�J^��)A�%��i5>A��)A�%��i5>A��)A�%��i5>Aj�}~:�@�Y�[�3~:�@�Y�[�3~:�@�Y�[�J�x�x�v�^�^@�Q�[�68�$�[�68�$�[�68�*�S*�S*�k� � "��:=�6�:=�6�:=@� �[�9<�%�[�9<�%�[�9<�_�-_�-_�8 �K �K ��{�{j�D~:��7�J�&~:��7�J�&~:��7�J^��)A�%��i5>A��)A�%��i5>A��)A�%��i5>Aj�}~:�@�Y�[�3~:�@�Y�[�3~:�@�Y�[�J�x�x�v�^�^@�Q�[�68�$�[�68�$�[�68�*�S*�S*�k� � "��:=�6�:=�6�:=@� �[�9<�%�[�9<�%�[�9<�_�-_�-_brary�s��"� �N�/�N�/�N�-�j�j�`�{�{�p� � �=�X�X�g���s��"� �N�/�N�/�N�-�j�j�`�{�{�p� � �=�X�Xfetime� ���8�A�7�J�W��D�z�j�a�p�t�C�Q�R�{�{S�b� � U��/�X�XS�]�C�Y��S�C�H� ���8�A�7�J�T��D�z�j�a�p�t�C�Q�R�{�{S�b� � U��/�X�XS�]�Cke"�"�MvY�MvY�Mv�qP�,<BI�6+K� r<BI�6+K� r<BI�6+K� \�q�p�p5,�c�% �0�% �0�% � �?�E�p�E�p�E�N8��e �R�!�e �R�!�e �R�C �6��O��O��\8��h2%��@�h2%��@�h2%���E��@�I�j� � ;�)�G�G�8 �q��Q��Q��8�K�Z2%��4�Z2%��4�Z2%��%�K�c�cT�+�UI�UI�U�3�2� ��#L �'L �'L  �} � � �"�)�)� 2���# ��# ��# �L�2�t �x �x !�2,��` #�Z�` #�Z�` #�`"�"�MvY�MvY�Mv�qP�,<BI�6+K� r<BI�6+K� r<BI�6+K� \�q�p�p5,�c�% �0�% �0�% � �?�E�p�E�p�E�N8��e �R�!�e �R�!�e �R�C �6��O��O��\8��h2%��@�h2%��@�h2%���E��@�F�j� � ;�)�G�G�8 �q��Q��Q��8�K�Z2%��4�Z4A�WD�O�H.x�-EXK�7/��-�Q ""�V�����&�0�2%��4�Z2%��%(�K�c�cT�+�UI�UI�U�3�2� ��#L �'L �'L  �} � � �"�)�)� 2���# ��# ��# �L�20limited�p�{�{�p�{�{less� �{�{�+�p�p� �{�{�+�p�ps�-�x�x�K�^�^�-�x�x�K�^�^ne�e1�1�1�D8�B8�B8 0�{�l }�l }�l �e1�1�1�D8�B8�B8 0�{�l }�l }�l ar��{�{�A'�'�'�*�x�x�8� � ��.�.�Z�^�^(�]�e)�g�e)�g�e)� �{�{(��e)�o�e)�o�e)�u�q�q"�(�J��J��J��{�{�A'�'�'�*�x�x�8� � ��.�.�Z�^�^(�]�e)�g�e)�g�e)� �{�{(��e)�o�e)�o�e)k�m���I�{�{�6�p�p�&� � �X�)�)�F�X�X�m���I�{�{�6�p�p�&� � �X�)�)�F�X�Xed�A���,�F�{�{� �p�p �@6��q��q��q� ���.�9�s�l�s�l�s �A���,�F�{�{� �p�p �@6��q��q��q� ���.�9�s�l�s�l�sst��{�{�4�,4�,4�5C�C�C"��g1�d�g1�d�g1�=�^�^�W�l�l��s�s��{�{�4�,4�,4�5C�C�C"��g1�d�g1�d�g1�=�^�^�W�l�l��s�sener�Q�a�a s�t!�5!�5!�,!�B!�B!�F�x�x�_ �F �F �i �m �m  �t!�5!�5!�,!�B!�B!�F�x�x�_ �F �F �i �m �m ttle�>�x�x�C��E��E��>�x�x�C��E��E�ve�.�_�_�L�E�E�.�_�_�L�E�Ely�v�{�{�v�{�{l�9���U�{�{�A��q��q���Y�"�Y�"�Y�S�3�3�>��c��c��z�T�T�'�x�x�x�G�G�5�a�a�E�^�^�v���&� � �u�X�X��_�_�9���U�{�{�A��q��q���Y�"�Y�"�Y�S�3�3�>��c��c��z�T�T�'�x�x�x�G�G�5�a�a�E�^�^�v���&� � �u�X�Xm�p � � � �{�{��p�p�p � � � �{�{��p�poad� �{�{�i�p�p� �{�{�i�p�ping�n��#�6�)�)�n��#�6�)�)ck�Z�T�T� �a�a�Z�T�T� �a�aing�U�T�T��a�a�U�T�T��a�ag����\�p�p4�8 �&hJ �O �&hJ �O �&hJ .� �s��x�s��x�s� :�5 _,�H _,�H _,�<�o<�o<@�N _#!-�l _#!-�l _#!-$�R[o[o[�Uc�%]c�%]c�%����\�p�p4�8 �&hJ �O �&hJ �O �&hJ .� �s��x�s��x�s� :�5 _,�H _,�H _,�<�o<�o<@�N _#!-�l _#!-�l _#!-$�R[o[o[in�!�!ng�1�u�u��3�3� �x�x�?�^�^�V���6���n���1�u�u��3�3� �x�x�?�^�^�V���6���n��er�<���3�)�)�t���F�_�_�<���3�)�)�t��ok� �{�{��x�x��^�^� �{�{��x�x��^�^s�x�x�x��^�^�x�x�x��^�^p�B �) �) �A�G�G�d �u �u � �} �} �B �) �) �A�G�G�d �u �u � �} �} ses�;�W��W��W�v�b��b��b�;�W��W��W�v�b��b��bt�C���S�p�p�C���S�p�pve� �y�y� �y�yw �6�G�G�6�G�Gm�< � � �< � � ade�Z�{�{� �y�y�6�z�z �w���/���Z�{�{� �y�y�6�z�z �w���/��gic�s�x�x��^�^�s�x�x��^�^in�F���O�p�p�F�x�x�d�^�^�^�)�)�F���O�p�p�F�x�x�d�^�^�^�)�)ke��y�y��z�z�w�x�x�+�^�^�z����y�y��z�z�w�x�x�+�^�^�z��s�;�3�3�<�x�x�-�G�G�*�2�.�2�.�2�m���{���m�3�� �;�3�3�<�x�x�-�G�G�*�2�.�2�.�2�m���{���m�3��nage�C�x�x�a�^�^ �K�C�x�x�a�^�^ �Kment�'�'r�i�o�o�i�o�os�D� � �]�X�X�D� � �]�X�Xual�P�y�y�{�z�z�P�y�y�{�z�zly�E�p�p �  � �K�Q�Q�E�p�p �  �y�I�{�{�1�y�y�.+r���n�F$�:8�IE-3,-�j�J@+eE+i-hh�'>&+-H ""�V�����'�0��je�e�e�t�x�x��G�G��^�^� �I�{�{�1�y�y�je�e�e�t�x�x��G�G��^�^�0map F��,�y�y F� F� F� F� F� F� F� F� F�"F�B�8L�8L�8 F�F��b F��,�y�y F� F� F� F� F� F� F� F� F�value E� E� E� E� E� E� E� E� E� E� E� E�E��b E� E� E� E� E� E� E� E� E� E�rgin(*� �W �W (*� �W �W s��)�)��)�)k��x�x�&�^�^��x�x�&�^�^quee � �sk�d�y�y�@�3�3��z�z�d�y�y�@�3�3��z�zs4�Q�,� �g�,� �g�,� "&�_�0�04�T�g}#�e�g}#�e�g}#4� �g}#�m�g}#�m�g}# 4�Q�,� �g�,� �g�,� "&�_�0�04�T�g}#�e�g}#�e�g}#4� �g}#�m�g}#�m�g}#ter��{�{��{�{tch�=�x�x�i�^�^�=�x�x�i�^�^ed�'�)�)�'�)�)s��{�{�&�x�x�R�^�^��{�{�&�x�x�R�^�^ing� �x�x�'�^�^� �x�x�'�^�^h� ���D�{�{�A���Y� � � ���D�{�{�A���Y� � t�}�x�x��^�^�}�x�x��^�^x@�{�5!  �h�5!  �h�5!  @�3�5!  �p�5!  �p�5!  �Z� � @�{�5!  �h�5!  �h�5!  @�3�5!  �p�5!  �p�5!  �Z� � imum�1���i���1���i��y��x�x��^�^��x�x��^�^cp�+���H�{�{�'�p�p�+���H�{�{�'�p�peaning ��G�G��G�Gs�'�{�{�1 �K �K �2�x�x�l� � �w �X �X �P�^�^�{ �'�{�{�1 �K �K �2�x�x�l� � �w �X �X �P�^�^�{surably�o�x�x� �^�^�o�x�x� �^�^ed�o�y�y�(�z�z�f�T�T�!�a�a�o�y�y�(�z�z�f�T�T�!�a�aments �v� � �v� � ing�(�R(�R(�A(�8(�8(�(�R(�R(�A(�8(�8(et �e� � �e� � s �w%�g%�g%�w%�g%�g%mbers��hip�S�{�{�c� � �0�X�X�Z���S�{�{�c� � �0�X�Xthod�2�3�3�lF� F� F�2�3�3ice��T�T�X�a�a��T�T�X�a�arointeractions�R�x�x�~�^�^�R�x�x�~�^�^d��x�x�:�^�^��x�x�:�^�^dle �E� � �E� � ght(�@^�/�c^�/�c^�/(�^^�/�I^�/�I^�/�~(�@^�/�c^�/�c^�/(�^^�/�I^�/�I^�/�~rate y� y� y� y� y� y� y� y� y� y� y� y� y� y� y� y� y� y� y� y� y� y� y�ion x� x� x� x� x� x� x� x� x� x� x� x� x� x� x� x� x� x� x� x� x� x� x� lliseconds "�s�r�B�r�B�r"�s�r�B�r�B�rn@�y� #  �h� #  �h� #  @�1� #  �p� #  �p� #  @�y� #  �h� #  �h� #  @�1� #  �p� #  �p� #  i�@�{�{L� ?d�@�c�Y ?d�@�c�Y ?d�@�c� �> �> �@�{�{L� ?d�@�c�Y ?d�@�c�Y ?d�@�c� �> �> mum � �G�G����G��� �G�G����G��us �h� � �h� � tes �## �##rror�Z�3�3 �|���4�� �Z�3�3 �|���4��easing($�; �9 �9 d��_�_s�G�_�_x2�2��A��2�2��G�c�c2�2�2�2�2�2�2�2�2�2�2��A��2�2��G�c�c2�2�2�2�2�2�er�}���}��ing��3�3��3�3odal�d�y�y�_�z�z(�qU  �U  �U  (�!U  �iU  �iU  �d�y�y�_�z�z(�qU  �U  �U  (�!U  �iU  �iU  ern�/�{�{�[�3�3�/�{�{�[�3�3ified����M������M��rs ��]�]ytarget�J)�J)�J)�PJ)�J)�J)�J)�J)�J)�PJ)�J)�J)ule�4�{�{�4�{�{s"�\�P�P"�\�P�Pnitor� � x�H�*2+@�Q-?-S+�.+@�1T9K*-8+i�'�&2� �AB �z�-/I) ""�V�����(�0˂ 1� � � 0more&J�7�G���;0�S�A �^S�A �^S�A OBB��,�}aB%��}aB%��}aB%3@J�7��e�O�'$�e�O�'$�e�O�'�=>�=�m�>1�j�u�m�>1�j�u�m�>1�j�N6B�g�f��e$�f��e$�f��e#J�7��2J�7�f�A�(��A�(��A�(� &J�7�;�@�T�@�T�@�q�,$�2�P�k�P�k�PLB��2B��E�,�(��,�(��,�(�-$B��!��V��V� J�7����&,J�7�D� �Z� �Z� �M ��}�5� � j%� �)�)�.��X�Xf,B��(� �b� �b� ��s�x�x��+�0&J�7�G���;0�S�A �^S�A �^S�A OBB��,�}aB%��}aB%��}aB%3@J�7��e�O�'$�e�O�'$�e�O�'�=>�=�m�>1�j�u�m�>1�j�u�m�>1�j�N6B�g�f��e$�f��e$�f��e#J�7��2J�7�f�A�(��A�(��A�(� &J�7�;�@�T�@�T�@�n�,$�2�P�k�P�k�PLB��2B��E�,�(��,�(��,�(�-$B��!��V��V� J�7����&,J�7�D� �Z� �Z� �M ��}�5� � j%� �)�)�.��X�Xf,B��(� �b� �b� ��s�x�xphing��,r�,r�,��,r�,r�,st�n�{�{�G�y�y�i�3�3�r�z�z(� ��H�e��H�e��H�n�{�{�G�y�y�i�3�3�r�z�z(� ��H�e��H�e��Hly�7�3�3�)�G�G�w���/�� �7�3�3�)�G�G�w���/��tion�L"7,"7!5   1 (*   #!5   1 (*   #!5   1 (*   #�"D �X% <% < T  .  % &!NHB,>T  .  % &!NHB,>T  .  % &!NHB,>&D �j11$   ( $ "%0' $   ( $ "%0' $   ( $ "%0'  D �r"7,"7# f%E '! =#&"$LR9" / o<8 # f%E '! =#&"$LR9" / o<8 # f%E '! =#&"$LR9" / o<8  gD �(% <% <[�d � %�;W�E�0�d � %�;W�E�0�d � %�;W�E�b D �:11$ f%E '! /=#&"'LR// yB;$ f%E '! /=#&"'LR// yB;$ f%E '! /=#&"'LR// yB;D �n"7,"70 3%�KA:#Y" 4 0 3%�KA:#Y" 4 0 3%�KA:#Y" 4 ZD �N"7,"71 #"!N<#' &TO�/E >;�; #"!N<#' &TO�/E >;�; #"!N<#' &TO�/E >;�; :D �p "7,"7;7< "H7< "H7< "� !D R% <% < =0� =0� =0�D X% <% <'�&�u'�&�u'�&�lD �j11 0 3%�KA $Y" 2  0 3%�KA $Y" 2  0 3%�KA $Y" 2 D �,11"!M>#* &VOq/E >;�; "!M>#* &VOq/E >;�; "!M>#* &VOq/E >;�;D �X 11$< )H< )H< );D �*"7,"7%   8 .  94%   8 .  94%   8 .  96 D �X"7,"7;%".t�dGSA#%b4#"%N/$B, Y%".t�dGSA#%b4#"%N/$B, Y%".t�dGSA#%b4#"%N/$B, >9    D F% <% < �5D X % <% <q,1q,1q,&D ^% <% < |�S|�S|�S(D @% <% <n�%�%�KD ^% <% < �� �� �� &D �611$%".t�dGSA#%b4#"%N/$E0 Z%".t�dGSA#%b4#"%N/$E0 Z%".t�dGSA#%b4#"%N/$E0 D D F% <% <=�����X D ^% <% <*�<�<�&D �% <% <*6 VDt*-6 VDt*-6 VDt*D �*% <% <  ++ GF 2- ++ GF 2- ++ �)�T ""�V�����)�0�GF 2-D�L"7,"7!5   1 (*   #!5   1 (*   #!5   1 (*   #�"D �X% <% < T  .  % &!NHB,>T  .  % &!NHB,>T  .  % &!NHB,>&D �j11$   ( $ "%0' $   ( $ "%0' $   ( $ "%0'  D �r"7,"7# f%E '! =#&"$LR9" / o<8 # f%E '! =#&"$LR9" / o<8 # f%E '! =#&"$LR9" / o<8  gD �(% <% <[�d � %�;W�E�0�d � %�;W�E�0�d � %�;W�E�b D �:11$ f%E '! /=#&"'LR// yB;$ f%E '! /=#&"'LR// yB;$ f%E '! /=#&"'LR// yB;D �n"7,"70 3%�KA:#Y" 4 0 3%�KA:#Y" 4 0 3%�KA:#Y" 4 ZD �N"7,"71 #"!N<#' &TO�/E >;�; #"!N<#' &TO�/E >;�; #"!N<#' &TO�/E >;�; :D �p "7,"7;7< "H7< "H7< "�  D R% <% < =0� =0� =0�D X% <% <'�&�u'�&�u'�&�lD �j11 0 3%�KA $Y" 2  0 3%�KA $Y" 2  0 3%�KA $Y" 2 D �,11"!M>#* &VOq/E >;�; "!M>#* &VOq/E >;�; "!M>#* &VOq/E >;�;D �X 11$< )H< )H< );D �*"7,"7%   8 .  94%   8 .  94%   8 .  96 D �X"7,"7;%".t�dGSA#%b4#"%N/$B, Y%".t�dGSA#%b4#"%N/$B, Y%".t�dGSA#%b4#"%N/$B, >9    D F% <% < �5D X % <% <q,1q,1q,&D ^% <% < |�S|�S|�S(D @% <% <n�%�%�KD ^% <% < �� �� �� &D �611$%".t�dGSA#%b4#"%N/$E0 Z%".t�dGSA#%b4#"%N/$E0 Z%".t�dGSA#%b4#"%N/$E0 D D F% <% <=�����X D 0motionconfig A�7 9� A�7 9� A�7 A�7 A�7 9� 9� 9� A�7*A�7�  �r �r �,"9�� �z �z  A�7 9� A�7 9� A�7 A�7 A�7 9� 9� 9� A�7*A�7�  �r �r �,"9�� �z �z resolver�"�b�b�"�b�bvalue�y�� B��B�p�p�g�<�?�<�?�<"B���4��4��4� �1�K�1�K�1�I�� B� B��?�� B� B� B� B� B�B��` B� B�VB�� + ��t+ ��t+ ���y�� B��B�p�p�g�<�?�<�?�<"B���4��4��4� �1�K�1�K�1�I�� B� B��?�� B� B� B� B� B�B��`urnezubngsctz2ivwlqopus� ���*�{�{� �p�p� ���*�{�{� �p�punted�>�x�x�l�^�^�>�x�x�l�^�^se��T�T�Q�a�a��T�T�Q�a�avement�f1�1�1��T�T��9�9�Z�a�a"�C� �Z� �Z� "�{� �b� �b� �f1�1�1��T�T��9�9�Z�a�a"�C� �Z� �Z� "�{� �b� �b� s�Q�Q�Q�� � �>Q�Q�Q�%�Q�Q�Q�� � �>Q�Q�Q�%ing� �3�3�y�G�G�:���r�� � �3�3�y�G�G�:���r��zilla�z�{�{�P�3�3���D��D��.�x�x�[ � � �T�G�G�I��F��F��L�^�^�O�?~�~�~"�Je �0e �0e �V�6�$�6�$�6�.� � ��r�|$�zU/,�0WU !!�W�����*�2��A�A�z�{�{�P�3�3���D��D��.�x�x�[ � � �T�G�G�I��F��F��L�^�^�O�?~�~�~"�Je �0e �0e �V�6�$�6�$�6�.� � 0ms �\�G�G�\�G�Guch�1�{�{�j�3�3�1�{�{�j�3�3ltiple�n�{�{�y� �r� �r� �~�7~�7~�2�K�1�K�1�K��T�T��x�x�V�a�a�E�^�^(�=�h�3�h�h�3�h�h�3�P� � �iY�Y�Y(�u�h�3�p�h�3�p�h�3�n�{�{�y� �r� �r� �~�7~�7~�2�K�1�K�1�K��T�T��x�x�V�a�a�E�^�^(�=�h�3�h�h�3�h�h�3�P� � �iY�Y�Y(�u�h�3�p�h�3�p�h�3st�A�3�3�i�x�x�A�G�G��^�^����=���h �y �y �A�3�3�i�x�x�A�G�G��^�^����=��y� �{�{4�,"#�( �9"#�( �9"#�( ����/�T�T� �{�{4�,"#�( �9"#�( �9"#�( ����/�T�T component�z�y�y���E��E��z�y�y���E��E�self�{���3���{���3��name�,���I�{�{�(�p�p�>�E�p�E�p�E�S�T�T��a�a�K���&�0�{�{����B�_�_�,���I�{�{�(�p�p�>�E�p�E�p�E�S�T�T��a�a�K���&�0�{�{���d�K�y�y�b�3�3�F�z�z�C�_�_�K�y�y�b�3�3�F�z�zs�e�3�3�U� � �t���,�� �e�3�3�U� � �t���,��n�q�x�x��^�^�q�x�x��^�^da�f�x�x��^�^�f�x�x��^�^tive����+�3�3 �I�D�)�)��X�X����+�3�3 �I�D�)�)��X�Xly�R���R��ural�_�f�f�1�y�y�^�3�3�,�z�z��x�x�-�^�^�a�&�[�&�[�&��&�c�&�c�&�_�f�f�1�y�y�^�3�3�,�z�z��x�x�-�^�^�a�&�[�&�[�&��&�c�&�c�&ly�8�y�y�3�z�z�8�y�y�3�z�zvF�f-/!�U-/!�U-/!F�f-/!�U-/!�U-/!igation�>�T�T��a�a�>�T�T��a�aearest����<������<��t �M���M��ed�A�p�p�M�y�y�x�z�z�w(�R(�R(�y�G�G�)(�8(�8(�A�p�p�M�y�y�x�z�z�w(�R(�R(�y�G�G�)(�8(�8(ed�Z� � �r�X�X�Z� � �r�X�Xs�{�T�T�P�x�x�6�a�a�n�^�^�z�)�) �{�T�T�P�x�x�6�a�a�n�^�^�z�)�)gative��3�3 �/���O�)�)�g�� ��3�3 �/���O�)�)�g��sted��x�x�-�^�^��x�x�-�^�^t�<�c�c�<�c�cver�i���!���i���!��w�P� �r� �r� (�� ��� ��� �� �k��k��k4� '�g�@ '�g�@ '�g4�A )�W�4 )�W�4 )�W�l���$��"�u�*)��*)��*)"�s��V��V��P� �r� �r� (�� ��� ��� �� �k��k��k4� '�g�@ '�g�@ '�g4�A )�W�4 )�W�4 )�W�l���$��xt�1���y��{�{b�A�Z�Z=�� ��&�(�x�x�!�y�!,�w E�[ E�[ E�n�F�F�^�^�A�M�R��.�t�&�~� �9�!� �"�F�a�a�$�1���y��{�{b�A�Z�Z=�� ��&�(�x�x��v�!,�w E�[ E�[ E�n�F�F�^�^�A�M�R��.�t�&�~� �9�!o�0���'�{�{�i�3�3�J�T�T� �x�x�M�G�G��a�a�(�^�^�;n�n�n �##�2�)�)�sn�n�n�r�x�x�E�_�_�0���'�{�{�i�3�3�J�T�T� �x�x�M�G�G��a�a�(�^�^�;n�n�n �##�2�)�)�sn�n�n�r�x�xn ��G�G ����i�a�a ��G�Ge�a �a �a �;a �a �a �4� � �a �a �a �;a �a �a �4� � rmal� ���C�p�p�_�3�3�c�T�T�v%�o%�o%�@�G�G��a�a�.%�@%�@%�>����� � ���C�p�p�_�3�3�c�T�T�v%�o%�o%�@�G�G��a�a�.%�@%�@%�>�����t�q�p�p�g�y�y�q�3�3��z�z.�y�"�c�Z�"�c�Z�"�c�\��.�%�'"�M�N�'"�M�N�'"�M��c�c�q�p�p�g�y�y�q�3�3��z�z.�y�"�c�Z�"�c�Z�"�c�\��.�--�V� �?.�\IS+,h�D,M10�,gX.-�-��+W�R ""�V�����+�0��%�'"�M�N�'"�M�N�'"�M(��c�c0note�^���b�{�{�1�[�["�X{��}{��}{�4�p��g�L���g�L���g�L"�{��~{��~{��o��G��G��p�x�x�W�J�J�*��I��I���^�^�.���U�)�)�f���,;�I;�I;�^���b�{�{�1�[�["�X{��}{��}{�4�p��g�L���g�L���g�L"�{��~{��~{��o��G��G��p�x�x�W�J�J�*��I��I���^�^�.���U�)�)�f��ing--vel�i�_�_w�S���f2�I2�I2�a�z�z�� � �[���S���f2�I2�I2�a�z�z�� � pm�M��(�kA/�dA/�dA/�V�o�o�M��(�kA/�dA/�dA/�V�o�ojs������th�I� � �`�X�X�I� � �`�X�Xull�\���N�(N�(N�N�)N�)N��T�T�#���[�c�c �\���N�(N�(N�N�)N�)N��T�T�#���[�c�cmber O�7 G�O�7o�y�y(�E�h�3��h�3��h�3G�S�z�z O�7$O�7� �x�x�T    O�7�+I�CI�CI�<�G�G G�G��a�^�^ G�O�7�h��"O�7��D�=�D�=�D��s� s� s�� � ��)�)�Q�X�X"G��k�D�E�D�E�D�g�g�g��_�_�a�a�a O�7 G�O�7o�y�y(�E�h�3��h�3��h�3G�S�z�z O�7$O�7� �x�x�T    O�7�+I�CI�CI�<�G�G G�G��a�^�^ G�O�7�h��"O�7��D�=�D�=�D��s� s� s�� � ��)�)�Q�X�X"G��k�D�E�D�E�Ds�O�{�{(�h�}�l�}�l�}(�L�g��9�g��9�g�(�!�}�m�}�m�}�� � �S��� ���x�q�q�O�{�{(�h�}�l�}�l�}(�L�g��9�g��9�g�(�!�}�m�}�m�}�� � �S��� ��tocolor� �z �z erical �O�G�G�j�a�a �O�G�Gxt(�[ �L �L (�[ �L �L object�| �r �r ���&��&��^�T�T��m�m�z�G�G��a�a�;���@�)�)�s���| �r �r ���&��&��^�T�T��m�m�z�G�G��a�a�;���@�)�)�s��3d��3�3��3�3s�K�{�{.�N��$�y��$�y��$�]�G�G�K�{�{.�N��$�y��$�y��$�]�G�Gserver�F���F��taining��{�{��{�{ccur�.�3�3� �G�G�n���&�� �.�3�3� �G�G�n���&��f6� ,c��s ,c��s ,c��T� $�L;5w&X-p $�L;5w&X-p $�L;5w&X-B�9�.8E��Ga�.8E��Ga�.8E��Gr�r�$<�7E(�b]x�F�C�$<�7E(�b]x�F�C�$<�7E(�b]x�F�� )�i,u�'k�jYG*:" I5 �U5 :*#!Q (�B,u�'k�jYG*:" I5 �U5 :*#!Q (�B,u�'k�jYG*:" I5 �U5 :*#!Q (j�*�%<�7EH"�d]xf�{�%<�7EH"�d]xf�{�%<�7EH"�d]xfL�r = Bc�4lg�P = Bc�4lg�P = Bc�4lg��`"�1$�7�= D ]�C�5"�1$�7�= D ]�C�5"�1$�7�= D ]�C(�p� �h� �h� ~�Q�#$�!%,4 /c�#$�!%,4 /c�#$�!%,4 /:�~Aa-#�,Aa-#�,Aa-#L�* @ Bc�4qm�O @ Bc�4qm�O @ Bc�4qm�� "�9$�!�= D ]�C�)"�9$�!�= D ]�C�)"�9$�!�= D ]�C(�(� �=� �=� .�C�*1=�r�*1=�r�*1=�,�q�!1Q*<,+ K7H�;� $NS$�1�!1Q*<,+ K7H�;� $NS$�1�!1Q*<,+ K7H�;� $NS$ �d�9z-Sz-Sz-"��]�+�]�+�]<�+P�>�? ?P�>�? ?P�>�? "�*��D��D��,�)�!1Q*<,+ K7H�;� $NS$�9�!1Q*<,+ K7H�;� $NS$�9�!1Q*<,+ K7H�;� $NS$ �)� � *�jN)jN)jN:�\,)��\,)��\,)�6� �Bu ��Bu ��Bu 6� ,c��s ,c��s ,c��T� $�L;5w&X-p $�L;5w&X-p $�L;5w&X-B�9�.8E��Ga�.8E��Ga�.8E��Gr�r�$<�7E(�b]x�F�C�$<�7E(�b]x�F�C�$<�7E(�b]x�F�� )�i,u�'k�jYG*:" I5 �U5 :*#!Q (�B,u�'k�jYG*:" I5 �U5 :*#!Q (�B,u�'k�jYG*:" I5 �U5 :*#!Q (j�*�%<�7EH"�d]xf�{�%<�7EH"�d]xf�{�%<�7EH"�d]xfL�r = Bc�4lg�P = Bc�4lg�P = Bc�4lg��`"�1$�7�= D ]�C�5"�1$�7�= D ]�C�5"�1$�7�= D ]�C(�p� �h� �h� ~�Q�#$�!%,4 /c�#$�!%,4 /c�#$�!%,4 /:�~Aa-#�,Aa-#�,Aa-#L�* @ Bc�4qm�O @ Bc�4qm�O @ Bc�4qm�� "�9$�!�= D ]�C%�cd,���g&0�T](V ""�V�����,�02��)"�9$�!�= D ]�C�)"�9$�!�= D ]�C((�(� �=� �=� .�C�*1=�r�*1=�r�*1=�,�q�!1Q*<,+ K7H�;� $NS$�1�!1Q*<,+ K7H�;� $NS$�1�!1Q*<,+ K7H�;� $NS$ �d�9z-Sz-Sz-"��]�+�]�+�]<�+P�>�? ?P�>�? ?P�>�? "�*��D��D��,�)�!1Q*<,+ K7H�;� $NS$�9�!1Q*<,+ K7H�;� $NS$�9�!1Q*<,+ K7H�;� $NS$ �)� � 0off�\�)�)�\�)�)ers�_�p�p�o�O�,�O�,�O�'�P�,�P�,�P�D�b�b�&���b�H�H�^�c�c�_�p�p�o�O�,�O�,�O�'�P�,�P�,�P�D�b�b�&���b�H�H�^�c�cset�x�{�{� (�R(�R(��J�J�J�J�J.�&���T���T���?(�8(�8(�M��K��K��x�{�{� (�R(�R(��J�J�J�J�J.�&���T���T���?(�8(�8(�M��K��K�s (+�#� �[� �[� (+�#� �[� �[� ten��x�x� �G�G�7�^�^�a� � ��x�x� �G�G�7�^�^�a� � ld�4�3�3�1 �_ �_ �] �C �C �4�3�3�1 �_ �_ �] �C �C n�F����p�p"� $�l�m$�l�m$�l(�h��g�;��g�;��g"�C$�,�.$�,�.$�,L�BJ(5�e!g�J(5�e!g�J(5�e!g@��_ M�^�M�!�_ M�^�M�!�_ M�^�M.�# 0��: 0��: 0���G�GL�}J(5�p!g�J(5�p!g�J(5�p!g@�;�I M�^�M��I M�^�M��I M�^�M���L� �`�O�Cj�~�!�`�O�Cj�~�!�`�O�Cj�~ �1�8VH�qVH�qVH"�@�����"�3 V�L V�L VR�X�`�O�Cj���%�`�O�Cj���%�`�O�Cj���w�� �� ��U�_�_<�QF�e]F�e]F�e�F����p�p"� $�l�m$�l�m$�l(�h��g�;��g�;��g"�C$�,�.$�,�.$�,L�BJ(5�e!g�J(5�e!g�J(5�e!g@��_ M�^�M�!�_ M�^�M�!�_ M�^�M.�# 0��: 0��: 0���G�GL�}J(5�p!g�J(5�p!g�J(5�p!g@�;�I M�^�M��I M�^�M��I M�^�M���L� �`�O�Cj�~�!�`�O�Cj�~�!�`�O�Cj�~ �1�8VH�qVH�qVH"�@�����"�3 V�L V�L VR�X�`�O�Cj���%�`�O�Cj���%�`�O�Cj���w�� �� �ce �f�{�{��L�L(#�S�t� �t� �t��)�)(%�l�*�!�*�!�*�+�a�a �f�{�{��L�L(#�S�t� �t� �t��)�)(%�l�*�!�*�!�*lick�E��e��e��E��e��e� directionlock�l�T�T�l�T�Te� �m�{�{�2��5,�D�h�w�X�h�w�X�h�w�?�4�G,�{�0#^�M�0#^�M�0#^�D�K���1�A�w�g*�-�#^�G�#^�G�#^d��c�c�*�q�m���[�##�t�O�{�{S�_� � U� �)�)�E���K��K�S�%���-�@  � �K9�K9�KS�)�8)�8)C�E� �m�{�{�2��5,�D�h�w�X�h�w�X�h�w�?�4�G,�{�0#^�M�0#^�M�0#^�A�K���.�A�w�g*�-�#^�G�#^�G�#^d��c�c�*�q�m���[�##�t�O�{�{S�_� � U� �)�)�E���K��K�S�%���-�@hoverend�+�T�T�+�T�Tstart����)�T�T����)�T�Tly�1�C�/�C�/�C��y�y"�I�F�Z�F�Z�F�H�z�z��u�a�u�a�u��x�x�L� � �J��c��c��E�^�^�V������o�5�%�5�%�5�1�C�/�C�/�C��y�y"�I�F�Z�F�Z�F�H�z�z��u�a�u�a�u��x�x�L� � �J��c��c��E�^�^�V������o�5�%�5�%�5mount�n �p �p �n �p �p seenter��T�T�A�a�a��T�T�A�a�aleave��T�T�C�a�a��T�T�C�a�apan�c�T�T�c�T�Tointerdowncapture�o �M �M �5�a�a�o �M �M �5�a�aress �r�a�a�r�a�acancel �|�a�a�|�a�astart �k�a�a�k�a�atap�7�T�T�7�T�Tcancel�A�T�T�A�T�Tstart�0�T�T�0�T�Tunmount�o�j�j�o�j�jpdate.�/ � �~ � �~ � .�/ � �~ � �~ � pacity�a s� s� s"�=+�3�!+�3�!+�3"�* ��d ��d ���?�pY_�"5�KBt�0�pY_�"5�KBt�0�pY_�"5�KBt�(�s �)D)�w�z <35" #<)M:M$s �)D)�w�z <35" #<)M:M$s �)D)�w�z <35" #<)M:M$��x�0Ya�"5kQw�>�0Ya�"5kQw�>�0Ya�"5kQw�$�x�x"�Fg�'g�'g�T�^�^"�~h�wh�wh�[ � � X�U �T� . �8 �T� . �8 �T� . �|�*�S*�S*��d�G�d�G�~�5�?/UX��:&#�!/�.!1/A#9 $$�V�T�����-�,��dX�  �T�" 2 �: �T�" 2 �: �T�" 2 � �y �y "�4�F�F�a s� s� s"�=+�3�!+�3�!+�3"�* ��d ��d ���?�pY_�"5�KBt�0�pY_�"5�KBt�0�pY_�"5�KBt�(�s �)D)�w�z <35" #<)M:M$s �)D)�w�z <35" #<)M:M$s �)D)�w�z <35" #<)M:M$��x�0Ya�"5kQw�>�0Ya�"5kQw�>�0Ya�"5kQw�$�x�x"�Fg�'g�'g�T�^�^"�~h�wh�wh�[ � � X�U �T� . �8 �T� . �8 �T� . �|�*�S*�S*��d�G�d�G�dX�  �T�" 2 �: �T�" 2 �: �T�" 2 0open�T��f��f�.�{��H{��H{��T��f��f�.�{��H{��H{�ed�t�{�{�t�{�{s�e�x�x��^�^�e�x�x��^�^posed��T�T�T�a�a��T�T�T�a�aing�t�3�3�i�G�G� ���X�� �t�3�3�i�G�G� ���X��timal �q� � � � � �q� � � � � ised��a�aon�J�y�y�bp#�$p#�$p#�E�z�z(�X&!S�j&!S�j&!S�S���A�)�)����J�y�y�bp#�$p#�$p#�E�z�z(�X&!S�j&!S�j&!S�S���A�)�)���ally�v�3�3 ��u� �u� �u�b� � �w�X�X�=�u��u��u �v�3�3 ��u� �u� �u�b� � �w�X�X�=�u��u��us�-�{�{ &�:�Hx �N�Hx �N�Hx �N &��[a�3a�3a(�� � : �4  ��  ��  � &� &�&��?�c�c� �I�M�x�x�� � -�`�)�)�l�X�X &��-�{�{ &�:�Hx �N�Hx �N�Hx �N &��[a�3a�3a(�� � : �4  ��  ��  � &� &�&��?�c�c� �I�M�x�x�� � -�`�)�)�l�X�X &�r(�jE}�=�E}�=�E}�=N�l: �._Ot: �._Ot: �._O(�*�Ok�'�Ok�'�Ok(�|�) G��) G��) G~ �x�|�%9�j�Z� @���|�%9�j�Z� @���|�%9�j�Z� @�(�5�i G�C�i G�C�i GR�Q0=�!+'��0=�!+'��0=�!+'�4�3a�R�W�ba�R�W�ba�R�W$�!�x�x�1$ �F�L�@�L�@�L(�-^�W�^�W�^�WR� 0=�!+'�*�0=�!+'�*�0=�!+'�*4�_a�Y�B�Va�Y�B�Va�Y�B�Y�I�I�w�Y�E�Y�E�Yj�.C��lz$$�g�*.C��lz$$�g�*.C��lz$$�g �###"� �B �B �K8�98�984�w� g�� g�� g�;�;�;j�@.C��lz$$�o�*.C��lz$$�o�*.C��lz$$�o �_�-_�-_!�|�s�s�g�_�_"�-fh-�lfh-�lfh-(�jE}�=�E}�=�E}�=N�l: �._Ot: �._Ot: �._O(�*�Ok�'�Ok�'�Ok(�|�) G��) G��) G~ �x�|�%9�j�Z� @���|�%9�j�Z� @���|�%9�j�Z� @�(�5�i G�C�i G�C�i GR�Q0=�!+'��0=�!+'��0=�!+'�4�3a�R�W�ba�R�W�ba�R�W$�!�x�x�1$ �F�L�@�L�@�L(�-^�W�^�W�^�WR� 0=�!+'�*�0=�!+'�*�0=�!+'�*4�_a�Y�B�Va�Y�B�Va�Y�B�Y�I�I�w�Y�E�Y�E�Yj�.C��lz$$�g�*.C��lz$$�g�*.C��lz$$�g �###"� �B �B �K8�98�984�w� g�� g�� g�;�;�;j�@.C��lz$$�o�*.C��lz$$�o�*.C��lz$$�o �_�-_�-_ chestrate�9�y�y�4�z�z�9�y�y�4�z�z ing�x�y�y��z�z�x�y�y��z�z on4��D��D��D�v�3�3L�:�'�%�'�%�' ����N��4��D��D��D�v�3�3L�:�'�%�'�%�' ����N��der �9�G�G �7�)�)�9�G�G �7�)�)g�{�{�{�Q�>�w�>�w�>���D��D��/�x�x�\ � � �U�G�G�J��F��F��M�^�^�P�@~�~�~"�Ke �0e �0e �W�6�$�6�$�6�/� � ��A�A�{�{�{�Q�>�w�>�w�>���D��D��/�x�x�\ � � �U�G�G�J��F��F��M�^�^�P�@~�~�~"�Ke �0e �0e �W�6�$�6�$�6�/� � igin�a�w�w�]�3�3��x�x�W�x�x��^�^�������a�)�)�7���a�w�w�]�3�3��x�x�W�x�x��^�^�������a�)�)�7��x�o �_ �_ �( �` �` �o �_ �_ �( �` �` y�p�y�y�)�z�z�p�y�y�)�z�z�>X+/U9�4��+�>3-�H-�]�PC ""�V�����.�0�0originz�q�h�h�*�i�i�q�h�h�*�i�iscillate�|�3�3�q�G�G�(�d��d��d�`�d�%�d�%�d �|�3�3�q�G�G�(�d��d��d�`�d�%�d�%�dther�v�y�y4�GP�%�[�XP�%�[�XP�%�[�!�z�z�4�T�T(�r�6�/�6�/�6�(���%�$%�$%�z�a�a(�%�"�*�"�*�"�.�c�c"�L�%�B�%�B�%�%� � "��%�J�%�J�%�v�y�y4�GP�%�[�XP�%�[�XP�%�[�!�z�z�4�T�T(�r�6�/�6�/�6�(���%�$%�$%�z�a�a(�%�"�*�"�*�"�.�c�c"�L�%�B�%�B�%�%� � "��%�J�%�J�%wise�Z���w�)�)�Z���w�)�)ur�j���_�{�{�z�p�p�1�y�y � �j���_�{�{�z�p�p�1�y�y �t�$�{�{�M�g�g��h�h�.�x�x�u���Z�^�^�)�c�c�z� �  �0� � �*�)�)�$�X�X �,*�7*�7*�$�{�{�M�g�g��h�h�.�x�x�u���Z�^�^�)�c�c�z� �  �0� � �*�)�)�$�X�Xput�(�3�3�R�4�4 (�63� 63� 63�(�3�3�R�4�4side"�k�H"�n�H"�n�H"�P� � "�&�S"�p�S"�p�S"�#�)�)�1�X�X "�k�H"�n�H"�n�H"�P� � "�&�S"�p�S"�p�S"�#�)�)�1�X�Xver�R�y�y�}�z�z�~�T�T�9�a�a �a�_�_�R�y�y�}�z�z�~�T�T�9�a�aflow��x�x�)���4�^�^�b�c�c��x�x�)���4�^�^�b�c�clay�3�x�x�Q�^�^�3�x�x�Q�^�^ridden�g��$��$��\��I��I��4���l�� �g��$��$��\��I��I��4���l��e�>�y�y�0�`�U�`�U�`�9�z�z��G�G�N������>�y�y�0�`�U�`�U�`�9�z�z��G�G�N�����viewBwB�*��>W>�e�p�p BwB >W> BwB BwB BwB >W> >W> >W>BwBx���: BwB��X�X >W>BwB�*��>W>�e�p�p BwB >W> BwB BwB BwB >W> >W> >W>BwBx���: BwB��X�X >W>wn�<�y�y�5�z�z�<�y�y�5�z�zp�C�x�x�C�x�xackage(�h ��b ��b ��Y�3�3 ��� (�h ��b ��b ��Y�3�3 ���dding�F�l�l�d�R�R�F�l�l�d�R�Rge ��7�{���~�#�{�{��p�p��7�L ��7\��7��]�g6 II�P�]�g6 II�P�]�g6 II�8 ��7L��c�S6 II�D�c�S6 II�D�c�S6 II ��7 ��7�5 ��7�{���~�#�{�{��p�p��7�L ��7\��7��]�g6 II�P�]�g6 II�P�]�g6 II�8 ��7L��c�S6 II�D�c�S6 II�D�c�S6 II ��7 ��7�5int�^�y�y��z�z�^�y�y��z�zn: ��? �j�? �j�? @ �?�B  �t�B  �t�B  : ��? �j�? �j�? @ �?�B  �t�B  �t�B  ning�d���d��rallax � �B�`��(�j�c�c � �B�`��(�j�c�cent�O�y�y�j�z�z�OT�T�T�C�Z� �Z� �Z�T�T�T�a�Z��Z��Z�I5�H5�H5�8�)�)�9�L9�L9�O�y�y�j�z�z�OT�T�T�C�Z� �Z� �Z�T�T�T�a�Z��Z��Z�I5�H5�H5�8�)�)�9�L9�L9s�i�T�T�/�a�a�i�T�T�/�a�at�9�{�{��3�3�9�{�{��3�3s �,� � �,� � y�{���{��ss�!�Z!�Z!(�M�a*@�n�a*@�n�a*@�D�a�a�!�Z!�Z!(�M�a*@�n�a*@�n�a*@�D�a�aed�W�Q�*�Q�*�Q�g�3�3�R��}��}���T�T�+���e�c�c�G����X�X� �\ �\ �W�Q�*�Q�*�Q�g�3�3�R��}��}���T�T�+���e�c�c�G����X�Xing��y�yF�u�+,� �b��s�+,� �b��s�+,� �b��J�z�z�k�T�T�2]�7]�7]"�v!` �!` �!` �1�a�a�l%�@%�@%�>���0^�^�^�;�)�)�J%�g%�g%�G��"�~�a�e�a�e�a��y�yF�u�+,� �b��s�+,� �b��s�+,� �b��J�z�z�k�T�T�2]�7]�7]"�v!` �!` �!` �1�a�a�l%�@%�@%�>���0^�^�^�;�)�)�J%�g%�g%ve"!��e�e"$�m�2�2"!��e�e"$�m�2�2te�~����p�p �f �y �8�~���=r�.`� I�_V-p��,\;�j-�V�u++^�L�rP !!�W�����/�2��p�p! �f �v �50pasted�r�{�{�r�{�{th�1�{�{�M�y�y(�  �s�9 �s�9 �s"�Z �W �W �n�T�T�)�a�aH�~)�t . )�t . )�t . � ���A���1�{�{�M�y�y(�  �s�9 �s�9 �s"�Z �W �W �n�T�T�)�a�aH�~)�t . )�t . )�t . � ���A��length�Q�s�s"�p������U �p �p  " ��|�|� ���C���Q�s�s"�p������U �p �p  " ��|�|� ���C��offset�s�3�3�X�z�z ����s�3�3�X�z�z ���s�D�{�{"�G����� �Z�� �D�{�{"�G����� �Z��pacing�q�3�3�V�z�z � ���q�3�3�V�z�z � ��use�@�{�{�t�y�y(�t�H�D�H�D�H��z�z�@�{�{�t�y�y(�t�H�D�H�D�H��z�zd�R�3�3�R�3�3s�;�3�3�;�3�3yment� ���7�@�6�I�V��C�y�i�`�o�s�B�##�t�Q�{�{S�a� � U��.�X�XS�\�B�X��S�B�G� ���7�@�6�I�S��C�y�i�`�o�s�B�##�t�Q�{�{S�a� � U��.�X�XS�\�Ber�j�W�^�W�^�W�'�G�G�2���j���,�a�a�j�W�^�W�^�W�'�G�G�2���j��cent �|� � �|� � ages�-�)�)�-�)�)fect��{�{�q����{�{�q��orm(��/�*�$�/�*�$�/�*�d�3�3(�?�/�j�e�/�j�e�/�j�<�T�T�6�x�x�w�a�a�T�^�^(��/�*�$�/�*�$�/�*�d�3�3(�?�/�j�e�/�j�e�/�j�<�T�T�6�x�x�w�a�a�T�^�^ance���$~��D�9�D�9�D~�1�3�3:��k�e�5�y�k�e�5�y�k�e�5* ~�s�c�)�c�)�c~��1��\��\�~��_~�~�~�Y�)�)~� ~�"�v�v�~�~�~����$~��D�9�D�9�D~�1�3�3:��k�e�5�y�k�e�5�y�k�e�5* ~�s�c�)�c�)�c~��1��\��\�~��_~�~�~�Y�)�)~� ~�"�v�v� t�d�t��t��t��t��t��t"�R� �Y� �Y� (�p� �?� �?� �3� � ��X�X��a�a�d�t��t��t��t��t��t"�R� �Y� �Y� (�p� �?� �?� �3� � ��X�Xed�C�x�x�W� � �w�^�^� ���:� � �C�x�x�W� � �w�^�^� ���:� � ing�0�x�x�`�^�^�0�x�x�`�^�^s� �x�x� �x�xmitted �T� � �T� � petual�6�3�3 �V����� �6�3�3 �V�����spective� �y�y�0�3�3�D�z�z� �y�y�0�3�3�D�z�zhysical��y�y��z�z��T�T�T�a�a��y�y��z�z��T�T�T�a�as�)�y�y�B�.�.�"�z�z�_��D��D��E�z�z�}���)�y�y�B�.�.�"�z�z�_��D��D��E�z�z�}��ink�o�x�x�#�^�^�o�x�x�#�^�^ning ,�L � � ,�L � � xel �h� � �h� � s��y�y�>�z�z"�Q��sQ��sQ����"�D�%�Z�%�Z�%"�BQ��Q��Q��O�c�c����+�)�)�>����y�y�>�z�z"�Q��sQ��sQ����"�D�%�Z�%�Z�%"�BQ��Q��Q��O�c�c����+�)�)�>��lace��y�y��y�yy�s�y�yL�C�&�> %��&�> %��&�> %��z�z �F �u �u �~ �} �} �s�y�yL�C�&�> %��&�> %��&�> %��z�z �F �u �u �~ �} �} back�T%�V%�V%F+�T�� b��� b��� b�%�W%�W% �{���3���T%�V%�V%F+�T�� b��� b��� b�%�W%�W% �{���3��s�K�3�3�K�3�3ugins�*�p�p�*�p�psK�7�= �@C��mK�7�h �oC��K�7�zK�7�K�7�M �r �(C��FC��=C��LK�7�$K�7�s�###�$z �C �u �M �ZC��9 �q �X �q �vK�7�= �@C��mK�7�h �oC��K�7�zK�7 ��<DWDm�Xt.�A�)�Qh-DFY�%-&��/�, ""�V�����0�0��#K�7�J �r �(C��FC��=C��LK�7�$K�7�s�###�$z �C �u �M �ZC��9 �q0png����I�+�h�h�k� �]�]�! �? �H �> �Q �^ �$ �K � �q �h �w �{ �J �X � �N �& �3 �d �J �1 �J �O����I�+�h�h�k� �]�]�! �? �H �> �Q �[ �! �K � �q �h �w �{ �J �X � �N �& �3 �d �Joint��3�3�=�T�T�x�a�a�,-�b-�b-��)�)�/�X�X ��3�3�=�T�T�x�a�a�,-�b-�b-��)�)�/�X�Xer@�|;OKB�[V�;OKB�[V�;OKB�[V�:�x�x@�7;OKB�fV�;OKB�fV�;OKB�fV�X�^�^�&�X�X @�|;OKB�[V�;OKB�[V�;OKB�[V�:�x�x@�7;OKB�fV�;OKB�fV�;OKB�fV�X�^�^�&�X�X downcapture �<�a�a�<�a�aevent�< >�E >�E >�S �N �N �< >�E >�E >�S �N �N s tart��X�X��X�Xinfo�e�T�T� �a�a�e�T�T� �a�as �_I�CI�CI�_I�CI�CIlygon��3�3�~�z�z �����3�3�~�z�z ���line��3�3��z�z �����3�3��z�z ���pular�o�{�{�o�{�{sition�s���M�{�{�<�p�p� �}�8�}�8�}(�r�8� �$�8� �$�8� "�VG!�RVG!�RVG!�Z� �T� �T� �]������s���M�{�{�<�p�p� �}�8�}�8�}(�r�8� �$�8� �$�8� "�VG!�RVG!�RVG!�Z� �T� �T� �]����� ed�d�y�y�_�z�z�d�y�y�_�z�zve�E�)�)�E�)�)sible�v����{�{�?�p�p�E�y�y"�Jfe�Ofe�Ofe�~�z�z�W��S��S��(�R(�R(�ct� t� t�o��s��s���G�G���U��U��g�^�^�z�kz�kz�,���p����{�{�(� � �W�)�)�w�X�X�(���G��J��J��v����{�{�?�p�p�E�y�y"�Jfe�Ofe�Ofe�~�z�z�W��S��S��(�R(�R(�ct� t� t�o��s��s���G�G���U��U��g�^�^�z�kz�kz�,���p����{�{�(� � �W�)�)�w�X�X�(��tential�!�{�{�!�{�{wer�-��"�4 ;�5 ;�5 ;"�l ;�= ;�= ;�-��"�4 ;�5 ;�5 ;"�l ;�= ;�= ;ful ��[�?�[�?�[�{� �D�-�E�-�E�-?�v�y�y�M� �3�3�M��z�z�/�y�T�T�&�N��;�q�1�a�a�t�X�g�k�:�H� �>��#�T�:�!�:�? ��[�?�[�?�[�{� �D�-�E�-�E�-?�v�y�y�M� �3�3�M��z�z�/�y�T�T�&�K��;�q�1�a�a�t�X�g�k�:�H� �>��#�T�:in�3 #�7 #�7 #out�`�]�]out�8�_�_ractise�f�{�{�f�{�{e�O�v�v��u�u�O�v�v��u�u calculate����F������F��ise�_�_�_ferences �N �Nmium�b �r �r �r � � �? �O �O �i �y �y �b �r �r �r � � �? �O �O sence8�7�Z���~1��}�p�p*8�7�_�q�q�X"1���r�r8�7�$�T�T8�7�q�x�x�\ 8�71���a�a1��J�^�^ 1� 8�7 8�7 1�8�7�Z���~1��}�p�p*8�7�_�q�q�X"1���r�r8�7�$�T�T8�7�q�x�x�\ 8�71���a�a1��J�^�^ 1� 8�7 8�7 1�s)��K�p�p)���z�z)�)�F�>fH% �>fH% �>fH% )�)�)�)��U�^)�^ ,    t ,    t ,    t)��u)�)�)�)��K�p�p)���z�z)�)�F�>fH% �>fH% �>fH% )�)�)�)��U�^)�^ ,    t ,    t ,    t)��uable �+�a�a�+�a�acancel ��a�a��a�aed"�5 �& �& "�5 �& ��C� �H!A .CB�~,�y�73a�M�" !!�W�����1�2��& 0presses�>��F��F��y��S��S��>��F��F��y��S��S�ing�+�T�T�f�a�a�+�T�T�f�a�avent�e�x�x�J� � �e�x�x�J� � default�,� � �{�X�X�,� � �{�X�Xiew � � � � � � � � � � � � � � � � � � � � � � �ous� P�L W !�@ W !�@ W !�z� �! �&�2�H�2�H�2�n�s��U�A �D�2�.�2�.�2��G�L��+�q�!�{��3������b��b�`� P�L W !�@ W !�@ W !�z� �! �&�2�H�2�H�2�k�p��U�A �D�2�.�2�.�2��G�L��+�q�!�{��3� ly��x�x�G�^�^��x�x�G�^�^imary�4�T�T�o�a�a�4�T�T�o�a�avate����*�3�)�<�I��6�l�\�S�b�f�5 �2��9���O�5��5�:����*�3�)�<�F� �6�l�\�S�b�f�5 �2��9���O�5obably �1�G�G�1�G�Gduction�w���w��gress �$�|�[� �[� �[���3�3(�5�4�k�_�4�k�_�4�k6���]��]��Ij�| k�9S�[| k�9S�[| k�9S*�@�Q`�Q`�Q�{�� F� �o=(� �o=(� �o=( �$�|�[� �[� �[���3�3(�5�4�k�_�4�k�_�4�k6���]��]��Ij�| k�9S�[| k�9S�[| k�9S*�@�Q`�Q`�Q�{��ject�����p�p�~� � �����p�p�~� � mise������p4��2 s\�t�2 s\�t�2 s\ S�.�[$&tu(�$&tu(�$&tu(F�|=�:�c�N�K=�:�c�N�K=�:�c�N S�N�4>�@:�e�|�Y>�@:�e�|�Y>�@:�e�|�4�E�?Xf=�_E�?Xf=�_E�?Xf=.�vDn`}(�KDn`}(�KDn`}(�1�� S� S�4�PH�?XfB�dH�?XfB�dH�?XfB: �>"nd(�G"nd(�G"nd(�i�c�c( �#W�=�oW�=�oW�= S� S� S� S� S�( �[W�=�wW�=�wW�= S� S� S�S��Q�a�a4��2 s\�t�2 s\�t�2 s\ S�.�[$&tu(�$&tu(�$&tu(F�|=�:�c�N�K=�:�c�N�K=�:�c�N S�N�4>�@:�e�|�Y>�@:�e�|�Y>�@:�e�|�4�E�?Xf=�_E�?Xf=�_E�?Xf=.�vDn`}(�KDn`}(�KDn`}(�1�� S� S�4�PH�?XfB�dH�?XfB�dH�?XfB: �>"nd(�G"nd(�G"nd(�i�c�c( �#W�=�oW�=�oW�= S� S� S� S� S�( �[W�=�wW�=�wW�= S�agate�<�y�y�7�z�z�<�y�y�7�z�z ing�M�T�T��a�a�M�T�T��a�a on�h�y�y��z�z�G�T�T� �a�a�h�y�y��z�z�G�T�T� �a�aeffect R� R� R� R� R� R� R� R� R� R� R� R�R��Q�a�a R� R� R� R� R� R� R� R� R� R�rties�;�{�{� �y�y�M$�$�$�TG�5G�5G�f�x�x��^�^ �;�{�{� �y�y�M$�$�$�TG�5G�5G�f�x�x��^�^y��V�$�V�$�V��^�^���� �X�X�Q�� ��V�$�V�$�V��^�^���� �X�X�Q��ortion� �)�)� �)�)s(��m�^�2�m�^�2�m�^(�K�/�~�Q�/�~�Q�/�~0� %�GS %�GS %�G� �x�x0�R (�GR (�GR (�G�=�^�^�0��(��m�^�2�m�^�2�m�^(�K�/�~�Q�/�~�Q�/�~0� %�GS %�GS %�G� �x�x0�R (�GR (�GR (�G�=�^�^�0��vide�Q��� �{�{��p�p��T�T�y(�R(�R(��G�G�U�a�a�+(�8(�8(�����_�_�Q��� �{�{��p�p��T�T�y(�R(�R(��G�G�U�a�a�+(�8(�8(���d� �y�y(�.�%���%���%��I�z�z�C�G�G"�.PP�lPP�lPP"� zJ�PzJ�PzJ�K�S��S��S�Y/�]/�]/�9��� �y�y(�.�%���%���%��I�z�z�C�G�G"�.PP�lPP�lPP"� zJ�PzJ�PzJ�K�S��S��S�Y/�]/�]/s�a����{�{�!�'�T�'�T�'�Z�g��g��g�J�J�J�a����{�{�!�'�T�'�T�'�Z�g��g��ging�a�3 I-.1�&� ,/�.�B&�/-T�/�s��Z�{x ""�V�����2�0��3��x�x����T� � �=�^�^�K�c�c�a�3�3��x�x����T� � �=�^�^�K�c�c0pull�R�)�)�R�)�)sh �f�G�G�f�G�Gt �{�G�G�{�G�Gquality��{�{�x�p�p��{�{�x�p�p eryselector�E=�n=�n=�E=�n=�n=all��c�c��c�cuing�s�sick, �/ �,�}S�L�}S�L�}S" x �C�{�{& � �<�r��r��r �/  x � �  �/  �/  �/  x  x  �  �  �  �/  �/  x  x  x  x  x  �  x  x  x  x , �/ �,�}S�L�}S�L�}S" x �C�{�{& � �<�r��r��r �/  x � �  �/  �/  �/  x  x  �  �  �  �/  �/  x  x  x  x  x  �  x ly�t�x�x��^�^�t�x�x��^�^te"�s*t4�,*t4�,*t4"�*t4�*t4�*t4"�s*t4�,*t4�,*t4"�*t4�*t4�*t4rad� �x�x� �x�xius�H�f�f�f�L�L�H�f�f�f�L�Lx�%�6���%�6���%�6�%�6�%�6�������%�6�%�6���%�6���%�6���%�6�%�6�%�6�������%�6�%�6��nge �R� � .�@"�@"�@" �R� � s"�I -�9 -�9 -te�`�)�)�`�)�)her� �a�aios�?�x�x�]�^�^�?�x�x�]�^�^w �� � �� � e�N���n�� �s� �s� $�f�r� �r� �r�M�_�t��t��tT�c�Z�)� 5��Z�)� 5��Z�)� 5�i�y�y�yL��^� *� 5�q�^� *� 5�q�^� *� 5 �z�c� � �1�)�)�N���n�� �s� �s� $�f�r� �r� �r�M�_�t��t��tT�c�Z�)� 5��Z�)� 5��Z�)� 5�i�y�y�yL��^� *� 5�q�^� *� 5�q�^� *� 5 �z�c� � �1�)�)ach�"�3�3��G�G�b����� �"�3�3��G�G�b�����t�^   i (R 3W6zi (R 3W6zi (R 3W6z   ���4     �ZZV2>u1�'/~vE   �ZZV2>u1�'/~vE   �ZZV2>u1�'/~vE    ��F�0�0��`   ��Zm��Zm��Zw �|   |z%� �7z%� �7z%� �  �P    B c"w7I c"w7I c"w7    ������j   $�0�H$�0�H$�0�V   �f   �*�z�z�f   � ��D*�S*�S* ��T*�c*�c*� ��!*�0*�0*� ��� � 4��' �*6 �*6 �*&��#�X�X ��)�]�]�^   i (R 3W6zi (R 3W6zi (R 3W6z   ���4     �ZZV2>u1�'/~vE   �ZZV2>u1�'/~vE   �ZZV2>u1�'/~vE    ��F�0�0��`   ��Zm��Zm��Zw �v   |z%� �7z%� �7z%� �  �J t1'�!,P9�2$-�U ""�V�����3�0��   B c"w7I c"w7I c"w7   D $������j   $�0�H$�0�H$�0�V   �f   �*�z�z�f   � ��D*�S*�S* ��T*�c*�c*� ��!*�0*�0*� ��� � 0read�^���!�3�3�f���+�G�G�o�c�c �S�a�a�^���!�3�3�f���+�G�G�o�c�cing�]�x�x�{�^�^�]�x�x�{�^�^s�C� � �C� � l�5�x�x�S�^�^�5�x�x�S�^�^istic   ly�^�x�x�|�^�^�j���"�� �^�x�x�|�^�^�j���"��sons�� �n� �n� �s�G�G�2�x�h�x�h�x�� � �Y�)�)�� �n� �n� �s�G�G�2�x�h�x�h�x�� � �Y�)�) calculations��x�x�/�^�^��x�x�/�^�^eive"��`�]�`�]�`"�X�&`�_�&`�_�&` � �_�_"��`�]�`�]�`"�X�&`�_�&`�_�&`s�-�T�T�s�a�a�d����� �-�T�T�s�a�a�d�����ipes�` �r �r �} � � �` �r �r �} � � ognised��T�T�H�a�a��T�T�H�a�a s�F�p�p�H�T�T��a�a�F�p�p�H�T�T��a�ammend�I���Y�p�p�I���Y�p�p ed��x�x��^�^��x�x��^�^rded � � � � � � t��3�3��z�z .�Y D*?�X D*?�X D*?��3�3��z�z .�Y D*?�X D*?�X D*? distributed��{�{��{�{uce�0�3�0�3�0�3�0�3�0�3�0�3�0�3 �0�3�0�3�0�3�0�3�0�3�0�3�0�3d ��7 � � ��7 � � ��7 ��7 ��7 � � � � � � ��7��7� � � ��7 � � ��7 � � ��7 ��7 ��7 � � � � � � ��7��7� � �f��y�y�@�z�z"�w �( �( ����� � "�3 �, �, �~�^�^"�M �Q �Q ��y�y�@�z�z"�w �( �( ����� � "�3 �, �, �~�^�^"�M �Q �Q er�>�_�_ence �O���[�G�G� �c�c  �O���[�G�G� �c�cred�h�y�y�c�z�z�h�y�y�c�z�zgistered�K�3�3�K�3�3 property�X�3�3�X�3�3ular�L���L��lated�.�Q�c�T�T]�N��)�a�a�:�c �.�Q�c�T�T]�N��)�a�a�:�cive:�p�a�2� �a�2� �a�2� �_�_�'� � �)�E�E�"�|"�|"�<���t�� :�p�a�2� �a�2� �a�2� �_�_�'� � �)�E�E�"�|"�|"�<���t��eased�@"�4"�4"�{"�A"�A"�@"�4"�4"�{"�A"�A"s�A�T�T�|�a�a�A�T�T�|�a�aing�3�T�T�n�a�a�3�T�T�n�a�aiablemove�b�f� � �b�f� � d�O���n�?�u�u�a�8�v�v�Z�x�x�X�x�^�^ �|� � �O���n�?�u�u�a�8�v�v�Z�x�x�X�x�^�^ �|� � s �t� � �t� � ing"�=��!=��!=�"�@?�$�?�$�?�$"�=��!=��!=�"�@?�$�?�$�?�$nder���i��i���G�5�G�5�G(�d��A�4��A�4��A(���,�(��,�(��,����U� � "���2��2����i��i���G�5�G�5�G(�d��A�4��A�4��A(���,�(��,�(��,����U� � ed��p�p�k�y�y�d�z�z��a�a��p�p�k�y�y�d�z�zrs N� N� N� N� N� N� N� N� N� N� N� N� N� N� N� N� N� N� N� N� N� N� N�ing"�I�5�7�5�7�5"�}�z5�3�z5�3�z5 '��a�a"�I�5�7�5�7�5"�}�z5�3�z5�3�z5s�B=�==�==�t=�#=�#= �{�7� � �B=�==�==�t=�#=�#= �{�7� � orderE�5=�E�5=�E�5E�5E�5=�=�=�E�5E�5=��t-+T�6\S:1?/,]!��[�_L-y�M;+-&�Q�YJ�%^[ ""�V�����4�0 �E�5=�E�5=�E�5E�5E�5=�=�=�E�5E�5=� 0reordering��x�x�;�^�^��x�x�;�^�^peat�5�H5�H5�>�y�yF�\�M  $(��r�M  $(��r�M  $(��w�z�z 4�G  &$�  &$�  &$4�  &$�!  &$�!  &$�5�H5�H5�>�y�yF�\�M  $(��r�M  $(��r�M  $(��w�z�z 4�G  &$�  &$�  &$4�  &$�!  &$�!  &$delay(� �b�1�b�1�b � �a �a �I �i �i  (� �b�1�b�1�b � �a �a �I �i �i ing�w�3�3 ����M�� �w�3�3 ����M��s�G�{�{�M�3�3 �o���'���G�{�{�M�3�3 �o���'��type"��3+�Y�3+�Y�3+ �b-�T-�T-�-�\-�\- "��3+�Y�3+�Y�3+ �b-�T-�T-�-�\-�\-tition��3�3 �&���^�� ��3�3 �&���^��lace�h�{�{�b�y�y��z�z�?�x�x�]�^�^�h�{�{�b�y�y��z�z�?�x�x�]�^�^yed�.�3�3�.�3�3 resenting��)� �)� �)�n�z�z �o���'�� ��)� �)� �)�n�z�z �o���'�� s �0 � � �0 � � sets� �a�aize+�+��X �q �q +�+�+�+�+�+�+��`x+�Z C$ C$ C+�+�+��x+�+��X �q �q +�+�+�+�+�+�+��`x+�Z C$ C$ Cobserver*�+ �L + �L + �L *�+ �L + �L + �L olved�:�y�y�e�z�z�B�{�{�:�y�y�e�z�z�B�{�{r�&�p�p�&�p�p s�/�p�p�/�p�ps��y�y��3�3�1�z�z��y�y��3�3�1�z�z pectively �f� � �6���f� � �6��onding�/� � �/� � sive,, ness�6���n���@�_�_�6���n��tart�a�3�3�a�3�3ed�.�3�3�.�3�3delta�J !� !� !����2�F�F�#�c�c�="�S"�S"�u"�["�[" �J !� !� !����2�F�F�#�c�c�="�S"�S"�u"�["�["ored�l���l��speed�4 � � �)� )� )�'!�M!�M!�_!�U!�U! �4 � � �)� )� )�'!�M!�M!�_!�U!�U!ult��3�3��T�T�_�x�x�~�G�G�N�a�a� �^�^�?���w�� ��3�3��T�T�_�x�x�~�G�G�N�a�a� �^�^�?���w��ing�H�x�x�|�^�^�H�x�x�|�^�^me�A�{�{�U�#�#�A�{�{�U�#�#d�?�3�3�?�3�3turn���.�-�c;�Y�c;�Y�c;�H�t��t��t� � �I� �I� �O*1�!*1�!*1(�$�e2�d�e2�d�e2�^���f:�G:�G:"�:;r�P;r�P;r��)�)(�S9p,�u9p,�u9p,���.�-�c;�Y�c;�Y�c;�H�t��t��t� � �I� �I� �O*1�!*1�!*1(�$�e2�d�e2�d�e2�^���f:�G:�G:"�:;r�P;r�P;r��)�)(�S9p,�u9p,�u9p,ed�c�)�)�� � �;���c�)�)�� � s"�Z� �� �� � ���x� � �O+�+�+�E�c�c�i��~��~��� � �P�)�)�V�X�X�!������_� � �)�8)�8)(�R 90�k 90�k 90"�Z� �� �� � ���x� � �O+�+�+�E�c�c�i��~��~��� � �P�)�)�V�X�X�!������_� � using�n�y�y� �z�z�n�y�y� �z�zverse�S�� �u�f�f�-�n�n �S�� �u�f�f�-�n�nd��_�_easing("� �: �: s�l�3�3� �_�_�l�3�3ting��3�3��3�3gb�] � � �& �h �h �] � � �& �h �h a(�t2�n �V2�n �V2�n ��3�3(�-2�0 �2�0 �2�0 ���(�t2�n �V2�n �V2�n ��3�3(�-2�0 �2�0 �2�0 ight�/�y�y�h�z�z�b�F�F��t�t��S�S��Z�Z�v���:�)�)�)�X�X �/�y�y�h�z�z�b�F�F��t�t��S�S��Z�Z�v���:�)�)�)�X�Xobustot �4���m�c�c:)�@  I!�}  I!�}  I!�4���m�c�c:)�@  I!�}  I!�} w4�sAS`Djg�a8I?38�)��%-2�l6�2/U !8y�R ""�V�����5�0� I! 0rootmargin�j�)�)�j�)�)tate���.� �:�+ �:�+ �:�_�p�pL��5 �*�5 �*�5 X�'��v0"� ��v0"� ��v0"L�;�5 �+�5 �+�5 �L�T�T�5� � ��a�a(�((�L(�L(@�-6A#%�y/$�6A#%�y/$�6A#%�y/$�q� � @�e6A#%�y/$� 6A#%�y/$� 6A#%�y/$���.� �:�+ �:�+ �:�_�p�pL��5 �*�5 �*�5 X�'��v0"� ��v0"� ��v0"L�;�5 �+�5 �+�5 �L�T�T�5� � ��a�a(�((�L(�L(@�-6A#%�y/$�6A#%�y/$�6A#%�y/$�q� � @�e6A#%�y/$� 6A#%�y/$� 6A#%�y/$x��y�y"�)�YQ� �YQ� �YQ�=�z�z �?S�.S�.S�wS�6S�6S��y�y"�)�YQ� �YQ� �YQ�=�z�z �?S�.S�.S�wS�6S�6Sy�H�{�{��y�y�*�3�3�>�z�z�H�{�{��y�y�*�3�3�>�z�zz��y�y�;r�Cr�Cr�?�z�z��y�y�;r�Cr�Cr�?�z�zion� �s �s ��3�3�J��� �s �s ��3�3und� ���B��� ���B��wvalue"�X�<�<"�X�<�<ule��T�T�S�a�a��T�T�S�a�as��T�T�[�a�a��T�T�[�a�an �E� � �4B�B�B�E� � �4B�B�Bning�{�3�3�{�3�3sN� l}#T%� cl}#T%� cl}#T%� <� 1GX{�CX1GX{�CX1GX{�CT�/��"`$F N��"`$F N��"`$F 4�CvpH�XP�-vpH�XP�-vpH�XP@�}�Nef�$�a�Nef�$�a�Nef�$4�|vpH�R�lvpH�R�lvpH�R: �o�h+N �a�h+N �a�h+N r�oM�S(D� �A N�|M�S(D� �A N�|M�S(D� �A N�(�bszc�<szc�<szc(�N�4� N�4� N�4��G�G: �'�k,T �`�k,T �`�k,T ~ �%0�Y(E�x�A N�z0�Y(E�x�A N�z0�Y(E�x�A N�"�y�3�;y�3�;y�3(��\b[� �\b[� �\b[" �o�d��d��d�j`; ��{�{"��1�\�1�\�16�C:�&>�:�&>�:�&>��I�I" �'�l��l��l�"� � �*H�H�H" �F��K��K�N� l}#T%� cl}#T%� cl}#T%� <� 1GX{�CX1GX{�CX1GX{�CT�/��"`$F N��"`$F N��"`$F 4�CvpH�XP�-vpH�XP�-vpH�XP@�}�Nef�$�a�Nef�$�a�Nef�$4�|vpH�R�lvpH�R�lvpH�R: �o�h+N �a�h+N �a�h+N r�oM�S(D� �A N�|M�S(D� �A N�|M�S(D� �A N�(�bszc�<szc�<szc(�N�4� N�4� N�4��G�G: �'�k,T �`�k,T �`�k,T ~ �%0�Y(E�x�A N�z0�Y(E�x�A N�z0�Y(E�x�A N�"�y�3�;y�3�;y�3(��\b[� �\b[� �\b[" �o�d��d��d�j`; ��{�{"��1�\�1�\�16�C:�&>�:�&>�:�&>��I�I" �'�l��l��l�"� � am�[�y�y�x���[�y�y�x��e�v�p�p��y�y@�m� �;�D-�]� �;�D-�]� �;�D-�O�z�z"�D�:��:��:�l�Q�)�Q�)�Q�}� � "��E��E��E��<�$�<�$�<�R���������@���l���v�p�p��y�y@�m� �;�D-�]� �;�D-�]� �;�D-�O�z�z"�D�:��:��:�l�Q�)�Q�)�Q�}� � "��E��E��E��<�$�<�$�<�R���������@��ple �k-�-�-�k-�-�-d � }�L}�L}� }�L}�L}uration �Z�8�8�Z�8�8ing �"�G�G�"�G�Gndbox�h�x�x��^�^�h�x�x��^�^cale6�61�41�41�Q�N�{�{�\B�$�'�w$�'�w$�'�CZ�~-�xd�- �2-�xd�- �2-�xd�- �*�#��4��4��GB�7-�8d�--�8d�--�8d�MH�9 h%�g�3� h%�g�3� h%�g�3�=H�=�])Q�C�C�])Q�C�C�])Q�C� �% �L �F�t h%�g�!3� h%�g�!3� h%�g�!3}H�q�G)Q�C�?�G)Q�C�?�G)Q�C�# �x$� �t �t �#�1���" �Y � �O �'��R�R�}�i���t �K �2 �K �P6�61�41�41�Q�N�{�{�\B�$�'�w$�'�w$�'�CZ�~-�xd�- �2-�xd�- �2-�xd�- �*�#��4��4��GB�7-�8d�--�8d�--�8d�MH�9 h%�g�3� h%�g�3� h%�g�3�=H�=�])Q�C�C�])Q�C�C�])Q�C� �" �L �F�t h%�g�!3� h%�g�!3� h%�g�!3}H�q�G)Q�C�?�G)Q�C�?�G)Q�C�# �x$� �t �t �#�1 �`�SE=-.-+1�,�u#/ !!�W�����6�2 ����"+ �Y � �O �'��R�R�}�i���t �K0scalex����S�p�p��y�y�%�3�3�9�z�z"�5W�!W�!W"�o�'�' ����S�p�p��y�y�%�3�3�9�z�z"�5W�!W�!W"�o�'�'y��y�y�&�3�3�:�z�z��y�y�&�3�3�:�z�zing�x�y�y�0�z�z�x�y�y�0�z�zenarios ope�| �a �a "�'�`�`�a�x�x��^�^�| �a �a "�'�`�`�a�x�x��^�^d � �reen�u�p�p�Y�Y�!�Y�!�Y�e� � �w�Y��Y��Y�u�p�p�Y�Y�!�Y�!�Y�e� � �w�Y��Y��Yshot�b�x�x��^�^�b�x�x��^�^ipt@�r �  �  �I�k�k"�$(!�(!�(!�Z �W �W "�zS �S �S @�R � )�[ � )�[ � )��u�u@�r �  �  �I�k�k"�$(!�(!�(!�Z �W �W "�zS �S �S @�R � )�[ � )�[ � )��u�uollj$HoHj�*  -�/�*  -�/�*  -�t   J��m1*�h�51*�h�51*�h R!DOD�  -�  -�  -0$HoH�   ��!DOD$HoHF$HoH�d (�J�} (�J�} (�J�L�>$HoHR n,J =�  n,J =�  n,J =� =�4 �o .   !P    #�D .   !P    #�D .   !P    #� !DODm�a�aD!DOD�A (�6�w (�6�w (�6l�!DOD5 j1K �  j1K �  j1K � "$HoH�.$HoH����&�� �)�)�!DOD�@����j$HoHj�*  -�/�*  -�/�*  -�t   J��m1*�h�51*�h�51*�h R!DOD�  -�  -�  -0$HoH�   ��!DOD$HoHF$HoH�d (�J�} (�J�} (�J�I�>$HoHR n,J =�  n,J =�  n,J =� =�4 �o .   !P    #�D .   !P    #�D .   !P    #� !DODm�a�aD!DOD�A (�6�w (�6�w (�6l�!DOD5 j1K �  j1K �  j1K � "$HoH�.$HoH����&�� �)�)�!DOD�@�able�m �q �q ����V ^�$ ^�$ ^� �W �W �P�c�c�7�)�)�m �q �q ����V ^�$ ^�$ ^� �W �W �P�c�c�7�)�) direction �_���_��er ���~��~����~��~�ing��3�3�}�T�T ��^�0�\�0�\�0�8�a�a����?�� ��3�3�}�T�T ��^�0�\�0�\�0�8�a�a����?��length �S� � �S� � ref �!�~�~�Y �N �N �!�~�~�Y �N �N timeline (�X T�# T�# T(�X T�# T�# Tx ����P�c�c����P�c�cy (�0 �@0 �@0 �R�c�c(�0 �@0 �@0 �R�c�cprogress�~ � � �L �h �h .�3 S2�{ S2�{ S2.�m 6�~ 6�~ 6 �~ � � �L �h �h .�3 S2�{ S2�{ S2.�m 6�~ 6�~ 6tipt�F�q�q�F�q�qeamlessrch �n � �@ �n �~ �=cond.�@a��J� a��J� a��J�� � �(�G�G�3��s��s��S�{�{�-�n�l�n�l�n�k��{��{� .�@a��J� a��J� a��J�� � �(�G�G�3��s��s��S�{�{�-�n�l�n�l�n�k��{��{�ary�%�X�X�%�X�Xs�v�y�yX��k�`� .� ��k�`� .� ��k�`� .� ��z�z�p�-�-:�B��K�h�8��K�h�8��K�h�4�{�{:�z��K�l�<��K�l�<��K�l�L�_�_�v�y�yX��k�`� .� ��k�`� .� ��k�`� .� ��z�z�p�-�-:�B��K�h�8��K�h�8��K�h�4�{�{:�z��K�l�<��K�l�<�S�8?-sn.�'�5�$�E6+C�" 5�T !!�W�����7�2��K�l0secs�t>�d>�d>�t>�d>�d>tion��y�y"�Q�3Q�3Q�S�z�z�,�r�r�b� � �J�X�X�_���~�)�)�����y�y"�Q�3Q�3Q�S�z�z�,�r�r�b� � �J�X�X�_���~�)�)���urity�X�)�)�X�)�)e�"�{�{ �_�r�x�x� �1�&�^�^�_�� �"�{�{ �_�r�x�x� �.�&�^�^�_��gment(�O3��L3��L3� ���(�O3��L3��L3� ���s� ��� ��lected�3�3or�w�a�a��T�T�a�a�a�!� � �u �" �" �r� � �w�a�a��T�T�a�a�a�!� � �u �" �" �r� � s�{�#�#�M� � �fV�V�V �{�#�#�M� � �fV�V�Vikoff�\�y�y�y���\�y�y�y��parately�W�_�_quence��y�y��' D) *� C*-/@�7 D) *� C*-/@�7 D) *� C*-/@�}�z�z��y�y��' D) *� C*-/@�7 D) *� C*-/@�7 D) *� C*-/@�}�z�z s�8�{�{�m�y�y4%�I�T �^�{�T �^�{�T �^��z�z�8�{�{�m�y�y4%�I�T �^�{�T �^�{�T �^��z�zries�x�y�y�s�z�z�v�q�q�x�y�y�s�z�zt� �{�{F�G ��V��/G ��V��/G ��V���|�3 GP  c�/L_&�C�q�3 GP  c�/L_&�C�q�3 GP  c�/L_&�CR�OG �:��V�W�0G �:��V�W�0G �:��V�W.�q 9��l 9��l 9�4���6���6���6�70t�r0t�r0t�E� � .�b [ �= [ �= [ .�) <��v <��v <�4�@�� ��� ��� �o,z�A,z�A,z�v����UIQR �. O�q$'$ AJ�UIQR �. O�q$'$ AJ�UIQR �. O�q$'$ AJ�|�{�{�")�d)�d)�q)�1)�1)��WUIQR �. O�q$'$ AJ� UIQR �. O�q$'$ AJ� UIQR �. O�q$'$ AJ@�aY P,1 �MY P,1 �MY P,1 � �{�{F�G ��V��/G ��V��/G ��V���|�3 GP  c�/L_&�C�q�3 GP  c�/L_&�C�q�3 GP  c�/L_&�CR�OG �:��V�W�0G �:��V�W�0G �:��V�W.�q 9��l 9��l 9�4���6���6���6�70t�r0t�r0t�E� � .�b [ �= [ �= [ .�) <��v <��v <�4�@�� ��� ��� �o,z�A,z�A,z�v����UIQR �. O�q$'$ AJ�UIQR �. O�q$'$ AJ�UIQR �. O�q$'$ AJ�|�{�{�")�d)�d)�q)�1)�1)��WUIQR �. O�q$'$ AJ� UIQR �. O�q$'$ AJ� UIQR �. O�q$'$ AJisopen�F�x�x�F�x�xopen�L�k�k�L�k�ks�0'�'�'�l�a�a�0'�'�'crolldirection �`���`��tatus�%�y�y�%�y�yting�q���&�{�{�V]�]�]@�@�X�,i�2�a�X�,i�2�a�X�,i�2� �3�3@�y��,i�p�b��,i�p�b��,i�p�Iw*�7w*�7w*�s�x�x�P��"��*�9�*�9�*�#�^�^� �c�c�o��(���S���S���S(�Q��W� ��W� ��W�q���&�{�{�V]�]�]@�@�X�,i�2�a�X�,i�2�a�X�,i�2� �3�3@�y��,i�p�b��,i�p�b��,i�p�Iw*�7w*�7w*�s�x�x�P��"��*�9�*�9�*�#�^�^� �c�c�o��(���S���S���S(�Q��W� ��W� ��Ws�O�fO�fO �#���[�� �O�fO�fO �#���[��up�J�p�p�p�y�y"�)�~A�?�~A�?�~A�[�a�a�{Y�Y�Y"�S�F9�h�F9�h�F9�:�O:�O:�J�p�p�p�y�y"�)�~A�?�~A�?�~A�[�a�a�{Y�Y�Y"�S�F9�h�F9�h�F9�:�O:�O:hadow��y�y�9�z�z�]�x�x�{�^�^��y�y�9�z�z�]�x�x�{�^�^s�K�x�x�i�^�^�K�x�x�i�^�^pe�1����1���red �H. ����Y���Y��(�C�!�t�M�!�t�M�!�t��*� �  �H. ����Y���Y��(�C�!�t�M�!�t�M�!�t��*� � ortcut�f��c��c���Z�"�Z�"�Z�f��c��c���Z�"�Z�"�Z s �_� � �_� � hands������uld��{�{�b�y�y�]�z�z��T�T�t�x�x�U� � � �^�^�E���:���r���8� � ��{�{�b�y�y�]�z�z��T�T�t�x�x�U� � � �^�^�E���:���r���8� � w�T���2�p�p � �h �h �M�o�o�T���2�p�p � �h �h �M�o�oide��x�x�.�^�^��x�x�.�^�^gnal��a�a &�X{G�K/�8w;�E '*�fE�@W+$�H�ak- ""�V�����8�0�0similar�:�x�x�X�^�^�\���#���[�� �:�x�x�X�^�^�\���#���[��ple���"�Y�T?�l�T?�l�T?�)�p�p�{�7�D�7�D�7�3�z��z��z�w�T�T�j�x�x�/�a�a�:�P��P��P�o ���"�Y�T?�l�T?�l�T?�)�p�p�{�7�D�7�D�7�3�z��z��z�w�T�T�j�x�x�/�a�a�:�P��P��P�oifies�h���h��y�g�p�p�g�p�p ultaneously�L�y�y�g�z�z�L�y�y�g�z�zn�E�{�{�E�{�{ce �E���E��gle�v�{�{�1�s��s��s"��??�9�??�9�??�,�!�[�!�[�! �(�)4�X4�X4�v�{�{�1�s��s��s"��??�9�??�9�??�,�!�[�!�[�! �(�)4�X4�X4ze�2�3�2�3�2�3�2�3�x�x�2�3�2�3�2�3$�� g� g� �2�3�2�3�2�3�2�3�x�x�2�3�2�3�2�3$�� g� g� s��3�3��3�3kew��x�x�,�2�2�@�y�y��x�x�,�2�2�@�y�yx� �y�y�.�3�3�B�z�z� �y�y�.�3�3�B�z�zy� �y�y�/�3�3�C�z�z� �y�y�/�3�3�C�z�zi�~���6���~���6��lides�?�?ow��x�x��x�xs�B�{�{�B�{�{mall�Z�Zer�H�3�3�)�x�x�0�G�G�G�^�^�;���s�� �H�3�3�)�x�x�0�G�G�G�^�^�;���s��rt��{�{��{�{ooth�v���J�x�x�~�^�^�v���J�x�x�~�^�^ed � ��� �c�c� ��� �c�cing �����c�c�����c�cly �B   �B  nap ���x�x�=�^�^"�c@�Dc@�Dc@"�;c@�Lc@�Lc@ ���x�x�=�^�^"�c@�Dc@�Dc@"�;c@�Lc@�Lc@ping�p���(���p���(��y��y�y� �z�z��y�y� �z�zshot�#�x�x�A�^�^�#�x�x�A�^�^ s�@�x�x�^�^�^�@�x�x�^�^�^o���g��g��>�p�p�C�B�9�B�9�B�>b�b�b�|�x�x�h���}@�L@�L@�v�G�G��^�^��c�c�".�p.�p.�u���-�����g��g��>�p�p�C�B�9�B�9�B�>b�b�b�|�x�x�h���}@�L@�L@�v�G�G��^�^��c�c�".�p.�p.�u���-��me�7�T�T"�E�p%�g�p%�g�p%�|�G�G�}�a�a"�q�b%�[�b%�[�b%� ��"�r�s�s �7�T�T"�E�p%�g�p%�g�p%�|�G�G�}�a�a"�q�b%�[�b%�[�b%� ��"�r�s�sthing��-�M�-�M�-�8�-�3�-�3�- �9�a�a��-�M�-�M�-�8�-�3�-�3�-imes(�#���Q���Q��(�\�V�H�`�V�H�`�V�H�Q�x�x��^�^(�#���Q���Q��(�\�V�H�`�V�H�`�V�H�Q�x�x��^�^urce�x���k�{�{��p�p �g �z �9 �Z�{�{�j� � �7�X�X�a���x���k�{�{��p�p �g �w �6 �Z�{�{�j� � �7�X�Xpaced�7�y�y�2�z�z��_�_�7�y�y�2�z�zec� �_�_ial�n�3�3�S�z�z �r���n�3�3�S�z�z �r��fic�d���o�{�{�C � � ��x�x�.��"�o�G�G�M�^�^�h�c�c�9D�fYD�fYD�f�qD�nYD�nYD�n� _�& _�& _�d���o�{�{�C � � ��x�x�.��"�o�G�G�M�^�^�h�c�c�9D�fYD�fYD�f�qD�nYD�nYD�n� _�& _�& _ ally�L�p�p��x�x�C�^�^�L�p�p��x�x�C�^�^es�p�{�{�p�{�{y��x�x�K�^�^��{�{��x�x�K�^�^��{�{ed�r�`�`@�<'�[ �s'�[ �s'�[ ��`�`�$�+�+�/)�X)�X)�g)�`)�`) � �_�_�r�`�`@�<'�[ �s'�[ �s'�[ ��`�`�$�+�+�/)�X)�X)�g)�`)�`)s�?�{�{�?�{�{lit 5� 5� 5�5��" 5�5��D�{�{5��T� �  5�5��!�X�X 5�5��K�� 5� 5� 5� 5� 5�5��" 5�5��D�{�{5��T� �  5�5��!�X�X 5�text 4� 4� 4�4��" 4�4��D�{�{4��T� �  4�4��!�X�X 4�4��K�� 4� 4� 4� 4� 4�4��" m�{95�%�BS??+|B,-� .+.+�1�FQ��89A�B?�W�T !!�W�����9�2�4�,4��D�{�{4��T� �  4�4��!�X�X 4�0sponsor �## �##read�R�3�3 ����N�� �R�3�3 ����N��ingp�74 8p� �o �o  i�(p�7�,�[� �[� �[�>8p�[�j  D�2 @  " �h�j  D�2 @  " �h�j  D�2 @  " (i����a��a�p�7p�7�0�x�xp�7�p��8p�V8p;  $<  K(/  $<  K(/  $<  K(/i�i�� �^�^i���c�cp�7�Vp�7�70 /!�i "@  + # "�G$�Q0 /!�i "@  + # "�G$�Q0 /!�i "@  + # "�G$ &8p�# 8p�&8p8p8p�Vi��0 /!�i "@  + # "�G$�Y0 /!�i "@  + # "�G$�Y0 /!�i "@  + # "�G$8p8p8p 8p p�74 8p� �o �o  i�(p�7�,�[� �[� �[�>8p�[�j  D�2 @  " �h�j  D�2 @  " �h�j  D�2 @  " (i����a��a�p�7p�7�0�x�xp�7�p��8p�V8p;  $<  K(/  $<  K(/  $<  K(/i�i�� �^�^i���c�cp�7�Vp�7�70 /!�i "@  + # "�G$�Q0 /!�i "@  + # "�G$�Q0 /!�i "@  + # "�G$ &8p�# 8p�&8p8p8p�Vi��0 /!�i "@  + # "�G$�Y0 /!�i "@  + # "�G$�Y0 /!�i "@  + # "�G$8ps �j��x�x�o�G�G�%�^�^ �j��x�x�o�G�G�%�^�^value K� K� K� K� K� K� K� K� K� K� K� K� K� K� K� K� K� K� K� K� K� K� K� quarespace^�^�^�^�^�^�^�^�^�^�^�^�^�^�^�^�^�^�^�^�^�^�^�rc�P�{�{�P�{�{tagger2:��/ �K �K  �o�v�v >:��j  �  �   ��z�z �m :�:�� @�3 �N �N  :� � :�W    @    @    @:� :�:� @�s �V �V  :� :��L :� :� 2:��/ �K �K  �o�v�v >:��j  �  �   ��z�z �m :�:�� @�3 �N �N  :� � :�W    @    @    @:� :�:� @�s �V �V  :� children��f�f��f�f direction� �z�z� �z�zeding��{�{��{�{s��{�{��{�{rt, �/ �>p�}�/p�}�/p�}, x �Q�,�Q�,�Q � �<�p�p �/ � �y�y�" x ��g 7N! '5 �7�q�g 7N! '5 �7�q�g 7N! '5 �7N � �K�z�z �/ �K, �/ �f �#�L �#�L �# �/ F x �H$#&#�k$#&#�k$#&# x  � , � �6 �+�* �+�* �+ �  �/ : �/ �2�E 9�|�E 9�|�E 9�. x � x : x �W"[�(W"[�(W"[ x �)�)�)F x �o"8�^o"8�^o"82 � ��E 9��E 9��E 9 x  x " x �N �X �X  x , �/ �>p�}�/p�}�/p�}, x �Q�,�Q�,�Q � �<�p�p �/ � �y�y�" x ��g 7N! '5 �7�q�g 7N! '5 �7�q�g 7N! '5 �7N � �K�z�z �/ �K, �/ �f �#�L �#�L �# �/ F x �H$#&#�k$#&#�k$#&# x  � , � �6 �+�* �+�* �+ �  �/ : �/ �2�E 9�|�E 9�|�E 9�. x � x : x �W"[�(W"[�(W"[ x �)�)�)F x �o"8�^o"8�^o"82 � ��E 9��E 9��E 9 x delay�U�l�l=B�JU�(�[�3$3� ""�V�����:�0��U�l�l0started�7�Z�����;�p�p�7�H�� ��k�7��T�T �7 �7 � ���w�a�a � � �7 �7 � �"��)��q��q� ���B�X�X � � � � ��7�Z�����;�p�p�7�H�� ��k�7��T�T �7 �7 � ���w�a�a � � �7 �7 � �"��)��q��q� ���B�X�X � �vent�M � � "�d �5 �5 �M � � "�d �5 �5 ing�;�{�{�W@�u@�u@�%��w��w��C��]��]��r�a�a�;�{�{�W@�u@�u@�%��w��w��C��]��]�s��y�y��z�z�s�T�T�7� � �9�a�a����"���,� � �Z����y�y��z�z�s�T�T�7� � �9�a�a����"���,� � �Z��te�M����p�p4��#�)�0�#�)�0�#�)��'�'� � �s� �s� �(�R�R�Q � � �^��G�G�F�8�8� �\ �\ 6� ]8�< l]8�< l]8�< �M����p�p4��#�)�0�#�)�0�#�)��'�'� � �s� �s� �(�R�R�Q � � �^��G�G�F�8�8� �\ �\ ic�Y�3�3�Y�3�3us�$ �o �o 1�## �$ �o �o 1�## ddeviation�5�P�P�y�]�]�5�P�P�y�]�]ep"� �# �# sX�)Y ! �Y ! �Y ! icky�@�x�x�u���Z� � �^�^�^�@�x�x�u���Z� � �^�^�^ffness�h�{�{4� 0�,c�f0�,c�f0�,c���.(�O�)��)��)��c�cL�M�g� �o�(M�g� �o�(M�g� �oL�>M�g� �o�0M�g� �o�0M�g� �o�h�{�{4� 0�,c�f0�,c�f0�,c���.(�O�)��)��)��c�cL�M�g� �o�(M�g� �o�(M�g� �oL�>M�g� �o�0M�g� �o�0M�g� �oll�=�x�x�k�^�^��� �T�_�_ �=�x�x�k�^�^���op�>�=>�=>"��#��#��#�<G�5G�5G�J�B�B� ��O�O�u� � 4�:�MJ ��MJ ��MJ ��X�X�k���"�`�`�>�=>�=>"��#��#��#�<G�5G�5G�J�B�B� ��O�O�u� � 4�:�MJ ��MJ ��MJ ��X�X�k��ped�*�3�3� � � �*�3�3� � �  ropagation�m�H�H�3�U�U�m�H�H�3�U�Us��3�3�8� � ��3�3�8� � re � � � �K �X �X � � � �K �X �X raight�g��"��O��O��O�o� �h� �h� �v�_�_�g��"��O��O��O�o� �h� �h� forward�T�p�p �q���T�p�p �q��ngely�N�x�x�l�^�^�N�x�x�l�^�^ength�r�3�3�g�G�G����V�� �r�3�3�g�G�G����V��tched�y �o �o � �U �U �y �o �o � �U �U s� �x�x�(�^�^� �x�x�(�^�^ing�V@�u@�u@��a�a�V@�u@�u@s�M�{�{�l �n �n �K�3�3�% �o �o #� ���M�{�{�l �n �n �K�3�3�% �o �o uck�"� � �"� � dio�~�^�^yle��� V��R�p�p.� o;�= o;�= o;V��S�3�3.�J o;�> o;�> o;j�,A� (.v`�IG �MA� (.v`�IG �MA� (.v`�IG (�(�e2�e�e2�e�e2 V�V��O�G�Gj�XA�(.x`�3G �AA�(.x`�3G �AA�(.x`�3G (�a�$)6�f�$)6�f�$)6@�<u($2�uu($2�uu($2 V� V� V� V� V�V��w � �  V� V�"V��G�)�:�)�:�)��� V��R�p�p.� o;�= o;�= o;V��S�3�3.�J o;�> o;�> o;j�,A� (.v`�IG �MA� (.v`�IG �MA� (.v`�IG (�(�e2�e�e2�e�e2 V�V��O�G�Gj�XA�(.x`�3G �AA�(.x`�3G �AA�(.x`�3G (�a�$)6�f�$)6�f�$)6@�<u($2�uu($2�uu($2 V� V� V� V� V�V��w � � effect U� U� U� U� U� U� U� U� U� U� U� U�U��G�F�F U� U� U� U� U� U� U� U� U� U�s�)6�j6�j6�W�x�x�/���u�^�^�i�c�c�M���y�)6�j6�j6�W�x�XL��7�K4@1V�NJ�!-@+8l1/W;+)l�`�2 ""�V�����;�0��x#�/���u�^�^�i�c�c�M���y 0subscribe"�f�D��D��D d�+�a�a rs�`�a�aption �## �##equent�_�{�{�6� � �_�{�{�6� � ccess�! �5 �5 �! �5 �5 fully�'�X�X�'�X�Xh�!�!dden�e�3�3��G�G�\� �t� �t� �� �|� �|� �e�3�3��G�G�\� �t� �t� �� �|� �|�  ggestions��{�{�{�p�p��{�{�{�p�p percharged� ���F�p�p� ���F�p�ppowers��y�y�X�z�z � ��y�y�X�z�z �port�bW�W�W��T�T�'�x�x�=� � �;�a�a�E�^�^(�bW�W�W��T�T�'�x�x�=� � �;�a�a�E�^�^(ed�*R�cR�cR�r�x�x�F� � ��^�^�*R�cR�cR�r�x�x�F� � ��^�^s� )b�)b�)b(��D9m� �D9m� �D9m$�g�;�@�;�@�;�O� �}��}��} � �D �m � )b�)b�)b(��D9m� �D9m� �D9m$�g�;�@�;�@�;�O� �}��}��} � �D �mvg (�5, Y�V��i��i� 8(�5�s�{��d�{��d�{�FY�O " n� �j " n� �j " n� 4� �9�C�s�9�C�s�9�C>(�5�� +�� +�� + (�5� �s�s(�5� Y� Y�4�'� )�� )�� )��Y�Yp(�5�$��j$��j$�(�5�= Y� Y� Y� Y� Y�Y�>� �  Y� Y� Y� (�5, Y�V��i��i� 8(�5�s�{��d�{��d�{�FY�O " n� �j " n� �j " n� 4� �9�C�s�9�C�s�9�C>(�5�� +�� +�� + (�5� �s�s(�5� Y� Y�4�'� )�� )�� )��Y�Yp(�5�$��j$��j$�(�5�= Y� Y� Y� Y� Y�Y�>� � effect X� X� X� X� X� X� X� X� X� X� X� X� X� X� X� X� X� X� X� X� X� X� X�s ��3�3�v�x�x��^�^�8�� ��3�3�v�x�x��^�^�8��witch �R �Res�[�3�3 �}���5�� �[�3�3 �}���5��ing� �x�x�L�^�^� � �x�x�L�^�^�  ynchronise��x�x�A�^�^��x�x�A�^�^tax�1�{�{�1�{�{stem����B�p�p�X�m� �m� �m�v�m�s�m�s�m  ����B�p�p�X�m� �m� �m�v�m�s�m�s�ms�{�x�x��^�^�{�x�x��^�^t�T�`�`�6�p�p�^��j��j��m�L�i�L�i�L���k��k�(�h� �)� �)� ^�g�. �1�8~ �h�. �1�8~ �h�. �1�8~ �r��(�#�& �+�& �+�& X��0 �1�8~ �c�0 �1�8~ �c�0 �1�8~ �&�c�c�p���\�)�)�(���8�a�a�T�`�`�6�p�p�^��j��j��m�L�i�L�i�L���k��k�(�h� �)� �)� ^�g�. �1�8~ �h�. �1�8~ �h�. �1�8~ �r��(�#�& �+�& �+�& X��0 �1�8~ �c�0 �1�8~ �c�0 �1�8~ �&�c�c�p���\�)�)�(��ab�4�4g�s �W �W ��� �s �W �W ���ilored�M�p�p% �M�p�p%ke�@���I�p�p�O�y�y'��3�3�z�z�z�~�c��c��c��G�G�*�U� �U� �U�]���]�)�)����@���I�p�p�O�y�y'��3�3�z�z�z�~�c��c��c��G�G�*�U� �U� �U�]���]�)�)���s� �x�x�O� � �>�^�^� �x�x�O� � �>�^�^ing�=�x�x�[�^�^�=�x�x�[�^�^lk��x�x�!�^�^��x�x�!�^�^p�}���"�y�yZ �cH% �;{cH% �;{cH% �;" ���M��M��}���"�y�yZ �cH% �;{cH% �;{cH% �;" ���M��M�cancel�c�T�T�c�T�Tpable�p�T�T�p�T�Ts�v�p�p�v�p�prget(�Q�4+I�W�4+I�W�4+I�$�=�x�=�x�=(� �v+I��v+I��v+I�K�T�T�:��^!�Jg\%!:�*Jg\%!:�*Jg\%!:��G�G��a�a�r�c�c�,��L�d�.2* �x�b�.2* �x�b�.2* �x�r��$��$�L��.2* �x�j�.2* �x�j�.2* �x(�Q�4+I�W�4+I�W�4+I2 0'n34<�Z�G��)m@94s+�7&�~?-,�5 ""�V�����<�0��$�=�x�=�x�= (� �v+I��v+I��v+I�K�T�T�:��^!�Jg\%!:�*Jg\%!:�*Jg\%!:��G�G��a�a�r�c�c�,��L�d�.2* �x�b�.2* �x�b�.2* �x�r��$��$�L��.2* �x�j�.2* �x�j�.2* �x0targets4�\�OXR�&\�OXR�&\�OXR.�X\�H�E\�H�E\�H�,�T�T�g�a�a4�\�OXR�&\�OXR�&\�OXR.�X\�H�E\�H�E\�H�,�T�T�g�a�aechnical�\�s�s�z�Y�Y�\�s�s�z�Y�Yll �S���S��mplate b�7.[��`��e��e� b�7([��T ? �- ? �- ?  b�7 b�7 b�7.[��{��D��D�4[��0�0�0F[��s�#1�`�#1�`�#1 b�7 b�7([��7-�8-�8- b�7.[��`��e��e� b�7([��T ? �- ? �- ?  b�7 b�7 b�7.[��{��D��D�4[��0�0�0F[��s�#1�`�#1�`�#1 b�7 b�7([��7-�8-�8-orarily�.�T�T�i�a�a�.�T�T�i�a�axt 6� 6��8�x�x 6�6��"�V�^�^ 6�6��D�{�{6��T� �  6�6��!�X�X 6�6��K�� 6� 6� 6� 6��8�x�x 6�6��"�V�^�^ 6�6��D�{�{6��T� �  6�6��!�X�X 6�han�*���"�{�g�p�p�9�W�y�y�^ �)�"��"��"���z�z"�Q�Q�Q�= �*�!�Y�!�Y�!� ��-�1�G�G*�@Q�Q�Q� �H�!�?�!�?�!�-�Y�],�=��k���k���k��:�~�0��,�u��k���k���k�a�,��G�_�_�-� �a�a�i�*���"�{�g�p�p�9�W�y�y�^ �)�"��"��"���z�z"�Q�Q�Q�= �*�!�Y�!�Y�!� ��-�1�G�G*�@Q�Q�Q� �H�!�?�!�?�!�-�Y�],�=��k���k���k��:�~�0��,�u��k���k���k�a�,t"��!J�1�!J�1�!J$� ?�@i?�@i?�@i�jZJ�PZJ�PZJ4�\��U�N�N��U�N�N��U�NL��@�D�~�;�8�H�@�D�~�;�8�H�@�D�~�;�84����|�_���|�_���|� �T�Tf�[1�B�V|Q9S?�~|1�B�V|Q9S?�~|1�B�V|Q9S?�~"��w ��w ��w *�Np�X�agp�X�agp�X�a"�Nv�K� v�K� v�K�E�a�af�1�I�A|Q9S?�~p1�I�A|Q9S?�~p1�I�A|Q9S?�~"�S�y �a�y �a�y �d��_X�%�C�u�E3�T� �f�C�u�E3�T� �f�C�u�E3�T� �@�g�g��5W\�\W\�\W\"�<�(�l�(�l�($� �]`ZG�]`ZG�]`ZX�]�C�u�E3�T� �n�C�u�E3�T� �n�C�u�E3�T� �b� � �[���)�8)�8)��oJ,�oJ,�oJ"��!J�1�!J�1�!J$� ?�@i?�@i?�@i�jZJ�PZJ�PZJ4�\��U�N�N��U�N�N��U�NL��@�D�~�;�8�H�@�D�~�;�8�H�@�D�~�;�84����|�_���|�_���|� �T�Tf�[1�B�V|Q9S?�~|1�B�V|Q9S?�~|1�B�V|Q9S?�~"��w ��w ��w *�Np�X�agp�X�agp�X�a"�Nv�K� v�K� v�K�E�a�af�1�I�A|Q9S?�~p1�I�A|Q9S?�~p1�I�A|Q9S?�~"�S�y �a�y �a�y �d��_X�%�C�u�E3�T� �f�C�u�E3�T� �f�C�u�E3�T� �@�g�g��5W\�\W\�\W\"�<�(�l�(�l�($� �]`ZG�]`ZG�]`ZX�]�C�u�E3�T� �n�C�u�E3�T� �n�C�u�E3�T� �b� � ex� \  jM1#][ \  jM1#][ \  jM1#]q�r�' /5 . :."/')I-5" /5 . :."/')I-5" /5 . :."/')I-5"��0? E48 ' tW(5B? E48 ' tW(5B? E48 ' tW(5�R�-H�EC*# > b �.E\/S+JH�EC*# > b �.E\/S+JH�EC*# > b �.E\/S+J�Jr�(?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  (?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  (?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  �L�fH�Eb*# @ b NEj1c6KH�Eb*# @ b NEj1c6KH�Eb*# @ b NEj1c6��~V :  2  : " >V :  2  : " >V :  2  : " >��t%M1 !>. =g4( "   #)4&%M1 !>. =g4( "   #)4&%M1 !>. =g4( "   #)4&b� �~'! &*VX-'! &*VX-'! &*VX-�.r�-�u�>�(1�{�#�e ""�V�����=�0��@4  " !     10@4  " !     10@4  " !     1 �r�y A # 5  "5/y A # 5  "5/y A # 5  "5/��6Y :  2  / %" >~Y :  2  / %" >~Y :  2  / %" >��bM1 !?0 'g4( "   #)4&PM1 !?0 'g4( "   #)4&PM1 !?0 'g4( "   #)4&x�6' ,*x0' ,*x0' ,*x0��J!& 3:"* BJ!& 3:"* BJ!& 3:"* ��o>M51Q25  3  H: D<&$!  *, b !>M51Q25  3  H: D<&$!  *, b !>M51Q25  3  H: D<&$!  *, b !M r��@ 8r�/##F,/##F,/##FFr�eX %=yX %=yX %=�r�6 0  +     ,   )  6 0  +     ,   )  6 0  +     ,   )  jr�U+Z# ;i+Z# ;i+Z# ;��'>M51Q25  3  H: D<&$!  *, j !>M51Q25  3  H: D<&$!  *, j !>M51Q25  3  H: D<&$!  *, j !` r�5F - 5F - 5F - :r�@(.(T(.(T(.(hr�.O  o�.O  o�.O  o�. r�!D ! ! & .!D ! ! & .!D ! ! & .x� \  jM1#][ \  jM1#][ \  jM1#]q�r�' /5 . :."/')I-5" /5 . :."/')I-5" /5 . :."/')I-5"��0? E48 ' tW(5B? E48 ' tW(5B? E48 ' tW(5�R�-H�EC*# > b �.E\/S+JH�EC*# > b �.E\/S+JH�EC*# > b �.E\/S+J�Jr�(?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  (?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  (?M*-2,N\,LMG0; 1  -/A  .# &); #!%?  �L�fH�Eb*# @ b NEj1c6KH�Eb*# @ b NEj1c6KH�Eb*# @ b NEj1c6��~V :  2  : " >V :  2  : " >V :  2  : " >��t%M1 !>. =g4( "   #)4&%M1 !>. =g4( "   #)4&%M1 !>. =g4( "   #)4&b� �~'! &*VX-'! &*VX-'! &*VX-�.r�-@4  " !     10@4  " !     10@4  " !     1�r�y A # 5  "5/y A # 5  "5/y A # 5  "5/��6Y :  2  / %" >~Y :  2  / %" >~Y :  2  / %" >��bM1 !?0 'g4( "   #)4&PM1 !?0 'g4( "   #)4&PM1 !?0 'g4( "   #)4&x�6' ,*x0' ,*x0' ,*x0��J!& 3:"* BJ!& 3:"* BJ!& 3:"* ��o>M51Q25  3  H: D<&$!  *, b !>M51Q25  3  H: D<&$!  *, b !>M51Q25  3  H: D<&$!  *, b !M r��@ 8r�/##F,/##F,/##FFr�eX %=yX %=yX %=�r�6 0  +     ,   )  6 0  +     ,   )  6 0  +     ,   )  jr�U+Z# ;i+Z# ;i+Z# ;��'>M51Q25  3  H: D<&$! ""�V�����>�0��  *, j !>M51Q25  3  H: D<&$!  *, j !>M51Q25  3  H: D<&$!  *, j !1` r�5F - 5F - 5F - 0their�.���b�T�T��x�x�(�a�a�!�^�^�Q� � � �X�X�d�a�a�.���b�T�T��x�x�(�a�a�!�^�^�Q� � � �X�Xm4�C�9(y'i��9(y'i��9(y'i4�o�?(y)i�v�?(y)i�v�?(y)i��{�{�@�E�E�J�a�a4�C�9(y'i��9(y'i��9(y'i4�o�?(y)i�v�?(y)i�v�?(y)i��{�{n��{�{����B�x�x�� � �`�^�^��{�{����B�x�x�� � �`�^�^re�@���.�{�{�P�p�p�@ �* �* �~��k��k��l�`�4�`�4�`���Q��Q��$�c�c���� �v �v ��< �~ �~ �p�x�x�@���.�{�{�P�p�p�@ �* �* �~��k��k��l�`�4�`�4�`���Q��Q��$�c�c���� �v �v ��< �~ �~ �p�x�xby�V������V�����fore�_�y�y��z�z��T�T�W�a�a�V���_�y�y��z�z��T�T�W�a�a�V��se�[���k�{�{�c�<�?�<�?�<.�dqv��(qv��(qv��^�j��j��j�(�b!U�b!U�b!"�,`G�+,`G�+,`G�&���B� � �J�G�G�c�m!W�m!W�m!"�L,JG�',JG�',JG�`�c�c�h�h�h.�V���P���P���-� � .����X���X����_�_�[���k�{�{�c�<�?�<�?�<.�dqv��(qv��(qv��^�j��j��j�(�b!U�b!U�b!"�,`G�+,`G�+,`G�&���B� � �J�G�G�c�m!W�m!W�m!"�L,JG�',JG�',JG�`�c�c�h�h�h.�V���P���P���-� � .����X���X��y�M���n0�eR'�}� R'�}� R'�}�M(�^R'��R'��R'�B�D�K�D�+�+�K�D�+�+�K�D�+��<� � :�r�Q�D�+�!�Q�D�+�!�Q�D�+�T�9T�9T�& � � ��X�X�(�;(�;(�M���n0�eR'�}� R'�}� R'�}�M(�^R'��R'��R'�B�D�K�D�+�+�K�D�+�+�K�D�+��<� � :�r�Q�D�+�!�Q�D�+�!�Q�D�+�T�9T�9T�& � � ��X�Xing�<�x�x�Z�^�^�<�x�x�Z�^�^s�=�x�x�[�^�^�=�x�x�[�^�^k�>�a�ard�z���z��s(�6�8�\��8�\��8�\4�&-I��U�$-I��U�$-I��U�>�p��p��pl��N��*d)�,Dp� =�N��*d)�,Dp� =�N��*d)�,Dp� ^� & � "Lb4W�S�0& � "Lb4W�S�0& � "Lb4W�Sr�P�N��jf)�LD��.>�N��jf)�LD��.>�N��jf)�LD��.(�D?:M&�p?:M&�p?:M&��H)(�/on4�]E�)(�/on4�]E�)(�/on4�]E��w��w��wZ�)L9�g  >�bL9�g  >�bL9�g  >�<�eZ�C& �oZ�C& �oZ�C& �(��M&�r�M&�r�M&� �B�8)(�1Yn4�]Ea�8)(�1Yn4�]Ea�8)(�1Yn4�]E�F�E� �E� �E6�smI) F�7?mI) F�7?mI) F�7|�L& �>9�$$N��E& �>9�$$N��E& �>9�$$N��"�f�v�v.�"E�t�EE�t�EE�t|�& �>9�$$N�"�I& �>9�$$N�"�I& �>9�$$N�"�@�L@�L@�X�_�_�b�a�a(�6�8�\��8�\��8�\4�&-I��U�$-I��U�$-I��U�>�p��p��pl��N��*d)�,Dp� =�N��*d)�,Dp� =�N��*d)�,Dp� ^� & � "Lb4W�S�0& � "Lb4W�S�0& � "Lb4W�Sr�P�N��jf)�LD��.>�N��jf)�LD��.>�N��jf)�LD��.(�D?:M&�p?:M&�p?:M&��H)(�/on4�]E�)(�/on4�]E�)(�/on4�]E��w��w��wZ�)L9�g  >�bL9�g  >�bL9�g  >�<�eZ�C& �oZ�C& �oZ�C& �(��M&�r�M&�r�M&� �B�8)(�1Yn4�]Ea�8)(�1Yn4�]Ea�8)(�1Yn4�]E�F�E� �E� �E6�smI) F�7?mI) F�7?mI) F�7|�L& �>9�$$N��E& �>9�$$N��E& �>9�$$N��"�f�v�v.�"E�t�EE�t�EE�t|�& �>9�$$N�"�I& �>9�$$N�"�I& �>9�$$N�"�@�L@�L@ose�[��k��k���P�,�P�,�P�D�x�x�b�^�^�[��k��k���P�,�P�,�P�D�x�x�b�^�^rashing�N� � �N� � ead�`�)�)�`�)�)e��{�{�e�y�y4�m� � �� � �� � "��6�6�6�6�6 �q�� ��{�{�e�y�y4�m� � �� � �� � "��6�6�6�6�6 �q��js� �3�3� �3�3ottles��a�augh�~��w��w��E��!s�<,j� �l-+ �cm� ""�V�����?�0��y�$�X�$�X�$�`�T�T�����a�a��c�c��{�{�z�_�_�~��w��w��y�$�X�$�X�$�`�T�T�����a�a��c�c��{�{ 0throughout(�9��?�8��?�8��?��3�3"�4�_��_��_�H� � �a�������_�_(�9��?�8��?�8��?��3�3"�4�_��_��_�H� � �a�����ickerR�5K�R�5K�R�5R�5�C"R�5�x   K�K�K�R�5R�5K�R�5K�R�5K�R�5R�5�C"R�5�x   K�K�K�R�5R�5K�dy��y�y��y�ymet�7�d�m��t�7�J�y�y�Y�4�o�&�9A 8�A,� �8�&�9A 8�A,� �8�&�9A 8�A,� um�� �z�z�+t�7�H�T�T�7&t�7�F�?�;�?�;�?�A t�7�%���u����J�!o1�&!o1�&!o1�4m��9�a�a�w$m��$�*�6�*�6�*am���c�c�*t�7�KD t�7�.�E�T�5�E�T�5�E�T�*�##�t�:�C:�C:S�`� � U��-�X�XSD m���E�T�=�E�T�=�E�T�|�A�W��S�A�Ft�7�d�m��t�7�J�y�y�Y�4�o�&�9A 8�A,� �8�&�9A 8�A,� �8�&�9A 8�A,� um�� �z�z�+t�7�H�T�T�7&t�7�F�?�;�?�;�?�> t�7�%���t����J�!o1�&!o1�&!o1�4m��9�a�a�w$m��$�*�6�*�6�*am���c�c�*t�7�KD t�7�.�E�T�5�E�T�5�E�T�*�##�t�:�C:�C:S�`� � U��-�X�XSD m���E�T�=�E�T�=�E�T�|�Aconstant�H�i�i��q�q�H�i�i��q�qline��3�3 ��3�3 physics�U�3�3��G�G����L�� �U�3�3��G�G����L��s�J�{�{.�E#�M#�M#4��h��h��h.�@#�N#�N#�p��4��4�4�Q�D��D��D4� �D� �D� �D�J�{�{.�E#�M#�M#4��h��h��h.�@#�N#�N#�p��4��4�4�Q�D��D��D4� �D� �D� �Ding �f �fny�=�{�{�c�)�)�a�_�_�=�{�{�c�)�)pso��)� "64 !-4)� "64 !-4)� "64 !-N�vl t �Y1s0�+>�Y1s0�+>�Y1s0�+a��DP25�3)M .;P25�3)M .;P25�3)M .H�<�t QO-9g %8 r�<i:", �;z� QO-9g %8 r�<i:", �;z� QO-9g %8 r�<i:", �;z�P��Hl t �$�!G!I L.G7:7S<� @A'-$ 2 ZP�>�.�!G!I L.G7:7S<� @A'-$ 2 ZP�>�.�!G!I L.G7:7S<� @A'-$ 2 ZP�>F�4�, RO-9g %8 �2�>i:"�� _P RO-9g %8 �2�>i:"�� _P RO-9g %8 �2�>i:"�� _}�$�- @� Q $-",s"3\ @� Q $-",s"3\ @� Q $-",s"3I�&�r�<z  104  kM. �@^.R6 "�rz  104  kM. �@^.R6 "�rz  104  kM. �@^.R6 "�j�+R�20tY j6$20tY j6$20tY j6��l t �V y.uK �V y.uK �V y.uK;ll t [II%)K?g[II%)K?g[II%)K?���h @� Q $-62s"3^ @� Q $-62s"3^ @� Q $-62s"3M�d�-=|  306  kO. �@^.R6 "�+=|  306  kO. �@^.R6 "�+=|  306  kO. �@^.R6 "�UJ�>2,zY T9$2,zY T9$2,zY T9=8�y}"�qh}"�qh}"�q��d�q>KA<79O(d�U$I) <��$>KA<79O(d�U$I) <��$>KA<79O(d�U$I) <�[�"l t tK*% >Dl t &*V4&*V4&*VW@l t %F�@# DF�@# DF�@# YZl t �42 #K�442 #K�442 #K\Ll t a@�9#;a@�9#;a@�9#W�\�)>KA<79O(d�U$I) <��$>KA<79O(d�U$I) <��$>KA<79O(d�U$I) <�SD l t 8 dJ8 dJ8 dv2 l t �P4�P4�PWP l t 7.K�0\7.K�0\7.K�0�x l t A !/ 5<2 := !/ 5<2 := !/ 5<2 :5��)� "64 !-4)� "64 !-4)� "64 !-N�vl t ��8� �>*Y�C6 &&�V���R�����@�(7��Y1s0�+>�Y1s0�+>�Y1s0�+a��DP25�3)M .;P25�3)M .;P25�3)M .H�<�t QO-9g %8 r�<i:", �;z� QO-9g %8 r�<i:", �;z� QO-9g %8 r�<i:", �;z�P��Hl t �$�!G!I L.G7:7S<� @A'-$ 2 ZP�>�.�!G!I L.G7:7S<� @A'-$ 2 ZP�>�.�!G!I L.G7:7S<� @A'-$ 2 ZP�>F�4�, RO-9g %8 �2�>i:"�� _P RO-9g %8 �2�>i:"�� _P RO-9g %8 �2�>i:"�� _}�$�- @� Q $-",s"3\ @� Q $-",s"3\ @� Q $-",s"3I�&�r�<z  104  kM. �@^.R6 "�rz  104  kM. �@^.R6 "�rz  104  kM. �@^.R6 "�j�(R�20tY j6$20tY j6$20tY j6��l t �V y.uK �V y.uK �V y.uK;ll t [II%)K?g[II%)K?g[II%)K?���h @� Q $-62s"3^ @� Q $-62s"3^ @� Q $-62s"3M�d�-=|  306  kO. �@^.R6 "�+=|  306  kO. �@^.R6 "�+=|  306  kO. �@^.R6 "�UJ�>2,zY T9$2,zY T9$2,zY T9=8�y}"�qh}"�qh}"�q��d�q>KA<79O(d�U$I) <��$>KA<79O(d�U$I) <��$>KA<79O(d�U$I) <�[�"l t tK*% >Dl t &*V4&*V4&*VW@l t %F�@# DF�@# DF�@# YZl t �42 #K�442 #K�442 #K\Ll t a@�9#;a@�9#;a@�9#W�\�)>KA<79O(d�U$I) <��$>KA<79O(d�U$I) <��$>KA<79O(d�U$I) <�SD l t 8 dJ8 dJ8 dv0tool�)�{�{� �3�3��x�x��^�^�y���1���)�{�{� �3�3��x�x��^�^�y���1��s0 �6�"�v�v�^ ��{�{�{� ��I�p�p�Q �6�w ��3 �� �6�   �6� �G �6�\ ��6 ��l ��M ��D ��S �6�3 �6� ��C �� ��9 �� �� ��@ ��5 �� ��5 ��:0 �6�"�v�v�^ ��{�{�{� ��I�p�p�Q �6�w ��3 �� �6�   �6� �D �6�Y ��6 ��l ��M ��D ��S �6�3 �6� ��C �� ��9 �� �� ��@ ��5p�-�y�y�f�z�z�`�T�T"�E�S+��S+��S+��a�a�@���9�)�) �-�y�y�f�z�z�`�T�T"�E�S+��S+��S+��a�a�@���9�)�)ics�/�R�c�O��;�d �/�R�c�O��;�dtal��3�3�p�z�z�U� � �����{�{ ��3�3�p�z�z�U� � �����{�{uch�t�p�p4�!�= �`�= �`�= 4�\�= �m�= �m�= �� � �.�X�X�t�p�p4�!�= �`�= �`�= 4�\�= �m�= �m�= �� � �.�X�Xr�C���L�p�p�C���L�p�prack �X��L�\ -�t!� -�t!� -�t!�b�_�_ ��a�a �X��L�\ -�t!� -�t!� -�t!�b�_�_ed �R�%�g�%�g�%�R�%�g�%�g�%ing �y�y�y �?,�`,�`, �y�y�y �?,�`,�`,s �g� � �g� �  ditionally��x�x��x�xnsform x�7(<w�f-�lf-�lf- q�Fx�7�LLb�"Lb�"Lb(<w�S��4��4�Fq��0Lb�#Lb�#Lb x�7>x�7e�8|�\�T��8|�\�T��8|�\�T(x�7�| � � <w�j� � <wZ�G�G q�4q��z|�F�T�N|�F�T�N|�F�T(q��- �T �T x�7�m$�z$�z$ x�7<w<w�,<w<w<w q�<wT<w=VDVDVD<w<w x�7(<w�f-�lf-�lf- q�Fx�7�LLb�"Lb�"Lb(<w�S��4��4�Fq��0Lb�#Lb�#Lb x�7>x�7e�8|�\�T��8|�\�T��8|�\�T(x�7�| � � <w�j� � <wZ�G�G q�4q��z|�F�T�N|�F�T�N|�F�T(q��- �T �T x�7�m$�z$�z$ x�7<w<w�,<w<w<w q�<w ation�A���~�b�!Yo�7+�$> �6 ""�V�����A�0� 0transformbox�s � � �s � � er@�R F � F � F perspective� �y�y�1�3�3�E�z�z� �y�y�1�3�3�E�z�z s����F�{�{�s�p�p( �p* �7* �7* �8]�X]�X]( �)* �8* �8* "�O+��N+��N+�"�+�m�J+�m�J+�m( � z�z�z ����F�{�{�s�p�p( �p* �7* �7* �8]�X]�X]( �)* �8* �8* "�O+��N+��N+�"�+�m�J+�m�J+�m( � z�z�z value H� H� H� H� H� H� H� H� H� H� H� H� H� H� H� H� H� H� H� H� H� H� H�ition�- � �  "%��F �e �e  d�Mp� �b$!�l �.p� �b$!�l �.p� �b$!�l  4�cl�a��el�a��el�a� j%��Rp�I �d$!� $ �?p�I �d$!� $ �?p�I �d$!� $  �<�T�T ^�u    ��j    ��j    �  �&z�Oz�Oz %��C�a�a j %��q    � �b    � �b    �  %��  � �m  " m�dE-(A#%�m/$1 1.&   " m�dE-(A#%�m/$1 1.&   " m�dE-(A#%�m/$1 1.&n �K< � %�q  " m�dE-(A#%�m/$3 50&   " m�dE-(A#%�m/$3 50&   " m�dE-(A#%�m/$3 50& �- � �  "%��F �e �e  d�Mp� �b$!�l �.p� �b$!�l �.p� �b$!�l  4�cl�a��el�a��el�a� j%��Rp�I �d$!� $ �?p�I �d$!� $ �?p�I �d$!� $  �<�T�T ^�u    ��j    ��j    �  �&z�Oz�Oz %��C�a�a j %��q    � �b    � �b    �  %��  � �m  " m�dE-(A#%�m/$1 1.&   " m�dE-(A#%�m/$1 1.&   " m�dE-(A#%�m/$1 1.&n �K< � %�q  " m�dE-(A#%�m/$3 50&   " m�dE-(A#%�m/$3 50&   " m�dE-(A#%�m/$3 50& s&,�5�K��"(��B�j�jb,�5�) 2��� 2��� 2��"�( �4�x �4�x �4v(��L 2��3�o 2��3�o 2��3,�5�   � ,�5�u�*�  *aJP6n�*�  *aJP6n�*�  *aJP6,�5�#�G�G (��(��K�.�  *aJP6b�.�  *aJP6b�.�  *aJP6(��,�5�r:,�5�Y5 �8�5 �8�5 �8�4(��;5 �8�5 �8�5 �8�4�_�_&,�5�K��"(��B�j�jb,�5�) 2��� 2��� 2��"�( �4�x �4�x �4v(��L 2��3�o 2��3�o 2��3,�5�   � ,�5�u�*�  *aJP6n�*�  *aJP6n�*�  *aJP6,�5�#�G�G (��(��K�.�  *aJP6b�.�  *aJP6b�.�  *aJP6(��,�5�r:,�5�Y5 �8�5 �8�5 �8�4(��;5 �8�5 �8�5 �8late�z�y�y��3�3�3�z�z�z�y�y��3�3�3�z�z x�G�u�u��3�3��v�v�$�G�G�G�u�u��3�3��v�v�$�G�Gvel�x�T�T�G� � �>�a�a�x�T�T�G� � �>�a�aees�{�y�y��z�z�{�y�y��z�zick �N���N��gger�C���R�{�{� �p�p�% �C �C �8�x�x�` �P �P �l�^�^�;���s���C���R�{�{� �p�p�% �C �C �8�x�x�` �P �P �l�^�^�;���s��ed�>���,�O�{�{�r�[�[ �=�=�x�x(�t�q�q�0� � �o�^�^(�,�B�B �&� � �>���,�O�{�{�r�[�[ �=�=�x�x(�t�q�q�0� � �o�^�^(�,�B�B �&� � ing �s�� �;H�EH�EH�R�X�X�s�� �;H�EH�EH�R�X�Xs�]�y�y��z�z��x�x�-�^�^�]�y�y��z�z��x�x�-�^�^ oubleshooting�,�x�x�`�^�^�,�x�x�`�^�^ue�.�p�p�G�x�x�g�{�{�m�G�G�w�^�^��L�L� -�`-�`-�#N-�aN-�aN-��a�a�.�p�p�G�x�x�g�{�{�m�G�G�w�^�^��L�L� -�`-�`-�#N-�aN-�aN-ly�F�x�x�r�^�^(&I�)�(�p�B_A-�R�Gg7�L !!�W�����B�2 ��F�x�x'�r�^�^0trusted������y�j�x�x��^�^�j�x�x��^�^s�f�p�p�f�p�pug�5�T�T�{�a�a�5�T�T�{�a�atorials �b �u �4 �b �r �1weak�,�{�{�,�{�{en.�/[.�)[.�)[. (�2] .�k] .�k] .(�j] .�s] .�s] . .�/[.�)[.�)[. (�2] .�k] .�k] .(�j] .�s] .�s] .o�d�{�{��y�y��3�3�L�z�z:�{E�%�*�@�,E�%�*�@�,E�%�*�@"�n�# �f�# �f�# "�y�N �r�N �r�N :�1;�,��@�*;�,��@�*;�,��@"�&�% �5�% �5�% �Y���w�� �s-�/���H���d�{�{��y�y��3�3�L�z�z:�{E�%�*�@�,E�%�*�@�,E�%�*�@"�n�# �f�# �f�# "�y�N �r�N �r�N :�1;�,��@�*;�,��@�*;�,��@"�&�% �5�% �5�% �Y���w�� �s-�/��ype�3�5�H�5�H�5.� �9�L�j�9�L�j�9�Lp�#�W!o�yQ"#�e�W!o�yQ"#�e�W!o�yQ"#.�B�9� �+�9� �+�9� �R�x�x�&�G�G��^�^�l��|�pk"h�4SA#%��tk"h�4SA#%��tk"h�4SA#%�|�(k"h�4SA#%��|k"h�4SA#%��|k"h�4SA#%��3�5�H�5�H�5.� �9�L�j�9�L�j�9�Lp�#�W!o�yQ"#�e�W!o�yQ"#�e�W!o�yQ"#.�B�9� �+�9� �+�9� �R�x�x�&�G�G��^�^�l��|�pk"h�4SA#%��tk"h�4SA#%��tk"h�4SA#%�|�(k"h�4SA#%��|k"h�4SA#%��|k"h�4SA#%�s�6����p�p�'�i�i�'�3�3�`�j�j�o!�s!�s!�'!�D!�D! �y�a�a�6����p�p�'�i�i�'�3�3�`�j�j�o!�s!�s!�'!�D!�D!writerU�5N�U�5N�U�5U�5U�5N�N�N�U�5U�5N�U�5N�U�5N�U�5U�5U�5N�N�N�U�5U�5N�ically�'�T�T�m�a�a�'�T�T�m�a�aui�"�5"��&�"�5 �S�(�S�(�S�/�F�6�F�6�F �"�5%�T�T�"�5�"�5�4�a�a�"�5�"�5�(���7���"�5"��&�"�5 �S�(�S�(�S�/�F�6�F�6�F �"�5%�T�T�"�5�"�5�4�a�a�"�5�"�5�(���7��s �#� �  �#� � l����]�p�p@�4!�8(�Q�!�8(�Q�!�8(�Q@�4D)�v�{ �;D)�v�{ �;D)�v�{ @�m!�(�c�"!�(�c�"!�(�c .�9�1,��1,��1,.�q�40� �40� �40����]�p�p@�4!�8(�Q�!�8(�Q�!�8(�Q@�4D)�v�{ �;D)�v�{ �;D)�v�{ @�m!�(�c�"!�(�c�"!�(�c .�9�1,��1,��1,.�q�40� �40� �40 nanimatable��x�x�H�^�^��x�x�H�^�^derline�4����p�p�7�x�x�e�^�^�# �4����p�p�7�x�x�e�^�^�#neath�7�x�x�U�^�^�7�x�x�U�^�^stand�t�3�3�w���/���t�3�3�w���/��ood�k���#���k���#��sirably� �x�x�)�^�^� �x�x�)�^�^ique� ����{�{�VH�2H�2H�tH�H�H� � ����{�{�VH�2H�2H�tH�H�H�ly�;�y�y�t�z�z�;�y�y�t�z�zt�x�a�as�>�3�3� � � �&�G�G�1���i�� �>�3�3� � � �&�G�G�1���i��less�k�)�)�k�)�)ike�q�y�y�*�z�z�q�y�y�*�z�zocks � ## � ## necessary�f�x�x�f�x�xplugin"� �S �S "� �S �S  subscribe�O�]�]til�>�3�3�f�x�x�D�G�G��^�^�>�3�3�f�x�x�D�G�G��^�^wanted�&� � �&� � p�p�@�{�{�E�t��$��-��x�x�7�p���r�'�]�M�7�^�^�W�S�W�&�4�x�*�1�)�)���@�&�{����&�_�a�a�p�@�{�{�E�t��$��-��x�x�4�p���o�'�]�M�7�^�^�W�S�W�&�4�x�*�1�)�)���@�&date�*�y�y�c�z�z �z �*�y�y�c�z�z �zd�V�3�3 �w �>�a�a�V�3�3 �ws����9�B�8�K�X��E+,9���M�6�r0�!�[5e/R-1n, g-.U�p:1 ""�V�����C�0� �{�k�b�q�u�D�R��H� �-�^�D�+�D�I����9�B�8�K�U��E�{�k�b�q�u�D�R��H� �-�^�D0upgrade�(�4���(�4���(�4�(�4�(�4�����(�4�(�4�������������������(�4���(�4���(�4�(�4�(�4�����(�4�(�4������������on�h�hrls�l�{�{�l�{�{s�H���}�{�{�S�3�3���D��D��1�x�x�^ � � �W�G�G�L��F��F��O�^�^ �R=�B~�~�~"�Me �0e �0e �Y�6�$�6�$�6�1� � ��A�A�H���}�{�{�S�3�3���D��D��1�x�x�^ � � �W�G�G�L��F��F��O�^�^ �R=�B~�~�~"�Me �0e �0e �Y�6�$�6�$�6�1� � age�,�p�p�Q�3�3�W�x�x�|� � �A�G�G��^�^�%�{�{�v� � �h�)�)��X�X�6� � �#���l�_�_��a�a�,�p�p�Q�3�3�W�x�x�|� � �A�G�G��^�^�%�{�{�v� � �h�)�)��X�X�6� � eD`~�,���t�{�{RY`�D�d��d��dn `~�NN�(�N�7N�(�N�7N�(�N(��6�#�^�6�#�^�6�#jY`�8N�j�~�FN�j�~�FN�j�~\`~�K��H��H�P8`~� `~�KC1� KC1� KC1�B��~��~�.�9pp S�pp S�pp SRY`�<��O��O�4Y`� Y`� T!4� T!4� T!48`~d`~�bk/`�uk/`�uk/`�u�K�{�{�[� � �h�)�)�(�X�XXY`�Kk/`�}k/`�}k/`%*�1�a�a�.�YD�vD�vD�C�a�aD`~�,���t�{�{RY`�D�d��d��dn `~�NN�(�N�7N�(�N�7N�(�N(��6�#�^�6�#�^�6�#jY`�8N�j�~�FN�j�~�FN�j�~\`~�K��H��H�P8`~� `~�KC1� KC1� KC1�B��~��~�.�9pp S�pp S�pp SRY`�<��O��O�4Y`� Y`� T!4� T!4� T!48`~d`~�bk/`�uk/`�uk/`�u�K�{�{�[� � �h�)�)�(�X�XXY`�Kk/`�}k/`�}k/`%animate ~�7 w�~�7�%*�Q*�Q*w��{*�R*�R* ~�7 ~�7 ~�7 w� w� w� ~�7~�7�g w� ~�7 w�~�7�%*�Q*�Q*w��{*�R*�R* ~�7 ~�7 ~�7 w� w� w� ~�7~�7�g w� ionframe ��7 {� ��7 {� ��7 ��7 ��7 {� {� {� ��7 ��7 {� ��7 {� ��7 {� ��7 ��7 ��7 {� {� {� ��7 ��7 {�d� �{�{�`�y�y(�$w�]�A$w�]�A$w�]� �z�z�#�T�T"�_c�vc�vc�\� � � )8�j)8�j)8�^�a�a"� e�Xe�Xe@�s8�\.�,�S�H8�\.�,�S�H8�\.�,�S�d� � �v�X�X@�+8�\.�,�S�P8�\.�,�S�P8�\.�,�S� �\�\� � �{�{�`�y�y(�$w�]�A$w�]�A$w�]� �z�z�#�T�T"�_c�vc�vc�\� � � )8�j)8�j)8�^�a�a"� e�Xe�Xe@�s8�\.�,�S�H8�\.�,�S�H8�\.�,�S�d� � �v�X�X@�+8�\.�,�S�P8�\.�,�S�P8�\.�,�Somref �? �= �= �? �= �=  ragcontrols ��7 �� ��7 ����7�N ��7 ��7 �� �� �� ��7 ��7 �� ��7 �� ��7 ����7�N ��7 ��7 �� �� �� ��7 ��7 ��effect�E�6E�6E�E�6E�6�n�{�g�� �k�N�V'�e ""�V�����D�0�E0useful�.�@�;�@�;�@�)`�`�` �a���n���&���.�@�;�@�;�@�)`�`�` �a���n���&��inview � �7 �� � �7 �� � �7 � �7&� �7�)���KV �� ������c�c � �7 � �7 �� � �7 �� � �7 �� � �7 � �7&� �7�)���KS �� ������c�c � �7 � �7 ��motiontemplate ^�7 W� ^�7 W� ^�7 ^�7 ^�7 W� W� W� ^�7 ^�7 W� ^�7 W� ^�7 W� ^�7 ^�7 ^�7 W� W� W� ^�7 ^�7 W� value�6 �o �o �f�l�l �X���6 �o �o �f�l�l �X��event c�7 \� c�7 \� c�7 c�7c�7�M�� \� \� \� c�7 c�7 \� c�7 \� c�7 \� c�7 c�7c�7�M�� \� \� \� c�7 c�7 \� pageinview ��7 ��7 ��7 ��7 ��7 ��7 ��7 ��7 ��7 ��7 ��7 ��7 ��7 ��7r �V���2���j���<�_�_ �V���2���j�� educedmotion ��7 � � ��7 � � ��7 ��7 ��7 � � � � � � ��7 ��7 � � ��7 � � ��7 � � ��7 ��7 ��7 � � � � � � ��7 ��7 � �f�!�5!�5!�"���!�5!�5!�"��s�.��s�|�x�x��^�^  �|�x�x��^�^ crolli�7�`��b��T �h �h  i�7 b� i�7 i�7Li�7�f 6!;X�( 6!;X�( 6!;X   y b� b�:b��K 6]�* 6]�* 6] i�7 i�7 b�i�7�`��b��T �h �h  i�7 b� i�7 i�7Li�7�f 6!;X�( 6!;X�( 6!;X   v b� b�:b��K 6]�* 6]�* 6] i�7 i�7 b�pring m�7 f� m�7 f� m�7 m�7m�7�p � �  f� f�f�� �X �X  m�7 m�7 f� m�7 f� m�7 f� m�7 m�7m�7�p � �  f� f�f�� �X �X  m�7 m�7 f�tate�&�y�y�M�x�x�a���&�y�y�M�x�x�a��time q�7 j� q�7 j� q�7 q�7 q�7 j� j� j� q�7 q�7 j� q�7 j� q�7 j� q�7 q�7 q�7 j� j� j� q�7 q�7 j�ransform u�7 n� u�7 n� u�7 u�7u�7��x�x n� n�n��8�G�G u�7 u�7 n��3�� u�7 n� u�7 n� u�7 u�7u�7��x�x n� n�n��8�G�G u�7 u�7 n�velocity y�7 r� y�7 r� y�7 y�7 y�7 r� r� r� y�7 y�7 r� y�7 r� y�7 r� y�7 y�7 y�7 r� r� r� y�7 y�7 r�ing�+q�)q�)q"� �D �D �h� �g� �g� �\�0�K�0�K�0�*�D�q�D�q�D��>�>�>�>�>�R�T�T@� *�H�K �.� *�H�K �.� *�H�K �.�z���V��x��x��>�\��\��\@�a�L�O ��'�L�O ��'�L�O ��4�c�c�1A�]A�]A�1 �a �a ��{�{�A�X�X�q �i �i ��a�a�+q�)q�)q"� �D �D �h� �g� �g� �\�0�K�0�K�0�*�D�q�D�q�D��>�>�>�>�>�R�T�T@� *�H�K �.� *�H�K �.� *�H�K �.�z���V��x��x��>�\��\��\@�a�L�O ��'�L�O ��'�L�O ��4�c�c�1A�]A�]A�1 �a �a ��{�{�A�X�X�q �i �i ual� ��� ��ly�B�y�y��3�3�;�z�z �����!�`�!�`�!�:�!�h�!�h�!�+�_�_�$�a�a�B�y�y��3�3�;�z�z �����!�`�!�`�!�:�!�h�!�h�!tilitieszes -� -� -� -� -� -� -� -� -� -� -� -� -� -� -� -� -� -� -� -� -� -� -�v4�Z� �� �� 0�]��}�k��}�k��}�� �x�x�B �C �C 4�a>o�O�U�>o�O�U�>o�O�U�{�c�c4�Z� �� �� 0�]��}�k��}�k��}�� �x�x�B �C �C 4�a>o�O�U�>o�O�U�>o�O�U�{�c�c0�x�y�y�x�y�yalue] �- �U�� D{��{�{&V � �(�#�O�#�O�#�] �- �)10�IE.`��� 10�IE.`~�~�FU�I|I�^1 5�S�aB�<�n�@�S�(�$�i !!�W�����E�2!Ł�� 10�IE.`���$D{�3%-�eG`�e+ �}#3�K�W%-�eG`�e+ �}#3�K�W%-�eG`�e+ �}#3�K�V � � 10�IEC-�j�G *o10�IEC-�j�G *o10�IEC-�j�G *] �- �(�T�T] �- 2] �- �e$f>�M$f>�M$f>>D{Jw�2�gtw�2�gtw�2�gJD{�.c �/�c �/�c �/&V � �E M� M� MV � 2V � �J$.B�R$.B�R$.B(] �- �*:�d:�d:�P�] �- � �>q+S�-$ !,[ j� �>q+S�-$ !,[ j� �>q+S�-$ !,[ jD{D{D{D{D{�V � � �>q+S�-$ !,[ j� �>q+S�-$ !,[ j� �>q+S�-$ !,[ jD{�W0 D{>6$�,6$�,6$ D{�6�_�_�D{�[ L  %;�% L  %;�% L  %; ] �- �U�� D{��{�{&V � �(�#�O�#�O�#�] �- �)10�IE.`��� 10�IE.`��� 10�IE.`���$D{�3%-�eG`�e+ �}#3�K�W%-�eG`�e+ �}#3�K�W%-�eG`�e+ �}#3�K�V � � 10�IEC-�j�G *o10�IEC-�j�G *o10�IEC-�j�G *] �- �(�T�T] �- 2] �- �e$f>�M$f>�M$f>>D{Jw�2�gtw�2�gtw�2�gJD{�.c �/�c �/�c �/&V � �E M� M� MV � 2V � �J$.B�R$.B�R$.B(] �- �*:�d:�d:�P�] �- � �>q+S�-$ !,[ j� �>q+S�-$ !,[ j� �>q+S�-$ !,[ jD{D{D{D{D{�V � � �>q+S�-$ !,[ j� �>q+S�-$ !,[ j� �>q+S�-$ !,[ jD{�W0values"Y�7� 5 �\5 �\5 "A��6�U�(�U�(�U"R��v =�* =�* =RY�7�*<�\�F8BQh�N*<�\�F8BQh�N*<�\�F8BQhjA��[��]0�G�H�5��]0�G�H�5��]0�G�HRR��*<�\�8BSh� *<�\�8BSh� *<�\�8BSh"Y�7�A��<��<�(Y�7��v �}�v �}�v :Y�7v�|�U�|�U�|�A���p�p4A��9�X�.�6�X�.�6�X�."R��'��I��I�&R�i�~ �[�~ �[�~ 4R�Y�~OX�~OX�~O0Y�7�54#�I4#�I4#�*>Y�7lH�r� �H�r� �H�r�  A� A� A�"A��s �  �   A�>R�OH�r� �H�r� �H�r�  A�A�O.^z.^z.^ A�NA�F >+6\`` >+6\`` >+6\`"Y�7� 5 �\5 �\5 "A��6�U�(�U�(�U"R��v =�* =�* =RY�7�*<�\�F8BQh�N*<�\�F8BQh�N*<�\�F8BQhjA��[��]0�G�H�5��]0�G�H�5��]0�G�HRR��*<�\�8BSh� *<�\�8BSh� *<�\�8BSh"Y�7�A��<��<�(Y�7��v �}�v �}�v :Y�7v�|�U�|�U�|�A���p�p4A��9�X�.�6�X�.�6�X�."R��'��I��I�&R�i�~ �[�~ �[�~ 4R�Y�~OX�~OX�~O0Y�7�54#�I4#�I4#�*>Y�7lH�r� �H�r� �H�r�  A� A� A�"A��s �  �   A�>R�OH�r� �H�r� �H�r�  A�nilla�g���T�p�p�g���T�p�pr:�D9�5 �u9�5 �u9�5 "�}9�79�79:�D9�5 �u9�5 �u9�5 "�}9�79�79iable�J�{�{�./�L/�L/�g/�M/�M/�J�{�{�./�L/�L/�g/�M/�M/ s.� V� V� V"�Et �:t �:t .�F V� V� V.� V� V� V"�Et �:t �:t .�F V� V� Vnt�n �n �n �/| �u| �u| �<���t�c�c�n �n �n �/| �u| �u| �<���t�c�cs�b��-�r�p�p�. �'   +/:.%�i   +/:.%�i   +/:.%�9��"   :<'�:   :<'�:   :<'6�V�7s�7s�76��Bw�Bw�B�ECF�56 ( �6 ( �6 ( Ig:�m9 + �9 + �9 + �b��-�r�p�p�. �'   +/:.%�i   +/:.%�i   +/:.%�9��"   :<'�:   :<'�:   :<'6�V�7s�7s�76��Bw�Bw�B�ECF�56 ( �6 ( �6 ( Ig:�m9 + �9 + �9 + ouse�!�{�{��y�y�!�{�{��y�ylocity |�7 u� |�7:�V�$ �W�$ �W�$  u�|�7��T�T |�7|�7�4���l����@�@u��z�a�a u�u��h�c�c |�7F|�7�*�T�a�T�a�T�L�{�{�\� � �)�X�XFu�� �D�h/gO� l� + ""�V�����F�0 ��T�i�T�i�T�S��B� �? c.c�? c.c�? c. |�7 u� |�7:�V�$ �W�$ �W�$  u�|�7��T�T |�7|�7�4���l����@�@u��z�a�a u�u��h�c�c |�7F|�7�*�T�a�T�a�T�L�{�{�\� � �)�X�XFu�� �T�i�T�i�T0vercel��l�l�#�R�R��l�l�#�R�Rsion"�C�/ �D�/ �D�/ �#e�@e�@e"�C�/ �D�/ �D�/ �#e�@e�@es�h�3�3�h�3�3tical "�O�A�K�A�K�A"�O�A�K�A�K�Ay�5���E�p�p"�i�-�5�-�5�-"��-��-��-�s�� �^�_�_�5���E�p�p"�i�-�5�-�5�-"��-��-��-�s��h �� � �� � ia.�L U/�'�i U/�'�i U/�'�z�{�{4�U� *�(�� *�(�� *�(F�>5�\�)�'�5�\�)�'�5�\�)�':�y�V�Kp ��V�Kp ��V�Kp F�75�^�)�U�a5�^�)�U�a5�^�)�U(�X�y�o�p�y�o�p�y�o@�w�/�M,�N� �/�M,�N� �/�M,�N�y� � (��y�z�r�y�z�r�y�z:�#�7�7,�N�~�7�7,�N�~�7�7,�N6 � �  ht�  ht�  h.�uC�J�CC�J�CC�J��Q�{�{�!�l!�l!�DU�U�U.�-C�J�KC�J�KC�J�'� � �i-�9-�9-.�L U/�'�i U/�'�i U/�'�z�{�{4�U� *�(�� *�(�� *�(F�>5�\�)�'�5�\�)�'�5�\�)�':�y�V�Kp ��V�Kp ��V�Kp F�75�^�)�U�a5�^�)�U�a5�^�)�U(�X�y�o�p�y�o�p�y�o@�w�/�M,�N� �/�M,�N� �/�M,�N�y� � (��y�z�r�y�z�r�y�z:�#�7�7,�N�~�7�7,�N�~�7�7,�N6 � �  ht�  ht�  h.�uC�J�CC�J�CC�J��Q�{�{�!�l!�l!�DU�U�U.�-C�J�KC�J�KC�J�'� � deo��X�X��X�Xs�;�)�)�;�)�)ew��1 � � ���1 � � ���1|��1�V  </J'+%�8  </J'+%�8  </J'+%4��1y�,�c�,�c�,�P�� � � �x� ��%  </J'+%�  </J'+%�  </J'+%(� �b�.�2�.�2�.��1�2����1$��`N< � �.��L�A�L�A�L� � � � � ��� ���1 � � ���1 � � ���1|��1�V  </J'+%�8  </J'+%�8  </J'+%4��1y�,�c�,�c�,�P�� � � �x� ��%  </J'+%�  </J'+%�  </J'+%(� �b�.�2�.�2�.��1�2����1$��`N< � �.��L�A�L�A�L� � � � �box:�U C�YU C�YU C:�U C�YU C�YU Cport�X���X�{�{�!�p�p� �y�y�'�z�zr�'1*�|2'1*�|2'1*�|^0�?��RjB��RjB��RjH�7'I=�L1'I=�L1'I=�L�<x�� >&(&88� >&(&88� >&(&8. � )�I )�I )�X���X�{�{�!�p�p� �y�y�'�z�zr�'1*�|2'1*�|2'1*�|^0�?��RjB��RjB��RjH�7'I=�L1'I=�L1'I=�L�<x�� >&(&88� >&(&88� >&(&8. � )�I )�I )s �u, �u,sibility�b�b�b�>b�b�b�b�b�b�>b�b�bleR��J. � 7.�l�J. � 7.�l�J. � 7.L�@� . / F-�}� . / F-�}� . / F-��H�H�{���`�U�U�/�c�c�4�)�) R��J. � 7.�l�J. � 7.�l�J. � 7.L�@� . / F-�}� . / F-�}� . / F-��H�H�{���`�U�U�/�c�c�4�)�)ual�z���Y:�{:�{: �Z�o�Zo�Zo��;�F�;�F�;�'� � �P�;�N�;�N�;�z���Y:�{:�{: �Z�o�Zo�Zo��;�F�;�F�;�'� � �P�;�N�;�N�;duration�L�gL�gL�y�E�E�GN�1N�1N�N�9N�9N �L�gL�gL�y�E�E�GN�1N�1N�N�9N�9Nisation �.�G�G�.�G�G e����?������?�� r �@�S�v�S�v�S����K���@�S�v�S�v�S����K��zers ly�(� (� (�R�x�x�(�!(�!(��^�^�_(�Y(�Y(�(�a(�a( �(� (� (�R�x�x�(�!(�!(��^�^�_(�Y(�Y(�(�a(�a(te� �p�p� �p�ps ��V<L-��X�|C�>��1�+K� !!�W�����G�2����T�$�{�{�v��p�p�,�0�9�/�B&�V�$V�$V~�B��<�r�b�2V� V� V��h�l�;�I� �?��$�U�;�"�;�@ ����T�$�{�{�v��p�p�,�0�9�/�B&�V�$V�$V~�?��<�r�b�2V� V� V��h�l�;�I� �?��$�U�;0vscode����0�w�w��l�l����0�w�w��l�lue�6��T     #%  G=C>MB%#%  G=C>MB%#%  G=C>MB%�6��      !�ZZ�2>w1�wH##!�ZZ�2>w1�wH##!�ZZ�2>w1�wH##�6�6�6���2     <�=l<�=l<�=k�H     n|'��|'��|'��7�      @ H""T!:I H""T!:I H""T!:�6�6������,     �(���a�����6��T     #%  G=C>MB%#%  G=C>MB%#%  G=C>MB%�6��      !�ZZ�2>w1�wH##!�ZZ�2>w1�wH##!�ZZ�2>w1�wH##�6�6�6���2     <�=l<�=l<�=k�H     n|'��|'��|'��7�      @ H""T!:I H""T!:I H""T!:�6�6������,     �(���a�w � � � � � � w3c�d�)�)�d�)�)ait��3�3 �!���Y�� ��3�3 �!���Y��s�9�{�{�9�{�{nt�7�y�y�2�z�z��T�T��x�x�1� � �2�G�G�U�a�a�>�^�^�7�y�y�2�z�z��T�T��x�x�1� � �2�G�G�U�a�a�>�^�^rning �n�G�G�n�G�Gs��3�3�� � �&�X�X ��3�3�� � �&�X�Xtch�*�z�z� �x�x�)�^�^�*�z�z� �x�x�)�^�^y�#��f��f��n�3�3��E�7�E�7�E���w��w��P�m�s�m�s�m ��a�a�#��f��f��n�3�3��E�7�E�7�E���w��w��P�m�s�m�s�ms�e�{�{�s�y�y�+�z�z�e�{�{�s�y�y�+�z�ze(�8�� ��� ��� �$�{�{�@�h4X�h4X�h44� �. �{�7�. �{�7�. �{:��. �5� ��. �5� ��. �5� (�:>(E0�%>(E0�%>(E0.�$ �ey�$ �ey�$ �ey(�j@(F/� @(F/� @(F/�u�!�}�!�}�!�6 �a �a �v �i �i (�8�� ��� ��� �$�{�{�@�h4X�h4X�h44� �. �{�7�. �{�7�. �{:��. �5� ��. �5� ��. �5� (�:>(E0�%>(E0�%>(E0.�$ �ey�$ �ey�$ �ey(�j@(F/� @(F/� @(F/�u�!�}�!�}�!�6 �a �a �v �i �i bm~� �{�{$m~�b�L�i�L�i�L���D��D��3�x�xm~m � � m~f�G�G�N��F��F��Q�^�^�M�C�>�C�>�Cm~�a m~m~�Q~�~�~(m~\e �0e �0e $m~�h�6�$�6�$�6��C�F�C�F�Cm~@� �  m~*m~�dB�B�B m~m~� �{�{$m~�b�L�i�L�i�L���D��D��3�x�xm~m � � m~f�G�G�N��F��F��Q�^�^�M�C�>�C�>�Cm~�a m~m~�Q~�~�~(m~\e �0e �0e $m~�h�6�$�6�$�6��C�V�A�$?A�!?�9 !!�W�����H�2 ��F�C�F�C1m~@� � 0webflow`��J�{�{`�`�`�`�`�`�`�`�`�`�`�`�`��J�{�{`�`�`�`�`�`�`�`�`�gl �4�{�{�P�3�3 �4�{�{�P�3�3ll�C�3�3��x�x�]� � �5�G�G�<�^�^����i�{�{�y� � �F�X�X�;���p���C�3�3��x�x�]� � �5�G�G�<�^�^����i�{�{�y� � �F�X�X�;��re�q�x�x��^�^�q�x�x��^�^hat�1�n��n��n�\�x�x� �G�G��^�^�1�n��n��n�\�x�x� �G�G��^�^en*�*��[*��[*��h"�^�j��j��j"�a+��6+��6+�Z�A�i�K�U�1�i�K�U�1�i�K�U�j�M�[�M!�W��]�`�[�M!�W��]�`�[�M!�W��]R�z�Ui�M�%V"�B�Ui�M�%V"�B�Ui�M�%V"F�z:$w[�X! �:$w[�X! �:$w[�X! x�'c .( "3�!�*)�y'c .( "3�!�*)�y'c .( "3�!�*)�6�z%"QO}�8%"QO}�8%"QO}�c.�Z�^�;Z�^�;Z�^�D�G�GF�5:$w[�c! �:$w[�c! �:$w[�c! p�F)e .( #5�!�)�m)e .( #5�!�)�m)e .( #5�!�)(�2%"MU�%"MU�%"MU��9�e�9�e�9^�t8�zOT� �<'�8�zOT� �<'�8�zOT� �<'��{�{(��D#��D#��D#L � eY!)�] eY!)�] eY!)(��rC� �rC� �rC^�,8�zOT� �<)�8�zOT� �<)�8�zOT� �<)�d �m �m �q�]��]��]*�*��[*��[*��h"�^�j��j��j"�a+��6+��6+�Z�A�i�K�U�1�i�K�U�1�i�K�U�j�M�[�M!�W��]�`�[�M!�W��]�`�[�M!�W��]R�z�Ui�M�%V"�B�Ui�M�%V"�B�Ui�M�%V"F�z:$w[�X! �:$w[�X! �:$w[�X! x�'c .( "3�!�*)�y'c .( "3�!�*)�y'c .( "3�!�*)�6�z%"QO}�8%"QO}�8%"QO}�c.�Z�^�;Z�^�;Z�^�D�G�GF�5:$w[�c! �:$w[�c! �:$w[�c! p�F)e .( #5�!�)�m)e .( #5�!�)�m)e .( #5�!�)(�2%"MU�%"MU�%"MU��9�e�9�e�9^�t8�zOT� �<'�8�zOT� �<'�8�zOT� �<'��{�{(��D#��D#��D#L � eY!)�] eY!)�] eY!)(��rC� �rC� �rC^�,8�zOT� �<)�8�zOT� �<)�8�zOT� �<)�d �m �m re��p�p�\�y�y�W�z�z�G�T�T*�[�t6q[�t6q[�t6� �a�a�T+�a+�a+�%�)�) ��p�p�\�y�y�W�z�z�G�T�T*�[�t6q[�t6q[�t6� �a�a�T+�a+�a+�%�)�)as�k���4�p�p�*�y�y�#�z�z"� �FQ�e�FQ�e�FQ"�)�FQ�K�FQ�K�FQ�N�)�)�k���4�p�p�*�y�y�#�z�z"� �FQ�e�FQ�e�FQ"�)�FQ�K�FQ�K�FQ�N�)�)ver�m�y�y�h�z�z�m�y�y�h�z�zther�p�)�)�p�)�)ich�e�{�{"�li�S�Ai�S�Ai�S�i�3�3"�ei��i��i�(�,��{�s��{�s��{�2�{��{��{(�J��{�Y��{�Y��{�F������z�\�`�`�� � �K�S�X�S�X�S�J���%� � �e�{�{"�li�S�Ai�S�Ai�S�i�3�3"�ei��i��i�(�,��{�s��{�s��{�2�{��{��{(�J��{�Y��{�Y��{�F������z�\�`�`�� � �K�S�X�S�X�S�J���%� � le�Y�y�y�R�z�z6��>�y8P�>�y8P�>�y8�]�G�G6�N �>�8O �>�8O �>�8,�M�X�X �Y�y�y�R�z�z6��>�y8P�>�y8P�>�y8�]�G�G6�N �>�8O �>�8O �>�8,�M�X�Xdrag$�%� �L� �L� �"�]� �V� �V� $�%� �L� �L� �"�]� �V� �V� focus�$��7��7��\�-�6�-�6�-�$��7��7��\�-�6�-�6�-hover����R�p�p�)�g��g��g�b�)�S�)�S�)2�"2?� H2?� H2?� �"*�Z2?�I2?�I2?��0���h������R�p�p�)�g��g��g�b�)�S�)�S�)2�"2?� H2?� H2?� �"*�Z2?�I2?�I2?��0���h��inview�I�~�~��V�V"�`�:�c`�:�c`�:��8�D�8�D�8�'�T�TB�+48� 48� 48�v�_�a�a:�c0=�]0=�]0= �I�~�~��V�V"�`�:�c`�:�c`�:��8�D�8�D�8�'�T�TB�+48� 48� 48�s�_�a�a:�c0=�]0=�]0=press�V�p�p�f�,�P�,�P�,4�[!)dl�M�!)dl�M�!)dl�M�V�p�p�f�,�P�,�P�,4�[!)dl�M�!)dl�M�!)dl�Mtap����-�j��j��d2�V,a� �J�4-�!�RNG�{�.s ""�V�����I�0DŽj<�#)dl�B�)dl�B�)dl�B�\����-�j��j��j<�#)dl�B�)dl�B�)dl�B�\ 0whirlwind�B���K�p�p�B���K�p�po��le�W������/�x�x�J� � �M�^�^�W������/�x�x�J� � �M�^�^idth����M�,�h�h�o� �]�]�%�+�\�\� �M�d�]�]�T �VB�l� ��H�~� ��H�~� ��H� �) �P � �vB����H�r���H�r���H�3 �| � �O �] �! �S �+ �8 �i@�^" 8�" 8�" 8o �6 �O �T����M�,�h�h�o� �]�]�%�+�\�\� �M�d�]�]�T �VB�l� ��H�~� ��H�~� ��H� �& �P � �vB����H�r���H�r���H�3 �| � �O �] �! �S �+ �8 �i@�^" 8�" 8�" 8oll�*�X*�X*�+B�;B�;B"�q�y+�P�y+�P�y+Z�K�E�d4�Q7�e4e�E�d4�Q7�e4e�E�d4�Q7�e4�2�'���# .\+j$CW� 6�8���# .\+j$CW� 6�8���# .\+j$CW� 6Z���f4�q7�x?f��f4�q7�x?f��f4�q7�x?F�]tL {{G�2tL {{G�2tL {{Gd�}0{�ZA�65�`0{�ZA�65�`0{�ZA�65���"�5�.�+5�.�+5�.X�0EV' 2?�.EV' 2?�.EV' 2?L�tL {�G�4tL {�G�4tL {�Gd�)0}�\A�65�T0}�\A�65�T0}�\A�65�:�c�c�'89�/89�/89��'�  3�% EH$/',h. 4G`�  3�% EH$/',h. 4G`�  3�% EH$/',h. 4G�<�{�{(�g%!�#%!�#%!:�[O0>�f[O0>�f[O0>(�|K%!�6K%!�6K%!��_�  3�% EH$/',h. 8K`�  3�% EH$/',h. 8K`�  3�% EH$/',h. 8K�c�b�b�=���()�8)�8)4��*���*���*��*�X*�X*�+B�;B�;B"�q�y+�P�y+�P�y+Z�K�E�d4�Q7�e4e�E�d4�Q7�e4e�E�d4�Q7�e4�2�'���# .\+j$CW� 6�8���# .\+j$CW� 6�8���# .\+j$CW� 6Z���f4�q7�x?f��f4�q7�x?f��f4�q7�x?F�]tL {{G�2tL {{G�2tL {{Gd�}0{�ZA�65�`0{�ZA�65�`0{�ZA�65���"�5�.�+5�.�+5�.X�0EV' 2?�.EV' 2?�.EV' 2?L�tL {�G�4tL {�G�4tL {�Gd�)0}�\A�65�T0}�\A�65�T0}�\A�65�:�c�c�'89�/89�/89��'�  3�% EH$/',h. 4G`�  3�% EH$/',h. 4G`�  3�% EH$/',h. 4G�<�{�{(�g%!�#%!�#%!:�[O0>�f[O0>�f[O0>(�|K%!�6K%!�6K%!��_�  3�% EH$/',h. 8K`�  3�% EH$/',h. 8K`�  3�% EH$/',h. 8K�c�b�bndow�W �q �q ���(�h�%y�j�%y�j�%y�E�c�c�'>�T>�T>�W �q �q ���(�h�%y�j�%y�j�%y�E�c�c�'>�T>�T>pes�Z�x�x�x�^�^�>�Z�x�x�x�^�^�>thP �~xz�88� xz�88� xz�88��"H �"cP�LK�"cP�LK�"cP�LK�oH �4�1f~�9,d�1f~�9,d�1f~�9,d���I�) o�'�O>�!�&�I�) o�'�O>�!�&�I�) o�'�O>�!{�z�h+H�`?0���@�,�[+H�`?0���@�,�[+H�`?0���@�,| ��V�I�/) o�)o>�1�5�I�/) o�)o>�1�5�I�/) o�)o>�1�\�u� c:!<�� c:!<�� c:!<�f!��s �x&/;F5'�0[k6 �x&/;F5'�0[k6 �x&/;F5'�0[k6w< �N��F�6��F�6��F_n"B�FP!^6)�F� P!^6)�F� P!^6)�FY2�>4L x�K4L x�K4L x�J�-� c:!d�� c:!d�� c:!d�f�&/;F5'�0[k�&/;F5'�0[k�&/;F5'�0[k>0 ����9���9��f,�7[�C[�C[�~Dl�Dt� �E�� H�It� �E�� H�It� �E�� Hwh �/�  � �{�{��� � � (�&�<�)�1�)�1�)�b�|t� �E�� L�Mt� �E�� L�Mt� �E�� L��;� � ` �:&�^&�^&�42�D� �nD� �nD� �c2(�p$�*p$�*p$�P �~xz�88� xz�88� xz�88��"H �"cP�LK�"cP�LK�"cP�LK�oH �4�1f~�9,d�1f~�9,d�1f~�9,d���I�) o�'�O>�!�&�I�) o�'�O>�!�&�I�) o�'�O>�!{�z�h+H�`?0���@�,�[+H�`?0���@�,�[+H�`?0���@�,| ��V�I�/) o�)o>�1�5�I�/) o�)o>�1�5�I�/) o�)o>�1�\�u� c:!<�� c:!<�� c:!<�f!��s �x&/;F`3`��M�9/css) for more details. Options ------- The spring can be configured with a number of options. #### `keyframes` `spring` **must** be provided with two keyframes to animate between. These can be any two **numerical** values. ``` spring({ keyframes: \[0, 100\] }) ``` ### Time options **Note:** Time options will be overridden if any physics options are set. #### `duration` **Default:** `800` Duration for the entire spring. **Important:** Most Motion APIs use seconds, for historical reasons `duration` is set **in milliseconds**. #### `visualDuration` If `visualDuration` is set, this will override `duration`. The visual duration is a time, **set in seconds**, that the animation will take to visually appear to reach its target. In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after. This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations. #### `bounce` **Default:** `0.25` `bounce` determines the "bounciness" of a spring animation. `0` is no bounce, and `1` is extremely bouncy. **Note:** `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set. ### Physics options #### `damping` **Default:** `10` Strength of opposing force. If set to 0, spring will oscillate indefinitely. #### `mass` **Default:** `1` Mass of the moving object. Higher values will result in more lethargic movement. #### `stiffness` **Default:** `1` Stiffness of the spring. Higher values will create more sudden movement. #### `velocity` **Default:** Current value velocity The initial velocity of the spring. #### `restSpeed` **Default:** `0.1` End animation if absolute speed (in units per second) drops below this value and delta is smaller than `restDelta`. #### `restDelta` **Default:** `0.01` End animation if distance is below this value and speed is below `restSpeed`. When animation ends, the spring will end.[{"title":"Code Example 1","description":"","code":"import { animate } from \"motion/mini\"\nimport { spring } from \"motion\"\n\nanimate(\n element,\n { transform: \"translateX(100px)\" },\n { type: spring, bounce: 0.3, duration: 0.8 }\n)","language":"javascript","difficulty":"intermediate","tags":["js","animation","spring"]},{"title":"Code Example 2","description":"","code":"import { spring } from \"motion\"","language":"javascript","difficulty":"beginner","tags":["js","spring"]},{"title":"Code Example 3","description":"","code":"const generator = spring({ keyframes: [0, 100] })","language":"javascript","difficulty":"advanced","tags":["js","spring","keyframes"]},{"title":"Code Example 4","description":"","code":"const { value, done } = generator.next(10) // Spring state at 10 milliseconds","language":"javascript","difficulty":"beginner","tags":["js","spring"]},{"title":"Code Example 6","description":"","code":"const generator = spring({ keyframes: [25, 75], stiffness: 400 })\nconst output = []\n\nlet isDone = false\nlet time = 0\nconst sampleDuration = 20 // ms\n\nwhile (!isDone) {\n const { value, done } = generator.next(time)\n\n output.push(value)\n\n time += sampleDuration\n\n if (done) isDone = true\n}","language":"javascript","difficulty":"advanced","tags":["js","animation","spring","keyframes"]},{"title":"Code Example 7","description":"","code":"element.style.transition = \"all \" + spring(0.5)","language":"javascript","difficulty":"beginner","tags":["js","animation","spring"]},{"title":"Code Example 8","description":"","code":"spring({ keyframes: [0, 100] })","language":"javascript","difficulty":"advanced","tags":["js","spring","keyframes"]}]{"props":[],"methods":[{"name":"animate","signature":"animate()","description":"animate method"},{"name":"next","signature":"next()","description":"next method"},{"name":"linear","signature":"linear()","description":"linear method"},{"name":"spring","signature":"spring()","description":"spring method"}],"types":[]}["js","springs","spring","animation","keyframes","motion","transition"]2025-08-29 11:54:072025-08-29 11:54:07  F FM�V������0�00*�J�|3 ;�N/%. "S%] !N;0#" #LI )&3 ;�N/%. "S%] !N;0#" #LI )&3 ;�N/%. "S%] !N;0#" #LI )&H�#* @ ^* @ ^* @ 0�f�&�i�&�i�&���X�X�J�43 ;�N/%. "S%] !N;0#" #LK +&3 ;�N/%. "S%] !N;0#" #LK +&3 ;�N/%. "S%] !N;0#" #LK +&1*��F�;�F�;�F�@�F�C�F�C�F6+ �##px.�A�&�&1*�(�-%�)21�)�Z� H&c'& -%�)21�)�Z� H&c'& -%�)21�)�Z� H&c'&�}6� &I Z&I Z&I *��d�.�d�.�d�.��X�X�(�?-%�)21�)�Z� H&i)& -%�)21�)�Z� H&i)& -%�)21�)�Z� H&i)&0*��Z�'�Z�'�Z�U�Z�/�Z�/�Z0*^� m�d�5#"#�y m�d�5#"#�q����� �f ��T,�L�{�{�\� � �)�X�XFu�� �T�i�T�i�T0via*.�uC�J�CC�J�CC�J��Q�{�{�!�l!�l!�DU�U�U.�-C�J�KC�J�KC�J�'� � deo/��X�Xs.�;�)�)ew*��1$��`N< � �.��L�A�L�A�L� � � � �port+�<x�� >&(&88� >&(&88� >&(&8. � )�I )�I )s+ �u,sible.�4�)�)ual*��;�F�;�F�;�'� � �P�;�N�;�N�;duration*�GN�1N�1N�N�9N�9Nise*����?�� r*����K��ly*�_(�Y(�Y(�(�a(�a(s*�;�I� �?��$�U�;ue*�6������,     �(���a�w3c.�d�)�)ait*�!���Y��s/�&�X�Xe*�6 �a �a �v �i �i b*�M�C�>�C�>�Cm~�a m~m~�Q~�~�~(m~\e �0e �0e $m~�h�6�$�6�$�6��C�F�C�F�Cm~@� � flow+`�`�`�`�`�`�ll*����i�{�{�y� � �F�X�X�;��hen*^�t8�zOT� �<'�8�zOT� �<'�8�zOT� �<'��{�{(��D#��D#��D#L � eY!)�] eY!)�] eY!)(��rC� �rC� �rC^�,8�zOT� �<)�8�zOT� �<)�8�zOT� �<)�d �m �m re.�%�)�)as.�N�)�)ther.�p�)�)ich*����z�\�`�`�� � �K�S�X�S�X�S�J���%� � le+,�M�X�Xhover*�0���h��o+�idth* �O �] �! �S �+ �8 �i@�^" 8�" 8�" 8oll*��'�  3�% EH$/',h. 4G`�  3�% EH$/',h. 4G`�  3�% EH$/',h. 4G�<�{�{(�g%!�#%!�#%!:�[O0>�f[O0>�f[O0>(�|K%!�6K%!�6K%!��_�  3�% EH$/',h. 8K`�  3�% EH$/',h. 8K`�  3�% EH$/',h. 8K�c�b�bndow.�'>�T>�T>pes+�>th*l�Dt� �E�� H�It� �E�� H�It� �E�� Hwh �/�  � �{�{��� � � (�&�<�)�1�)�1�)�b�|t� �E�� L�Mt� �E�� L�Mt� �E�� L��;� � `in.�_ � � on.�[�)�)rdpress+b�b�b�b�b�b�s*�g�����rap+>�>�>�>�>�>�ites1�E� � x*:� ?!�d� ?!�d� ?!�d:�F ?!�d� ?!�d� ?!�dyou*����V�{�{�f� � �3�X�X�T���� � r*�'�5�y�}� � ����A�'Ok _c /*3� }<6�US `�  �??;AA�2�����K�h��o�|���|���|��G2�[+�� �9+�� �9+�� �i�q�!�Q�!�Q�! 2�v�G�X�O�G�X�O�G�X��% �.��t��t��y�.�O�x�x���(�^�N�m�^�^"�T�X�'�5�y�}� � ����A�'���_�_�T�,2�o�|���|���|��G2�[+�� �9+�� �9+�� �i�q�!�Q�!�Q�! 2�v�G�X�O�G�X�O�G�X��% �.��t��t��y�.�O�x�x��~�(�^�N�m�^�^"�T�X�'�5�y�}� � ����A�'0youtube� �x�x�'�^�^� �x�x�'�^�^z� �{�{�}�y�y�"�3�3�6�z�z� �{�{�}�y�y�"�3�3�6�z�zoom�x� � �x� � �1S %%�S������*�007�4Q�17�`27 �b557 � 3247�}487�j607�>827 �l957�7a7�z>� $[6bout7�WdB%1 ccelerated7ss7�dd7 F�vanced7�<i7 �Dll7R#one7�Hso7dUn7 �kJd7 &)n�t=imate7" �8av2presence7� ing7 �,� on7  �C'b\ s7"�6� W;tfu7lpis7�)plying7�are7 �@s7�1�-uto7 P#! matically7�pvailable7 2� backgroundcolor7 � sic7�+e7�Rtter7�Dween7 �K oth7�_x7�ut7�.�!+�9ton7 �y7�E�/can7�F� +�] pabilities7�'le7ses7�>hange7�Cs7�Lode7�Q�m7 k| es7�bpatible7�8lete7�conent7"�|'�W s7T �ynfig7 C�Gured7�Ssole7�9t7�)tains7�(py7�kre7� rection7�[ly7�Nurse7�Qss7�Gurrently7 ��sor7 �udefault7X0s7�L ineconfig7� nuxtconfig7Ys7�rsigned7�Av7�]elopment7�?ifferent7�z�^rectly7�sable7� v7�*7�$09 e7�Ting7�8ocs7�L umentation7�^esn7�m7�"rag7�,ts7� uration7�deach7�`sy7�_ditor7�Rffects7lement7 �#�Zs7 �Wn7�gine7 �4ter7�fs7 �k�irely7� vent7�s7�Lry7�/xample7�as7�Yit7 �| port7W0tends7�sion7 �n'yjjb21tyw5kijoibnb4ic15ig1vdglvbi1hasj97� false7 �eature7�0s7 .�$el7�Cing7�Kocus7�*r7&TF G�<�aramerusercontent7 �dom7u 2�C�ull7 �Y�rther7�9g3fxtpyrpji6khdfkego8yrbs087�zain7�esture7�#s7�t7ting7ithub7jreat7�Juide7 hardware7s7 �I�zeight7 �kover7 �(start7�8w7!tml7 tps7i| �\ybrid7if7�mages7 �fport7r s7Qrove7�Tn7(��� dustry7�Citial7�~ ostall7# �Pnce7�Jto7J��n5s7.�]!t7 DV~R9xCs7,�.�vkey7�layout7�>  id7 �oeading7�Drn7  �<�}aB% ves7�}ibrary7 ke7�Omitless7 nk7�ed7�hl7 �m7�]oad7�Gg7�:t7�1main7-nually7�#cp7�odules7 :re7�[�}aB%tion7t$   ( $ "%0'  resolver7 �value7� urnezubngsctz2ivwlqopus7�gname7�eed7�xt7 �ormal7�!t7�Oe7 �pm74uxt79 of7�.8E��Gfers7=n7�mly7 �Cpacity7� �r7��Okur7�Xverview7�%page7�mste7�llugins7�ng7 �hosition7�sible7�werful7 �"�-resence7�s7�)oject7�op7�9$&tu(vide7�yquality7�Vick7 �4�r recognises7�$mmend7�7ndered7�tsolver7� s7� gb7 � otate7�=s7 ��"`$F ame7�Tcale7�a$�'x7�1reen7�Sipt7 �'oll7�[  - yprogress7 �* etting7 �4]up7�(how7�imple7y7Eo7�urce7�f pecifically7�*ring7 taggering7rt7�5ed7�<te7�traight7 �M� forward7�2yle7�0 uggestions7�Y percharged7�$port7@Ws7e�D9mvg7 ystem7� t7�ailored7�+ke7'ps7�Template7�(�han7�Et7 �HZJe7.? E48 ' tW(5re7�.is7 �po7,"P25�3)M .ols7�@uch7�Rr7* ransforms7�Qition7�X  s7 �Wigger7�jed7 �Pue7� s7Dypes7�`ul7�;nderline7�splugin7 ^ sage7� e7�=�dscroll7 �# ing7 �F� v78�                         /  #                B                            

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Abhishekrajpurohit/motion-dev-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server