{"id":3417,"date":"2025-06-22T09:15:39","date_gmt":"2025-06-22T09:15:39","guid":{"rendered":"https:\/\/andresyves.com\/?post_type=yada_wiki&#038;p=3417"},"modified":"2025-07-08T11:45:04","modified_gmt":"2025-07-08T11:45:04","slug":"ekeys","status":"publish","type":"yada_wiki","link":"https:\/\/andresyves.com\/es\/wiki\/ekeys\/","title":{"rendered":"EKeys"},"content":{"rendered":"<p><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-justify-content-space-between fusion-flex-content-wrap\" style=\"max-width:1260px;margin-left: calc(-5% \/ 2 );margin-right: calc(-5% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:2.375%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:2.375%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:2.375%;--awb-spacing-left-medium:2.375%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:2.375%;--awb-spacing-left-small:2.375%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-row\"><div ><a class=\"fusion-button button-flat button-medium button-custom fusion-button-default button-1 fusion-button-default-span fusion-animated fusion-has-button-gradient\" style=\"--button_accent_color:var(--awb-color1);--button_accent_hover_color:var(--awb-color2);--button_border_hover_color:var(--awb-color1);--button_gradient_angle:207deg;--button_gradient_start:21%;--button_gradient_top_color:#00426b;--button_gradient_bottom_color:#000a19;--button_gradient_top_color_hover:#00ba3a;--button_gradient_bottom_color_hover:#083f00;--button_text_transform:uppercase;--button_margin-top:0px;--button_margin-right:0px;--button_margin-bottom:0px;--button_margin-left:0px;\" data-animationType=\"fadeInUp\" data-animationDuration=\"0.6\" data-animationDelay=\"0.4\" data-animationOffset=\"top-into-view\" target=\"_self\" href=\"https:\/\/andresyves.com\/wp-content\/uploads\/2025\/06\/eKeysJSX.zip\"><span class=\"fusion-button-icon-divider button-icon-divider-left\"><div class=\"awb-button__hover-content\"><i class=\"fa-arrow-down fas awb-button__icon awb-button__icon--default\" aria-hidden=\"true\"><\/i><i class=\"fa-check fas awb-button__icon awb-button__icon--hover\" aria-hidden=\"true\"><\/i><\/div><\/span><div class=\"awb-button__hover-content awb-button__hover-content--default\"><span class=\"fusion-button-text awb-button__text awb-button__text--default fusion-button-text-left\">Ekeys JSX<\/span><span class=\"fusion-button-text awb-button__text awb-button__text--hover fusion-button-text-left\">GO!<\/span><\/div><\/a><\/div><div ><a class=\"fusion-button button-flat button-medium button-custom fusion-button-default button-2 fusion-button-default-span fusion-animated fusion-has-button-gradient\" style=\"--button_accent_color:var(--awb-color1);--button_accent_hover_color:var(--awb-color2);--button_border_hover_color:var(--awb-color1);--button_gradient_angle:207deg;--button_gradient_start:21%;--button_gradient_top_color:#00426b;--button_gradient_bottom_color:#000a19;--button_gradient_top_color_hover:#00ba3a;--button_gradient_bottom_color_hover:#083f00;--button_text_transform:uppercase;--button_margin-left:20px;\" data-animationType=\"fadeInUp\" data-animationDuration=\"0.6\" data-animationDelay=\"0.6\" data-animationOffset=\"top-into-view\" target=\"_self\" href=\"https:\/\/andresyves.com\/wp-content\/uploads\/2025\/06\/EKEYS-DYNAMIC-KEYFRAMES-AEPROJECT.zip\"><span class=\"fusion-button-icon-divider button-icon-divider-left\"><div class=\"awb-button__hover-content\"><i class=\"fa-arrow-down fas awb-button__icon awb-button__icon--default\" aria-hidden=\"true\"><\/i><i class=\"fa-check fas awb-button__icon awb-button__icon--hover\" aria-hidden=\"true\"><\/i><\/div><\/span><div class=\"awb-button__hover-content awb-button__hover-content--default\"><span class=\"fusion-button-text awb-button__text awb-button__text--default fusion-button-text-left\">Ekeys AE Demo<\/span><span class=\"fusion-button-text awb-button__text awb-button__text--hover fusion-button-text-left\">GO!<\/span><\/div><\/a><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-blend:overlay;--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:30px;--awb-spacing-right-large:2.375%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:2.375%;--awb-width-medium:100%;--awb-spacing-right-medium:2.375%;--awb-spacing-left-medium:2.375%;--awb-width-small:100%;--awb-spacing-right-small:2.375%;--awb-spacing-left-small:2.375%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1\"><p>Animate without keyframes for dynamic properties.<\/p>\n<p>Source code from motiondeveloper.com<\/p>\n<\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:30px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1260px;margin-left: calc(-5% \/ 2 );margin-right: calc(-5% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-2 fusion_builder_column_1_2 1_2 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:4.75%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:4.75%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:4.75%;--awb-spacing-left-medium:4.75%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:2.375%;--awb-spacing-left-small:2.375%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-2\"><h5 class=\"fusion-responsive-typography-calculated\" style=\"--fontsize: 24; line-height: 1.08;\" data-fontsize=\"24\" data-lineheight=\"25.9167px\"><strong style=\"color: #00ffff;\">EXAMPLE OF SETUP<\/strong><\/h5>\n<div class=\"line\">const eKeys = footage(\"eKeys.jsx\").sourceData;<\/div>\n<div class=\"line\">const keys = [<\/div>\n<div class=\"line\">,<\/div>\n<div class=\"line\">,<\/div>\n<div class=\"line\">];<\/div>\n<div class=\"line\"><\/div>\n<div class=\"line\">eKeys.animate(keys, (time = thisLayer.time));<\/div>\n<\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-3 fusion_builder_column_1_2 1_2 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:4.75%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:4.75%;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:4.75%;--awb-spacing-left-medium:4.75%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:2.375%;--awb-spacing-left-small:2.375%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-3\"><h5 class=\"\" style=\"--fontsize: 24; line-height: 1.08;\" data-fontsize=\"24\" data-lineheight=\"25.9167px\"><span style=\"color: #00ffff;\"><strong style=\"color: #00f741;\">BOTTOM RIGHT<\/strong><\/span><\/h5>\n<ul class=\"css-iesbcf\" role=\"list\">\n<li class=\"css-npwskp\">\n<div class=\"css-1tv7oql\">\n<p class=\"chakra-text css-0\"><strong><code class=\"chakra-code css-ohbjw3\">keyTime<\/code><\/strong><\/p>\n<p class=\"chakra-text css-0\">The location of the keyframe on the timeline, in seconds<\/p>\n<\/div>\n<\/li>\n<li class=\"css-npwskp\">\n<div class=\"css-1tv7oql\">\n<p class=\"chakra-text css-0\"><strong><code class=\"chakra-code css-ohbjw3\">keyValue<\/code><\/strong><\/p>\n<p class=\"chakra-text css-0\">The value of the keyframe, which can be a\u00a0<code class=\"chakra-code css-ohbjw3\">number<\/code>\u00a0or\u00a0<code class=\"chakra-code css-ohbjw3\">array<\/code><\/p>\n<\/div>\n<\/li>\n<li class=\"css-npwskp\">\n<div class=\"css-1tv7oql\">\n<p class=\"chakra-text css-0\"><strong><code class=\"chakra-code css-ohbjw3\">easeIn<\/code><\/strong>\u00a0and\u00a0<strong><code class=\"chakra-code css-ohbjw3\">easeOut<\/code><\/strong><\/p>\n<p class=\"chakra-text css-0\">The amount of easing to be applied as a number between\u00a0<code class=\"chakra-code css-ohbjw3\">0<\/code>\u00a0and\u00a0<code class=\"chakra-code css-ohbjw3\">100<\/code>\u00a0(both defaulting to\u00a0<code class=\"chakra-code css-ohbjw3\">33<\/code>).<\/p>\n<p class=\"chakra-text css-0\">This works the same way as the influence percentage on traditional keyframes.<\/p>\n<\/div>\n<\/li>\n<li class=\"css-npwskp\">\n<div class=\"css-1tv7oql\">\n<p class=\"chakra-text css-0\"><strong><code class=\"chakra-code css-ohbjw3\">velocityIn<\/code><\/strong>\u00a0and\u00a0<strong><code class=\"chakra-code css-ohbjw3\">velocityOut<\/code><\/strong><\/p>\n<p class=\"chakra-text css-0\">The incoming and outgoing velocity of the keyframe (both defaulting to\u00a0<code class=\"chakra-code css-ohbjw3\">0<\/code>).<\/p>\n<\/div>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;width:100%;\"><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;width:100%;\"><\/div><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"author":1,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"wiki_cats":[53],"wiki_tags":[54],"class_list":["post-3417","yada_wiki","type-yada_wiki","status-publish","hentry","wiki_cats-files","wiki_tags-dynamic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>EKeys - A.Y Online<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/andresyves.com\/es\/wiki\/ekeys\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"EKeys - A.Y Online\" \/>\n<meta property=\"og:url\" content=\"https:\/\/andresyves.com\/es\/wiki\/ekeys\/\" \/>\n<meta property=\"og:site_name\" content=\"A.Y Online\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-08T11:45:04+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/andresyves.com\/wiki\/ekeys\/\",\"url\":\"https:\/\/andresyves.com\/wiki\/ekeys\/\",\"name\":\"EKeys - A.Y Online\",\"isPartOf\":{\"@id\":\"https:\/\/andresyves.com\/#website\"},\"datePublished\":\"2025-06-22T09:15:39+00:00\",\"dateModified\":\"2025-07-08T11:45:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/andresyves.com\/wiki\/ekeys\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/andresyves.com\/wiki\/ekeys\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/andresyves.com\/wiki\/ekeys\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/andresyves.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wiki Pages\",\"item\":\"https:\/\/andresyves.com\/wiki\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"EKeys\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/andresyves.com\/#website\",\"url\":\"https:\/\/andresyves.com\/\",\"name\":\"A.Y Online\",\"description\":\"Andr\u00e9s Yves Portfolio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/andresyves.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"EKeys - A.Y Online","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/andresyves.com\/es\/wiki\/ekeys\/","og_locale":"es_ES","og_type":"article","og_title":"EKeys - A.Y Online","og_url":"https:\/\/andresyves.com\/es\/wiki\/ekeys\/","og_site_name":"A.Y Online","article_modified_time":"2025-07-08T11:45:04+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/andresyves.com\/wiki\/ekeys\/","url":"https:\/\/andresyves.com\/wiki\/ekeys\/","name":"EKeys - A.Y Online","isPartOf":{"@id":"https:\/\/andresyves.com\/#website"},"datePublished":"2025-06-22T09:15:39+00:00","dateModified":"2025-07-08T11:45:04+00:00","breadcrumb":{"@id":"https:\/\/andresyves.com\/wiki\/ekeys\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/andresyves.com\/wiki\/ekeys\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/andresyves.com\/wiki\/ekeys\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/andresyves.com\/"},{"@type":"ListItem","position":2,"name":"Wiki Pages","item":"https:\/\/andresyves.com\/wiki\/"},{"@type":"ListItem","position":3,"name":"EKeys"}]},{"@type":"WebSite","@id":"https:\/\/andresyves.com\/#website","url":"https:\/\/andresyves.com\/","name":"A.Y Online","description":"Andr\u00e9s Yves Portfolio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/andresyves.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"}]}},"_links":{"self":[{"href":"https:\/\/andresyves.com\/es\/wp-json\/wp\/v2\/yada_wiki\/3417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/andresyves.com\/es\/wp-json\/wp\/v2\/yada_wiki"}],"about":[{"href":"https:\/\/andresyves.com\/es\/wp-json\/wp\/v2\/types\/yada_wiki"}],"author":[{"embeddable":true,"href":"https:\/\/andresyves.com\/es\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":22,"href":"https:\/\/andresyves.com\/es\/wp-json\/wp\/v2\/yada_wiki\/3417\/revisions"}],"predecessor-version":[{"id":3508,"href":"https:\/\/andresyves.com\/es\/wp-json\/wp\/v2\/yada_wiki\/3417\/revisions\/3508"}],"wp:attachment":[{"href":"https:\/\/andresyves.com\/es\/wp-json\/wp\/v2\/media?parent=3417"}],"wp:term":[{"taxonomy":"wiki_cats","embeddable":true,"href":"https:\/\/andresyves.com\/es\/wp-json\/wp\/v2\/wiki_cats?post=3417"},{"taxonomy":"wiki_tags","embeddable":true,"href":"https:\/\/andresyves.com\/es\/wp-json\/wp\/v2\/wiki_tags?post=3417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}