https://nodalityjs.github.io/assets/js/fd0d6a07.600671d3.js

1"use strict";(self.webpackChunknodality=self.webpackChunknodality||[]).push([[3073],{3842:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>s,toc:()=>d});const s=JSON.parse('{"id":"nodes/animation","title":"Animation","description":"Animation allows you to animate elements.","source":"@site/docs/nodes/animation.md","sourceDirName":"nodes","slug":"/nodes/animation","permalink":"/docs/nodes/animation","draft":false,"unlisted":false,"editUrl":"https://github.com/nodalityjs/docs/edit/main/docs/nodes/animation.md","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Nodes","permalink":"/docs/nodes/"},"next":{"title":"Blast","permalink":"/docs/nodes/blast"}}');var i=t(4848),o=t(8453);const r={},a="Animation",l={},d=[{value:"1 - elements",id:"1---elements",level:3},{value:"2 - nodes",id:"2---nodes",level:3},{value:"Arguments",id:"arguments",level:3}];function c(e){const n={code:"code",h1:"h1",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"animation",children:"Animation"})}),"\n",(0,i.jsxs)(n.p,{children:["Animation allows you to animate elements.\nTo create basic animation, use ",(0,i.jsx)(n.code,{children:"animation"})," operator."]}),"\n",(0,i.jsx)(n.h3,{id:"1---elements",children:"1 - elements"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'let elements = [\n  {\n    type: "h1",       \n    text: "Miami",     \n    id: "#first"      \n  }\n];\n'})}),"\n",(0,i.jsx)(n.h3,{id:"2---nodes",children:"2 - nodes"}),"\n",(0,i.jsxs)(n.p,{children:["The operator generates ",(0,i.jsx)(n.code,{children:"animation"})," property on each affected object.\nIf we supply the ",(0,i.jsx)(n.code,{children:"target"})," argument, this operation applies to elements whose ",(0,i.jsx)(n.code,{children:"id"})," attributes mathch those in ",(0,i.jsx)(n.code,{children:"target"})," array."]}),"\n",(0,i.jsxs)(n.p,{children:["This animation will apply to element with ",(0,i.jsx)(n.code,{children:"id"})," ",(0,i.jsx)(n.code,{children:"#first"})," in  this case."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'let nodes = [\n  {\n    op: "animation",\n    target: ["#first"]\n  }\n];\n'})}),"\n",(0,i.jsx)(n.p,{children:"This results in animation property being added to respective element.\nYou can edit this animation as you wish."}),"\n",(0,i.jsx)(n.h3,{id:"arguments",children:"Arguments"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"keyframesOpen"})," - set opening keyframes"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"keyframesClose"})," - set closing keyframes"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"openOptions"})," - set opening properties (duration, etc.)"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"closeOptions"})," - set closing properties"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"fireAt"})," - how much user needs to scroll before animation fires (optional)"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Possible value of ",(0,i.jsx)(n.code,{children:"fireAt"})," is extact value like ",(0,i.jsx)(n.code,{children:"800px"})," or ",(0,i.jsx)(n.code,{children:"inview"}),". The ",(0,i.jsx)(n.code,{children:"inview"})," property fires animation when it comes into view using ",(0,i.jsx)(n.code,{children:"IntersectionObserver"})," API."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'new Text("Hello").set({\n  // Other properties can go here, e.g., font, size, index...\n  animation: {\n    op: {\n      name: "animation",\n      color: "green",\n      width: "1px",\n      fireAt: "800px",\n      keyframesOpen: [\n        {\n          transform: "translate(100%, 0%)",\n          opacity: 0\n        },\n        {\n          transform: "translate(0%)",\n          opacity: 1\n        }\n      ],\n      keyframesClose: [\n        {\n          transform: "translate(0%)",\n          opacity: 1\n        },\n        {\n          transform: "translate(100%, 0%)",\n          opacity: 0\n        }\n      ],\n      openOptions: {\n        duration: 300,\n        fill: "forwards",\n        delay: 1000\n      },\n      closeOptions: {\n        duration: 1,\n        fill: "forwards",\n        delay: 1000\n      }\n    },\n    target: ["#first"]\n  }\n});\n'})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>a});var s=t(6540);const i={},o=s.createContext(i);function r(e){const n=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]);