var Component=(()=>{var fn=Object.create;var q=Object.defineProperty;var un=Object.getOwnPropertyDescriptor;var mn=Object.getOwnPropertyNames;var sn=Object.getPrototypeOf,bn=Object.prototype.hasOwnProperty;var X=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),hn=(o,n)=>{for(var b in n)q(o,b,{get:n[b],enumerable:!0})},ge=(o,n,b,N)=>{if(n&&typeof n=="object"||typeof n=="function")for(let u of mn(n))!bn.call(o,u)&&u!==b&&q(o,u,{get:()=>n[u],enumerable:!(N=un(n,u))||N.enumerable});return o};var _n=(o,n,b)=>(b=o!=null?fn(sn(o)):{},ge(n||!o||!o.__esModule?q(b,"default",{value:o,enumerable:!0}):b,o)),pn=o=>ge(q({},"__esModule",{value:!0}),o);var Se=X((wn,we)=>{we.exports=React});var ke=X(J=>{"use strict";(function(){"use strict";var o=Se(),n=Symbol.for("react.element"),b=Symbol.for("react.portal"),N=Symbol.for("react.fragment"),u=Symbol.for("react.strict_mode"),S=Symbol.for("react.profiler"),k=Symbol.for("react.provider"),C=Symbol.for("react.context"),x=Symbol.for("react.forward_ref"),v=Symbol.for("react.suspense"),A=Symbol.for("react.suspense_list"),I=Symbol.for("react.memo"),L=Symbol.for("react.lazy"),Te=Symbol.for("react.offscreen"),Z=Symbol.iterator,Re="@@iterator";function De(t){if(t===null||typeof t!="object")return null;var r=Z&&t[Z]||t[Re];return typeof r=="function"?r:null}var T=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function h(t){{for(var r=arguments.length,i=new Array(r>1?r-1:0),l=1;l=1&&s>=0&&a[m]!==_[s];)s--;for(;m>=1&&s>=0;m--,s--)if(a[m]!==_[s]){if(m!==1||s!==1)do if(m--,s--,s<0||a[m]!==_[s]){var p=` `+a[m].replace(" at new "," at ");return t.displayName&&p.includes("")&&(p=p.replace("",t.displayName)),typeof t=="function"&&F.set(t,p),p}while(m>=1&&s>=0);break}}}finally{$=!1,M.current=f,Le(),Error.prepareStackTrace=d}var D=t?t.displayName||t.name:"",ye=D?j(D):"";return typeof t=="function"&&F.set(t,ye),ye}function Ve(t,r,i){return oe(t,!1)}function $e(t){var r=t.prototype;return!!(r&&r.isReactComponent)}function B(t,r,i){if(t==null)return"";if(typeof t=="function")return oe(t,$e(t));if(typeof t=="string")return j(t);switch(t){case v:return j("Suspense");case A:return j("SuspenseList")}if(typeof t=="object")switch(t.$$typeof){case x:return Ve(t.render);case I:return B(t.type,r,i);case L:{var l=t,d=l._payload,f=l._init;try{return B(f(d),r,i)}catch{}}}return""}var W=Object.prototype.hasOwnProperty,fe={},ue=T.ReactDebugCurrentFrame;function Y(t){if(t){var r=t._owner,i=B(t.type,t._source,r?r.type:null);ue.setExtraStackFrame(i)}else ue.setExtraStackFrame(null)}function Ge(t,r,i,l,d){{var f=Function.call.bind(W);for(var c in t)if(f(t,c)){var a=void 0;try{if(typeof t[c]!="function"){var _=Error((l||"React class")+": "+i+" type `"+c+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof t[c]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw _.name="Invariant Violation",_}a=t[c](r,c,l,i,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(m){a=m}a&&!(a instanceof Error)&&(Y(d),h("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",l||"React class",i,c,typeof a),Y(null)),a instanceof Error&&!(a.message in fe)&&(fe[a.message]=!0,Y(d),h("Failed %s type: %s",i,a.message),Y(null))}}}var ze=Array.isArray;function G(t){return ze(t)}function Ue(t){{var r=typeof Symbol=="function"&&Symbol.toStringTag,i=r&&t[Symbol.toStringTag]||t.constructor.name||"Object";return i}}function He(t){try{return me(t),!1}catch{return!0}}function me(t){return""+t}function se(t){if(He(t))return h("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Ue(t)),me(t)}var O=T.ReactCurrentOwner,Ke={key:!0,ref:!0,__self:!0,__source:!0},be,he,z;z={};function Xe(t){if(W.call(t,"ref")){var r=Object.getOwnPropertyDescriptor(t,"ref").get;if(r&&r.isReactWarning)return!1}return t.ref!==void 0}function Je(t){if(W.call(t,"key")){var r=Object.getOwnPropertyDescriptor(t,"key").get;if(r&&r.isReactWarning)return!1}return t.key!==void 0}function Ze(t,r){if(typeof t.ref=="string"&&O.current&&r&&O.current.stateNode!==r){var i=y(O.current.type);z[i]||(h('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',y(O.current.type),t.ref),z[i]=!0)}}function Qe(t,r){{var i=function(){be||(be=!0,h("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};i.isReactWarning=!0,Object.defineProperty(t,"key",{get:i,configurable:!0})}}function en(t,r){{var i=function(){he||(he=!0,h("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};i.isReactWarning=!0,Object.defineProperty(t,"ref",{get:i,configurable:!0})}}var nn=function(t,r,i,l,d,f,c){var a={$$typeof:n,type:t,key:r,ref:i,props:c,_owner:f};return a._store={},Object.defineProperty(a._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(a,"_self",{configurable:!1,enumerable:!1,writable:!1,value:l}),Object.defineProperty(a,"_source",{configurable:!1,enumerable:!1,writable:!1,value:d}),Object.freeze&&(Object.freeze(a.props),Object.freeze(a)),a};function tn(t,r,i,l,d){{var f,c={},a=null,_=null;i!==void 0&&(se(i),a=""+i),Je(r)&&(se(r.key),a=""+r.key),Xe(r)&&(_=r.ref,Ze(r,d));for(f in r)W.call(r,f)&&!Ke.hasOwnProperty(f)&&(c[f]=r[f]);if(t&&t.defaultProps){var m=t.defaultProps;for(f in m)c[f]===void 0&&(c[f]=m[f])}if(a||_){var s=typeof t=="function"?t.displayName||t.name||"Unknown":t;a&&Qe(c,s),_&&en(c,s)}return nn(t,a,_,d,l,O.current,c)}}var U=T.ReactCurrentOwner,_e=T.ReactDebugCurrentFrame;function R(t){if(t){var r=t._owner,i=B(t.type,t._source,r?r.type:null);_e.setExtraStackFrame(i)}else _e.setExtraStackFrame(null)}var H;H=!1;function K(t){return typeof t=="object"&&t!==null&&t.$$typeof===n}function pe(){{if(U.current){var t=y(U.current.type);if(t)return` Check the render method of \``+t+"`."}return""}}function rn(t){{if(t!==void 0){var r=t.fileName.replace(/^.*[\\\/]/,""),i=t.lineNumber;return` Check your code at `+r+":"+i+"."}return""}}var Ne={};function ln(t){{var r=pe();if(!r){var i=typeof t=="string"?t:t.displayName||t.name;i&&(r=` Check the top-level render call using <`+i+">.")}return r}}function xe(t,r){{if(!t._store||t._store.validated||t.key!=null)return;t._store.validated=!0;var i=ln(r);if(Ne[i])return;Ne[i]=!0;var l="";t&&t._owner&&t._owner!==U.current&&(l=" It was passed a child from "+y(t._owner.type)+"."),R(t),h('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',i,l),R(null)}}function ve(t,r){{if(typeof t!="object")return;if(G(t))for(var i=0;i",a=" Did you accidentally export a JSX literal instead of a component?"):m=typeof t,h("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",m,a)}var s=tn(t,r,i,d,f);if(s==null)return s;if(c){var p=r.children;if(p!==void 0)if(l)if(G(p)){for(var D=0;D{"use strict";Ce.exports=ke()});var yn={};hn(yn,{default:()=>vn,frontmatter:()=>Nn});var e=_n(Ee()),Nn={title:"Create your first presentation",description:"In this tutorial we will discover how to create presentations and how the animations work inside of snappify.",author:"anki",date:"2023-05-12",coverImageExt:"jpg"};function Ae(o){let n=Object.assign({p:"p",a:"a",strong:"strong",h2:"h2",span:"span",pre:"pre",code:"code",blockquote:"blockquote",em:"em",ol:"ol",li:"li"},o.components),{LazyIframe:b,YouTubeEmbed:N,NextImage:u,Kbd:S,Blockquote:k,Box:C,Video:x,KbdCommand:v,CrispLink:A}=n;return k||w("Blockquote",!0,"123:1-126:14"),C||w("Box",!0,"173:1-181:7"),A||w("CrispLink",!0,"408:88-408:126"),S||w("Kbd",!0,"108:46-108:62"),v||w("KbdCommand",!0,"329:49-329:63"),b||w("LazyIframe",!0,"26:3-34:5"),u||w("NextImage",!0,"48:1-54:3"),x||w("Video",!0,"174:3-180:5"),N||w("YouTubeEmbed",!0,"39:1-39:99"),(0,e.jsxDEV)(e.Fragment,{children:[(0,e.jsxDEV)(n.p,{children:[`Today we will learn how to create a presentation with snappify and how to animate elements smoothly. For this tutorial, we picked an awesome animation that was initially created by `,(0,e.jsxDEV)(n.a,{href:"https://twitter.com/asidorenko_/status/1623751929863016450?s=20",children:"Alex Sidorenko"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:10,columnNumber:81},this),"."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:9,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Here you can see an embedded version of the presentation that we will create today, let's get started!"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:12,columnNumber:1},this)," \u{1F929}"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:12,columnNumber:1},this),` `,(0,e.jsxDEV)("div",{style:{overflow:"hidden",marginLeft:"auto",marginRight:"auto",borderRadius:"10px",width:"100%",maxWidth:"990.41px",position:"relative"},children:[(0,e.jsxDEV)("div",{style:{width:"100%",paddingBottom:"56.25044173625064%"}},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:25,columnNumber:3},this),(0,e.jsxDEV)(b,{width:"990.41",height:"557.11",title:"React - Avoid Prop Drilling - A presentation explaining how to avoid prop drilling in React by restructuring your component hierarchy.",src:"/embed/ec6f67ef-e9ce-44ec-88f3-2c390f182085?responsive",allow:"clipboard-write",style:{background:"#eee",position:"absolute",left:0,top:0,width:"100%"},frameBorder:0},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:26,columnNumber:3},this)]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:14,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"watch-the-video-tutorial-",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#watch-the-video-tutorial-",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Watch the video tutorial \u{1F3AC}"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:37,columnNumber:1},this),` `,(0,e.jsxDEV)(N,{src:"https://www.youtube.com/embed/Yz3lG_XDG1Y?controls=1",title:"Tutorial Video"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:39,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"create-a-new-snap",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#create-a-new-snap",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Create a new snap"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:41,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:["Go to the ",(0,e.jsxDEV)(n.a,{href:"/dashboard",children:"Dashboard"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:43,columnNumber:11},this)," and click on the ",(0,e.jsxDEV)(n.strong,{children:"Add snap"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:43,columnNumber:52},this)," button. Start with a blank snap."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:43,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:["On the editor page, we will start with adjusting the background. First, we'll choose a size from the ",(0,e.jsxDEV)(n.strong,{children:"Presets"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:45,columnNumber:102},this),`. In this case "Presentation Medium". Second, we choose our desired background color from the Gradient presets.`]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:45,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/1-background-setting.png",width:1920,height:1080,quality:50,alt:"4 steps to configure the background"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:48,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"add-the-code-editor",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#add-the-code-editor",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Add the code-editor"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:56,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:["Next, we will add a ",(0,e.jsxDEV)(n.a,{href:"/docs/editor/elements/code-editor",children:"code-editor"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:58,columnNumber:21},this),`, drag it to the left side and center it vertically - the snapping guideline will help you there. Then paste this code into the code-editor:`]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:58,columnNumber:1},this),` `,(0,e.jsxDEV)(n.pre,{className:"shiki",style:{backgroundColor:"#22272e"},children:(0,e.jsxDEV)(n.code,{"data-code-block":"true","data-filename":"",children:[(0,e.jsxDEV)(n.span,{className:"line",children:[(0,e.jsxDEV)(n.span,{style:{color:"#F47067"},children:"function"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:1,columnNumber:119},this),(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" "},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:1,columnNumber:163},this),(0,e.jsxDEV)(n.span,{style:{color:"#DCBDFB"},children:"App"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:1,columnNumber:200},this),(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:"() {"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:1,columnNumber:239},this)]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:1,columnNumber:100},this),` `,(0,e.jsxDEV)(n.span,{className:"line"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:2,columnNumber:1},this),` `,(0,e.jsxDEV)(n.span,{className:"line",children:[(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" "},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:3,columnNumber:20},this),(0,e.jsxDEV)(n.span,{style:{color:"#F47067"},children:"return"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:3,columnNumber:58},this),(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" ("},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:3,columnNumber:100},this)]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:3,columnNumber:1},this),` `,(0,e.jsxDEV)(n.span,{className:"line",children:[(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" <"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:4,columnNumber:20},this),(0,e.jsxDEV)(n.span,{style:{color:"#8DDB8C"},children:"ComponentA"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:4,columnNumber:64},this),(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" />"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:4,columnNumber:110},this)]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:4,columnNumber:1},this),` `,(0,e.jsxDEV)(n.span,{className:"line",children:(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" )"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:5,columnNumber:20},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:5,columnNumber:1},this),` `,(0,e.jsxDEV)(n.span,{className:"line",children:(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:"}"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:6,columnNumber:20},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:6,columnNumber:1},this),` `,(0,e.jsxDEV)(n.span,{className:"line"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:7,columnNumber:1},this),` `,(0,e.jsxDEV)(n.span,{className:"line",children:[(0,e.jsxDEV)(n.span,{style:{color:"#F47067"},children:"function"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:8,columnNumber:20},this),(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" "},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:8,columnNumber:64},this),(0,e.jsxDEV)(n.span,{style:{color:"#DCBDFB"},children:"ComponentA"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:8,columnNumber:101},this),(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:"() {"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:8,columnNumber:147},this)]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:8,columnNumber:1},this),` `,(0,e.jsxDEV)(n.span,{className:"line",children:[(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" "},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:9,columnNumber:20},this),(0,e.jsxDEV)(n.span,{style:{color:"#F47067"},children:"return"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:9,columnNumber:58},this),(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" ("},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:9,columnNumber:100},this)]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:9,columnNumber:1},this),` `,(0,e.jsxDEV)(n.span,{className:"line",children:[(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" "},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:10,columnNumber:20},this),(0,e.jsxDEV)(n.span,{style:{color:"#F47067"},children:"..."},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:10,columnNumber:60},this)]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:10,columnNumber:1},this),` `,(0,e.jsxDEV)(n.span,{className:"line",children:[(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" <"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:11,columnNumber:20},this),(0,e.jsxDEV)(n.span,{style:{color:"#8DDB8C"},children:"ComponentB"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:11,columnNumber:64},this),(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" />"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:11,columnNumber:110},this)]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:11,columnNumber:1},this),` `,(0,e.jsxDEV)(n.span,{className:"line",children:[(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" "},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:12,columnNumber:20},this),(0,e.jsxDEV)(n.span,{style:{color:"#F47067"},children:"..."},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:12,columnNumber:60},this)]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:12,columnNumber:1},this),` `,(0,e.jsxDEV)(n.span,{className:"line",children:(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:" )"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:13,columnNumber:20},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:13,columnNumber:1},this),` `,(0,e.jsxDEV)(n.span,{className:"line",children:(0,e.jsxDEV)(n.span,{style:{color:"#ADBAC7"},children:"}"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:14,columnNumber:20},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:14,columnNumber:1},this)]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:1,columnNumber:54},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:1,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:["On the right toolbar, we'll switch to the ",(0,e.jsxDEV)(n.strong,{children:"Animation"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:78,columnNumber:43},this)," tab and select the ",(0,e.jsxDEV)(n.strong,{children:"SlideIn"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:78,columnNumber:76},this)," option for ",(0,e.jsxDEV)(n.strong,{children:"Code Change Transition"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:78,columnNumber:99},this),"."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:78,columnNumber:1},this),` `,(0,e.jsxDEV)(n.blockquote,{children:[` `,(0,e.jsxDEV)(n.p,{children:["Snappify comes with various options to animate code changes across Slides. You can choose between ",(0,e.jsxDEV)(n.strong,{children:"SlideIn"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:80,columnNumber:101},this),", ",(0,e.jsxDEV)(n.strong,{children:"FadeIn"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:80,columnNumber:114},this),", ",(0,e.jsxDEV)(n.strong,{children:"TypeWriter"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:80,columnNumber:126},this),", ",(0,e.jsxDEV)(n.strong,{children:"Morph"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:80,columnNumber:142},this)," and ",(0,e.jsxDEV)(n.strong,{children:"None"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:80,columnNumber:156},this),`. Default is set to `,(0,e.jsxDEV)(n.strong,{children:"FadeIn"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:81,columnNumber:21},this),"."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:80,columnNumber:3},this),` `]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:80,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:["In this tutorial, we will keep it simple and will choose the ",(0,e.jsxDEV)(n.strong,{children:"SlideIn"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:83,columnNumber:62},this)," option."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:83,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:["As next go back to the ",(0,e.jsxDEV)(n.strong,{children:"Design"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:85,columnNumber:24},this)," tab and set the ",(0,e.jsxDEV)(n.strong,{children:"Y"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:85,columnNumber:51},this)," axis to ",(0,e.jsxDEV)(n.strong,{children:"Center"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:85,columnNumber:65},this),` in Position Constraints. This will keep the code-editor centered vertically when the code content grows or shrinks. We will see this later in action. \u{1F60E}`]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:85,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/2-code-editor-setting.png",width:1920,height:1080,quality:50,alt:"2 steps to configure the code editor"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:88,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"the-visual-model",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#the-visual-model",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"The visual model"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:96,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[`The visual model on the right side of our presentation example has a few repeating structures and contains a lot of elements. This is a perfect use case for element `,(0,e.jsxDEV)(n.a,{href:"/docs/editor/element-tree#group-elements",children:(0,e.jsxDEV)(n.strong,{children:"Grouping"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:99,columnNumber:41},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:99,columnNumber:40},this),". Let's see it in action."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:98,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:["First add a ",(0,e.jsxDEV)(n.a,{href:"/docs/editor/elements/rich-text",children:"rich-text element"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:101,columnNumber:13},this),", ",(0,e.jsxDEV)(n.strong,{children:"clear"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:101,columnNumber:67},this)," the background, set the font-size to ",(0,e.jsxDEV)(n.code,{children:"21"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:101,columnNumber:114},this),", the color to ",(0,e.jsxDEV)(n.code,{children:"white"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:101,columnNumber:133},this),' and type "',(0,e.jsxDEV)(n.strong,{children:"App"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:101,columnNumber:151},this),`" as text content. Then add a rectangle element right under the rich-text element. The dimension should be `,(0,e.jsxDEV)(n.code,{children:"115"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:102,columnNumber:89},this)," \xD7 ",(0,e.jsxDEV)(n.code,{children:"115"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:102,columnNumber:103},this),`. Border width `,(0,e.jsxDEV)(n.code,{children:"6"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:103,columnNumber:14},this)," and the border color should be ",(0,e.jsxDEV)(n.code,{children:"white"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:103,columnNumber:49},this),". Once we have them, we can select the two elements and group them together."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:101,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"grouping-elements",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#grouping-elements",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Grouping elements"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:105,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:["On the ",(0,e.jsxDEV)(n.a,{href:"/docs/editor/element-tree",children:"element tree"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:107,columnNumber:8},this),` (Left toolbar) you see all the elements of your current Slide. You can select multiple elements by pressing `,(0,e.jsxDEV)(S,{children:"Shift"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:108,columnNumber:46},this),` and clicking on the elements, or by a drag selection on the canvas. Once you have selected the elements you can group them by opening the context-menu via right-click on the element tree and select `,(0,e.jsxDEV)(n.strong,{children:"Group selection"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:109,columnNumber:131},this),"."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:107,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/3-grouping.png",width:1920,height:1080,quality:50,alt:"Richtext and rectangle element grouped together"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:111,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:['Open the context-menu again and rename the group to "',(0,e.jsxDEV)(n.strong,{children:"App"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:119,columnNumber:54},this),`". This will help us to get a better overview of the elements. Since the "ComponentA" and "ComponentB" are repeating, we will just duplicate the "App" group twice. In order to do that, open the context-menu of the "App" group and select `,(0,e.jsxDEV)(n.strong,{children:"Duplicate"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:121,columnNumber:53},this),'. Rename them to "ComponentA" and "ComponentB" as well.']},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:119,columnNumber:1},this),` `,(0,e.jsxDEV)(k,{type:"info",children:(0,e.jsxDEV)(n.p,{children:`Grouped elements behave like a single element on the canvas. This is convenient when you want to move those elements at once.`},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:124,columnNumber:3},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:123,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.em,{children:"But how can I edit the content of the rich-text element inside a group?"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:128,columnNumber:1},this)," \u{1F914}"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:128,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Well, there are multiple ways to do that. Here are two common methods:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:130,columnNumber:1},this),` `,(0,e.jsxDEV)(n.ol,{children:[` `,(0,e.jsxDEV)(n.li,{children:`Double-click on the group in the canvas to focus the underlying element. Once an element inside a group is selected you're also able to select other group children on the canvas. Select the richtext element and double-click on it to edit the content.`},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:132,columnNumber:1},this),` `,(0,e.jsxDEV)(n.li,{children:["Select the richtext element directly in the element tree and press ",(0,e.jsxDEV)(S,{children:"Enter"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:134,columnNumber:71},this)," to edit the content."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:134,columnNumber:1},this),` `]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:132,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/3-visual-model.png",width:1920,height:1080,quality:50,alt:"The final visual model"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:136,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:['Next, add the 2 arrow elements. Then select the whole visual model elements and group them again together as "',(0,e.jsxDEV)(n.strong,{children:"Visual model"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:144,columnNumber:111},this),`". Now you can lock the group by clicking on the lock icon in the element tree. This will prevent you to select it on the canvas accidentally.`]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:144,columnNumber:1},this),` `,(0,e.jsxDEV)(n.blockquote,{children:[` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Tip"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:147,columnNumber:3},this)," \u{1F4A1}: You can collapse groups in the element tree. This will help you to get a better overview of the elements in your Slide."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:147,columnNumber:3},this),` `]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:147,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"creation-of-the-second-slide",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#creation-of-the-second-slide",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Creation of the second Slide"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:149,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[`Now we have the first Slide ready. Let's create the second Slide. On the bottom of the editor, you see a small preview of your current Slide. You can click on the `,(0,e.jsxDEV)(n.strong,{children:"Add Slide"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:152,columnNumber:98},this),` button to create a new Slide. However, since the Slides are very similar we will just duplicate the first Slide.`]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:151,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 1:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:155,columnNumber:1},this)," Open the context-menu of the first Slide"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:155,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 2:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:157,columnNumber:1},this)," Select ",(0,e.jsxDEV)(n.strong,{children:"Duplicate"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:157,columnNumber:20},this),". Now you should be on the second Slide."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:157,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/4-duplicate-slide.png",width:1920,height:1080,quality:50,alt:"Duplicating the first Slide"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:159,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"The current active Slide is marked with a blue border in the Slide preview at the bottom of the editor."},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:167,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 3:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:169,columnNumber:1},this)," Add this code to line #2 ",(0,e.jsxDEV)(n.code,{children:"const data = useData()"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:169,columnNumber:38},this),"."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:169,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[`Now it's time to see the Code Change Animation in action. Press the "`,(0,e.jsxDEV)(n.strong,{children:"Present"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:171,columnNumber:70},this),'" button \u{1F37F}']},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:171,columnNumber:1},this),` `,(0,e.jsxDEV)(C,{mx:"auto",maxW:"700px",children:(0,e.jsxDEV)(x,{rounded:"15px",overflow:"hidden",file:"tutorials/create-your-first-presentation/1-first-code-animation.mp4",width:1920,height:1080},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:174,columnNumber:3},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:173,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Pretty Cool, right? \u{1F60E}"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:183,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"circle-movement-animation",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#circle-movement-animation",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Circle movement animation"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:185,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Now we will add a circle movement animation on the visual model."},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:187,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 1:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:189,columnNumber:1},this)," Add an ellipse element as a circle with the dimension ",(0,e.jsxDEV)(n.code,{children:"48"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:189,columnNumber:67},this)," \xD7 ",(0,e.jsxDEV)(n.code,{children:"48"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:189,columnNumber:80},this),' and place it right in the center of the "App" rectangle.']},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:189,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 2:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:191,columnNumber:1},this)," Then duplicate the circle and place it exactly in the same position as the previous circle on top of it."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:191,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Why do we need two circles? We'll deep dive into that soon."},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:193,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/5-circle-animation.png",width:1920,height:1080,quality:50,alt:"Preparing the circle animation"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:195,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 3:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:203,columnNumber:1},this)," Duplicate the Slide Nr. 2"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:203,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 4:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:205,columnNumber:1},this)," On the ",(0,e.jsxDEV)("u",{children:"third"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:205,columnNumber:20},this),` Slide we'll move the circle to the "ComponentA" rectangle.`]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:205,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[`Now it's time to see the circle movement animation in action. Press the "`,(0,e.jsxDEV)(n.strong,{children:"Present"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:207,columnNumber:74},this),'" button again \u{1F37F}']},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:207,columnNumber:1},this),` `,(0,e.jsxDEV)(C,{mx:"auto",maxW:"700px",children:(0,e.jsxDEV)(x,{rounded:"15px",overflow:"hidden",file:"tutorials/create-your-first-presentation/2-basic-circle-animation.mp4",width:1920,height:1080},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:210,columnNumber:3},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:209,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Ok, that's a good start. But first, let's understand how snappify handles the animation behind the scene."},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:219,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"how-does-snappify-handle-the-animation",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#how-does-snappify-handle-the-animation",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"How does snappify handle the animation?"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:221,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Let's break it down: First of all, we need to understand how snappify can make the animation between the Slides."},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:223,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:`All elements have a unique identifier per Slide. If you duplicate an element to another Slide (either by duplicating the whole Slide, or just by copy and pasting a single element) snappify can link those elements together.`},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:225,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:`So if you change for example the position of a linked element on the next Slide, snappify will automatically animate the transition of the two states. Snappify can also animate the size, opacity, rotation, tilting, scale, border-radius and even colors. Also, the code change animations are working in the same way.`},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:228,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"With that knowledge. I think we can get a bit more creative with the circle animation. \u{1F60F}"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:232,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"advanced-movement-animation",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#advanced-movement-animation",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Advanced movement animation"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:234,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Let's add a bit more advanced movement animation to the circle."},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:236,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 1:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:238,columnNumber:1},this)," Go to the previous Slide Nr. 2"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:238,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 2:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:240,columnNumber:1},this)," Select the overlaying circle on top."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:240,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 3:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:242,columnNumber:1},this)," Make the circle a bit smaller. The dimension in this case ",(0,e.jsxDEV)(n.code,{children:"26"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:242,columnNumber:71},this)," \xD7 ",(0,e.jsxDEV)(n.code,{children:"26"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:242,columnNumber:84},this),"."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:242,columnNumber:1},this),` `,(0,e.jsxDEV)(k,{type:"info",children:(0,e.jsxDEV)(n.p,{children:"Note: For some elements, it makes more sense to scale them instead of changing the width and height."},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:245,columnNumber:3},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:244,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 4:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:248,columnNumber:1},this)," Additionally set the opacity to ",(0,e.jsxDEV)(n.code,{children:"0"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:248,columnNumber:45},this),"."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:248,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/6-animation-adaption.png",width:1920,height:1080,quality:50,alt:"Preparing the circle animation"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:250,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[`Can you guess how the animation going to look like? Let's see! Press the "`,(0,e.jsxDEV)(n.strong,{children:"Present"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:258,columnNumber:75},this),'" button \u{1F37F}']},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:258,columnNumber:1},this),` `,(0,e.jsxDEV)(C,{mx:"auto",maxW:"700px",children:(0,e.jsxDEV)(x,{rounded:"15px",overflow:"hidden",file:"tutorials/create-your-first-presentation/3-final-circle-animation.mp4",width:1920,height:1080},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:261,columnNumber:3},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:260,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"We basically added a FadeIn and ScaleIn animation to the circle. Now the circle animation looks very smooth. \u{1F60D}"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:270,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"finalize-the-third-slide",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#finalize-the-third-slide",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Finalize the Third Slide"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:272,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Now we will finalize the third Slide and prepare the elements for the next Slide."},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:274,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 1:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:276,columnNumber:1},this)," Select the third Slide and change the code."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:276,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 2:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:278,columnNumber:1},this)," Duplicate the circle from ComponentA, make it smaller and set the opacity to ",(0,e.jsxDEV)(n.code,{children:"0"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:278,columnNumber:90},this),". The exact same steps as we did on the previous Slide."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:278,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/7-slide-3.png",width:1920,height:1080,quality:50,alt:"Code changes for the third Slide and preparing the next circle animation"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:280,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"slide-nr-4",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#slide-nr-4",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Slide Nr. 4"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:288,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Duplicate the third Slide and make sure you are on Slide Nr. 4"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:290,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 1:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:292,columnNumber:1},this)," Apply the code changes."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:292,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 2:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:294,columnNumber:1},this),' Move the circle to the "ComponentB" rectangle, and make it visible and bigger again.']},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:294,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/8-slide-4.png",width:1920,height:1080,quality:50,alt:"Slide 4 with its changes"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:296,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"slide-nr-5",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#slide-nr-5",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Slide Nr. 5"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:304,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Duplicate the fourth Slide and make sure you are on Slide Nr. 5"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:306,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 1:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:308,columnNumber:1},this)," Add a red-bordered circle around the circle from ComponentA."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:308,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 2:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:310,columnNumber:1},this)," Add a richtext element beside it and type ",(0,e.jsxDEV)(n.code,{children:"I don't need this prop \u{1F914}"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:310,columnNumber:55},this)]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:310,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 3:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:312,columnNumber:1},this)," Connect the red circle with the richtext via an arrow element."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:312,columnNumber:1},this),` `,(0,e.jsxDEV)(n.blockquote,{children:[` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"PRO Tip"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:314,columnNumber:3},this),` \u{1F4A1}: Hide the whole "Visual model" Group by clicking on the "Eye icon" in the element tree. Do the same for the circle with the gradient background so that only the red circle and the richtext is visible. Now it is much easier to attach the arrow to both elements. After that, you can make the hidden elements visible again.`]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:314,columnNumber:3},this),` `]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:314,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/9-slide-5.png",width:1920,height:1080,quality:50,alt:"Slide 5 with its changes"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:318,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"slide-nr-6",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#slide-nr-6",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Slide Nr. 6"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:326,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 1:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:328,columnNumber:1},this),` Duplicate the second Slide to the end. In order to do that open the context-menu on the second Slide per right-click. Hover over the "`,(0,e.jsxDEV)(n.strong,{children:"Duplicate"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:329,columnNumber:17},this),'" option and press ',(0,e.jsxDEV)(v,{},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:329,columnNumber:49},this),'. Then you will see that the option changes to "',(0,e.jsxDEV)(n.strong,{children:"Duplicate to end"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:329,columnNumber:111},this),`". Click on it while still pressing the `,(0,e.jsxDEV)(v,{},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:330,columnNumber:38},this)," key."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:328,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 2:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:332,columnNumber:1},this)," Delete the transparent circle."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:332,columnNumber:1},this),` `,(0,e.jsxDEV)(k,{type:"info",children:(0,e.jsxDEV)(n.p,{children:`Even though we want to create a circle movement animation from "App" to "ComponentB", we need to delete the circle. Because in Slide Nr. 5 there is a circle element with the exact same animation id. If we won't delete it then snappify will link the circles and run an animation.`},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:335,columnNumber:3},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:334,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/10-slide-6.png",width:1920,height:1080,quality:50,alt:"Slide 6 preview"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:340,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"slide-nr-7",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#slide-nr-7",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Slide Nr. 7"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:348,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Duplicate the sixth Slide and make sure you are on Slide Nr. 7"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:350,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 1:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:352,columnNumber:1},this),` Apply the code changes. The code content increases (lines) but as you can see the editor stays vertically centered. This is due to the fact that we set the `,(0,e.jsxDEV)(n.strong,{children:"Y"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:353,columnNumber:41},this)," axis to ",(0,e.jsxDEV)(n.strong,{children:"Center"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:353,columnNumber:55},this)," in the Position Constraints."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:352,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 2:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:355,columnNumber:1},this),' Add an arrow element pointing from "App" to "ComponentB".']},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:355,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 3:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:357,columnNumber:1},this),' Add a richtext element to the existing arrow from "ComponentA" to "ComponentB" and type ',(0,e.jsxDEV)(n.code,{children:"children"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:357,columnNumber:101},this),"."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:357,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 4:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:359,columnNumber:1},this),' Add again a smaller transparent circle to the "App" rectangle.']},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:359,columnNumber:1},this),` `,(0,e.jsxDEV)(n.blockquote,{children:[` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"PRO Tip"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:361,columnNumber:3},this),` \u{1F4A1}: Go to the second Slide and select the transparent circle. Copy it (`,(0,e.jsxDEV)(v,{},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:362,columnNumber:12},this)," + ",(0,e.jsxDEV)(S,{children:"C"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:362,columnNumber:29},this),") and paste it (",(0,e.jsxDEV)(v,{},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:362,columnNumber:57},this)," + ",(0,e.jsxDEV)(S,{children:"V"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:362,columnNumber:74},this),") to the Slide Nr. 7."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:361,columnNumber:3},this),` `]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:361,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/11-slide-7.png",width:1920,height:1080,quality:50,alt:"Slide 7 with its changes"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:364,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"slide-nr-8",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#slide-nr-8",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Slide Nr. 8"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:372,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Duplicate the seventh Slide and make sure you are on Slide Nr. 8"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:374,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 1:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:376,columnNumber:1},this)," Apply the code changes."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:376,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 2:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:378,columnNumber:1},this),' Move the transparent circle to the "ComponentB" rectangle, and make it visible and bigger again.']},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:378,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/12-slide-8.png",width:1920,height:1080,quality:50,alt:"Slide 7 with its changes"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:380,columnNumber:1},this),` `,(0,e.jsxDEV)(n.h2,{id:"last-slide",children:[(0,e.jsxDEV)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#last-slide",children:(0,e.jsxDEV)(n.span,{className:"icon icon-link"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this),"Last Slide"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:388,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Duplicate the eighth Slide and make sure you are on Slide Nr. 9"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:390,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 1:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:392,columnNumber:1},this),` Unlock the locked elements in the element tree and select all elements. Then push them completely to the left of the canvas. With that, we create a SlideOut animation for the elements.`]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:392,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:[(0,e.jsxDEV)(n.strong,{children:"Step 2:"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:396,columnNumber:1},this)," Add a big richtext element and type ",(0,e.jsxDEV)(n.code,{children:"Avoid Prop Drilling \u{1F973}"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:396,columnNumber:49},this),"."]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:396,columnNumber:1},this),` `,(0,e.jsxDEV)(u,{src:"/images/tutorials/create-your-first-presentation/13-slide-9.png",width:1920,height:1080,quality:50,alt:"Slide 9 preview on canvas with its changes"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:398,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:"Thats it! We created a nice animated presentation with snappify. \u{1F389}"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:406,columnNumber:1},this),` `,(0,e.jsxDEV)(n.p,{children:["Do you have open questions? Check out our ",(0,e.jsxDEV)(n.a,{href:"/docs",children:"documentation"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:408,columnNumber:43},this)," and don't hesitate to ",(0,e.jsxDEV)(A,{children:"reach out to us"},void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:408,columnNumber:88},this)," via the chat. We are happy to help you! \u{1F917}"]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:408,columnNumber:1},this)]},void 0,!0,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx",lineNumber:1,columnNumber:1},this)}function xn(o={}){let{wrapper:n}=o.components||{};return n?(0,e.jsxDEV)(n,Object.assign({},o,{children:(0,e.jsxDEV)(Ae,o,void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this)}),void 0,!1,{fileName:"/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx"},this):Ae(o)}var vn=xn;function w(o,n,b){throw new Error("Expected "+(n?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it."+(b?"\nIt\u2019s referenced in your code at `"+b+"` in `/vercel/path0/content/tutorials/_mdx_bundler_entry_point-5c3f79c2-3902-4dcf-a7bf-72b5798f6998.mdx`":""))}return pn(yn);})(); /*! Bundled license information: react/cjs/react-jsx-dev-runtime.development.js: (** * @license React * react-jsx-dev-runtime.development.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. *) */ ;return Component;

Welcome to our Tutorials

Create your first presentation

How to leverage form elements