{"id":435,"date":"2018-06-29T02:39:16","date_gmt":"2018-06-29T02:39:16","guid":{"rendered":"https:\/\/blog.hassler.ec\/wp\/?p=435"},"modified":"2018-06-23T02:39:59","modified_gmt":"2018-06-23T02:39:59","slug":"tutorial-animate-the-opening-star-wars-crawl-in-a-react-app-with-greensock","status":"publish","type":"post","link":"https:\/\/blog.hassler.ec\/wp\/2018\/06\/29\/tutorial-animate-the-opening-star-wars-crawl-in-a-react-app-with-greensock\/","title":{"rendered":"Tutorial: Animate the Opening Star Wars Crawl in a React App with GreenSock"},"content":{"rendered":"

Do you like Star Wars? Do you enjoy animating things in a web browser?<\/p>\n

So do I!<\/p>\n

I\u2019ve wanted to dig into\u00a0the GreenSock library<\/a>\u00a0for a while now, so of course, I my first instinct was to try recreating the Star Wars opening crawl with it.<\/p>\n

GreenSock (aka GSAP) is a library that makes animating DOM elements with JavaScript exceptionally easy. At first, the library can seem a bit daunting, however, if you can wrap your head around a few core concepts you\u2019ll be up and running in no time.<\/p>\n

Here\u2019s what we\u2019re working towards:<\/p>\n

\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>
Animating a Star Wars-inspired crawl is a cinch with GreenSock\u00a0\ud83d\ude42<\/figcaption><\/figure>\n

TL;DR<\/strong>\u00a0Check out a\u00a0live demo of the crawl here<\/a>\u00a0and the\u00a0complete repo here<\/a>.<\/p>\n

For this tutorial, we\u2019ll use\u00a0Create React App<\/a>\u00a0to quickly bootstrap a React application, so be sure to install that if you haven\u2019t already.<\/p>\n

Note: This tutorial was partly inspired by\u00a0<\/em>a post by Christopher Kade<\/em><\/a>\u00a0that I read on dev.to. Check out that original post for a version of the Star Wars crawl that uses CSS keyframe animation instead of GreenSock.<\/em><\/p>\n

Getting Started<\/h3>\n

We\u2019ll start by creating a new React app:<\/p>\n

create-react-app star-wars-crawl-greensock<\/pre>\n
Then start your app:<\/p>\n
cd star-wars-crawl-greensock && yarn start<\/pre>\n
We\u2019ll keep it simple and work with the default files in the React app we just scaffolded, but we\u2019ll swap the logo for a Star Wars-inspired one and add additional SVGs for a volume button at the end.<\/p>\n
The original opening crawl used\u00a0various styles of Franklin Gothic<\/a>, but we\u2019ll keep it simple and use Open Sans, which is a readily-available, close approximation, and Saira Extra Condensed (both available on Google fonts).<\/p>\n
We\u2019ll start by adding our fonts and a minimal reset and to\u00a0index.css<\/code>:<\/p>\n
\/* index.css *\/<\/pre>\n
\/* Fonts *\/<\/pre>\n
@import url('https:\/\/fonts.googleapis.com\/css?family=Open+Sans:400,600,700|Saira+Extra+Condensed:500');<\/pre>\n
\/* Minimal Reset *\/<\/pre>\n
html, body, div, h1, h2, p, section, audio {  \r\n margin: 0;  \r\n padding: 0;\r\n border: 0;\r\n font-size: 100%;\r\n font: inherit;\r\n vertical-align: baseline;\r\n}<\/pre>\n
html {\r\n  font-size: 24px;\r\n}<\/pre>\n
body {\r\n  align-items: center;\r\n  background: black;\r\n  color: rgb(229, 177, 58);\r\n  display: flex;\r\n  font-family: \"Open Sans\", sans-serif;\r\n  font-weight: 400;\r\n  height: 100vh;\r\n  justify-content: center;\r\n  line-height: 1.25;\r\n  overflow: hidden;\r\n}<\/pre>\n
div[id=\"root\"] {\r\n  width: 100%;\r\n}<\/pre>\n
Now would be a good time to wipe out all of the default styles in\u00a0App.css<\/code>\u00a0as well, because we\u2019ll be adding our own CSS to this file as we go along.<\/p>\n
Lastly, we\u2019ll simplify the default JSX in\u00a0App.js<\/code>:<\/p>\n
\/\/ App.js<\/pre>\n
import React, { Component } from \"react\";\r\nimport '.\/App.css';<\/pre>\n
import logo from '.\/logo.svg';<\/pre>\n
class App extends Component {\r\n  render() {\r\n    return (\r\n      <div>\r\n        <p>Hello, GreenSock World!<\/p>\r\n      <\/div>\r\n    );\r\n  }\r\n}\r\n\r\nexport default App;<\/pre>\n
Note that you want to replace the default\u00a0logo.svg<\/code>\u00a0file in the\u00a0src<\/code>\u00a0directory with\u00a0our Star Wars-style logo available here<\/a>.<\/p>\n
At this point, our React app should look like this:<\/p>\n
\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>\n<\/figure>\n
Before we dive into GSAP, it\u2019s a good idea to have a game plan. There are three separate animations we need to create. We\u2019ll need to animate:<\/p>\n
    \n
  1. The \u201cA long time ago in a galaxy far, far away.\u2026\u201d text first<\/li>\n
  2. The logo entrance and exit<\/li>\n
  3. And finally, the episode number\/name and the main text crawl<\/li>\n<\/ol>\n
    Let\u2019s tackle each of these in order\u2026<\/p>\n
    Animate the Intro\u00a0Text<\/h3>\n
    Now for the fun part. Start by installing the GreenSock library in your app:<\/p>\n
    yarn add gsap<\/pre>\n
    Next, we\u2019ll add the intro text to our JSX, and describe how we want to animate it in\u00a0componentDidMount<\/code>:<\/p>\n
    \/\/ App.js<\/pre>\n
    import React, { Component } from \"react\";\r\nimport { TweenLite } from \"gsap\";\r\n\r\nimport \".\/App.css\";\r\n\r\nclass App extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.intro = React.createRef(); \/\/ shiny new React 16.3 ref API!\r\n  }<\/pre>\n
    componentDidMount() {\r\n    TweenLite.to(\r\n      this.intro.current, \r\n      4.5, \r\n      { opacity: 1, delay: 1 }\r\n    );\r\n    TweenLite.to(\r\n      this.intro.current, \r\n      1.5, \r\n      { opacity: 0, delay: 5.5 }\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div className=\"container\">\r\n        <section className=\"intro\" ref={this.intro}>\r\n          <p>\r\n            A long time ago, in a galaxy far,<br \/> far away....\r\n          <\/p>\r\n        <\/section>\r\n      <\/div>\r\n    );\r\n  }\r\n}\r\n\r\nexport default App;<\/pre>\n
    We\u2019ll also need more CSS to horizontally and vertically center the intro text, adjust its size, and change its colour to blue:<\/p>\n
    \/* App.css *\/<\/pre>\n
    .container {\r\n  height: 100vh;\r\n  position: relative;\r\n  width: 100%;\r\n}<\/pre>\n
    .intro {\r\n  left: 50%;\r\n  opacity: 0;\r\n  position: absolute;\r\n  transform: translate(-50%, -50%);\r\n  top: 50%;\r\n  z-index: 200;\r\n}<\/pre>\n
    .intro p {\r\n  color: rgb(75, 213, 238);\r\n  font-size: 1.25rem;\r\n}<\/pre>\n
    In\u00a0App.js<\/code>\u00a0we have our first encounter with\u00a0TweenLite<\/code>\u00a0from GSAP. This animation tool is very flexible.<\/p>\n
    In a nutshell, it allows you to tween one or more properties of an object (or array of objects) over a specified time period. It\u2019s\u00a0.to()<\/code>\u00a0method accepts three arguments: the reference to the element you wish to animate (accessed via a ref), the length of the animation, and an object describing the properties of the animation.<\/p>\n
    We use\u00a0TweenLite.to()<\/code>\u00a0twice so we can first animate the opacity of the intro text in for 4.5 seconds after a 1 second delay, then fade it out after a 5.5 second delay, because we need to wait for the first animation to complete.<\/p>\n
    Hmm, calculating delay times is a bit akward. Can we do better? Luckily, GSAP provides a better way in the form of\u00a0TimelineLite<\/code>.<\/p>\n
    Let\u2019s refactor\u00a0componentDidMount<\/code>:<\/p>\n
    \/\/ ...<\/pre>\n
    import { TimelineLite } from \"gsap\"; \/\/ import TimelineLite instead<\/pre>\n
    class<\/em> App extends<\/em> Component {<\/pre>\n
      \/\/ ...<\/pre>\n
      componentDidMount() {\r\n    const tl = new TimelineLite();\r\n    \r\n    tl\r\n      .to(this.intro.current, 4.5, { opacity<\/em>: 1, delay<\/em>: 1 })\r\n      .to(this.intro.current, 1.5, { opacity<\/em>: 0 });\r\n  }<\/pre>\n
      \/\/ ...<\/pre>\n
    }<\/pre>\n
    Much better!\u00a0TimelineLite<\/a><\/code>\u00a0acts like a container for sequencing a series of tweens over time, starting one after another by default (with the ability to overlap them if necessary). We\u2019ll chain the rest of our animation on to this as we go.<\/p>\n
    Animate the\u00a0Logo<\/h3>\n
    To give logo the appearance of appearing and gradually drawing back in space away from us, we\u2019ll need to animate its scale and opacity.<\/p>\n
    Start by adding another section below the intro to contain the\u00a0logo.svg<\/code>:<\/p>\n
    <section className=\"logo\" ref={this.logo}>\r\n  <img src={logo} alt=\"Code Wars logo\" \/>\r\n<\/section><\/pre>\n
    Add the logo section\u2019s class to the same rules that apply to the intro:<\/p>\n
    .intro, .logo {\r\n  left: 50%;\r\n  opacity: 0;\r\n  position: absolute;\r\n  transform: translate(-50%, -50%);\r\n  top: 50%;\r\n  z-index: 200;\r\n}<\/pre>\n
    And add a few additional styles to centre the\u00a0logo.svg<\/code>\u00a0in its parent section:<\/p>\n
    .logo {\r\n  align-items: center;\r\n  display: flex;\r\n  justify-content: center;\r\n  width: 18rem;\r\n}<\/pre>\n
    Onto the JS\u2014create the logo ref in the\u00a0App<\/code>\u00a0constructor:<\/p>\n
    this.logo = React.createRef();<\/pre>\n
    And chain on our additional animations in\u00a0componentDidMount<\/code>:<\/p>\n
    import { Power2, TimelineLite } from \"gsap\"; \/\/ import Power2!<\/pre>\n
    class App extends Component {<\/pre>\n
      \/\/ ...<\/pre>\n
      componentDidMount() {\r\n    const tl = new TimelineLite();<\/pre>\n
        tl\r\n      .to(this.intro.current, 4.5, { opacity: 1, delay: 1 })\r\n      .to(this.intro.current, 1.5, { opacity: 0 })\r\n      .set(this.logo.current, { opacity: 1, scale: 2.75 })\r\n      .to(this.logo.current, 8, { \r\n        scale: 0.05, \r\n        ease: Power2.easeOut\r\n      })\r\n      .to(this.logo.current, 1.5, { opacity: 0 }, \"-=1.5\");\r\n  }<\/pre>\n
      \/\/ ...<\/pre>\n
    }<\/pre>\n
    As you can see, we chain the\u00a0.set()<\/code>\u00a0method to flip the opacity of the logo to\u00a01<\/code>\u00a0and set the scale of the logo to\u00a02.75<\/code>\u00a0instantly after the intro animation completes.<\/p>\n
    We then use the\u00a0.to()<\/code>\u00a0method to scale the logo down to\u00a00.05<\/code>\u00a0over 8 seconds. Simultaneously reducing the logo opacity over the same duration won\u2019t look right because we don\u2019t want to fade it out until it\u2019s far off in the distance. Luckily,\u00a0TimelineLite<\/code>\u00a0makes it easy work around this by chaining a separate\u00a0.to()<\/code>\u00a0method to animate the opacity of the logo to\u00a00<\/code>, passing a fourth argument of\u00a0'-=1.5'<\/code>\u00a0to it which will start that animation 1.5 seconds before the end of the previous animation.<\/p>\n
    We also have our first encounter with a\u00a0GSAP easing curve<\/a>\u00a0in our logo animation properties. I experimented with a few different curves and\u00a0Power2<\/code>ultimately felt most like original animation to me, but feel free to experiment with others (and don\u2019t forget to import from any curves you use from the\u00a0gsap<\/code>\u00a0library).<\/p>\n
    Animate the\u00a0Crawl<\/h3>\n
    We\u2019re almost the there! Add a final\u00a0section<\/code>\u00a0containing the crawl text:<\/p>\n
    <section className=\"crawl\">\r\n  <div className=\"content\" ref={this.content}>\r\n    <h1 className=\"title\">Episode 7<\/h1>\r\n    <h2 className=\"subtitle\">THE APP AWAKENS<\/h2>\r\n    <p>The Development Team Lead has vanished. In her absence, the sinister FUNCTIONAL BUG has risen from the ashes of the CI Tool and will not rest until the last developer has been destroyed.\r\n    <\/p>\r\n    <p>With the support of the QA TEAM, the Software Developer leads a brave RESISTANCE. He is desperate to find his Lead and gain her help in restoring peace and justice to the repository.\r\n    <\/p>\r\n    <p>The Developer has sent his most daring editor theme on a secret mission to the production branch, where an old ally has discovered a clue to the Lead\u2019s whereabouts....<\/p>\r\n  <\/div>\r\n<\/section><\/pre>\n
    Replicate the crawl text from your favourite episode, have some fun with this!<\/p>\n
    The CSS for the crawl is tricky, but luckily\u00a0doesn\u2019t involve any fancy camera rigging<\/a>. Our implementation relies on a 3D transform with absolute positioning:<\/p>\n
    \/* helps fade the text out as it recedes back in space *\/\r\n.container:before {\r\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);\r\n  bottom: 0;\r\n  content: \" \";\r\n  left: 0;\r\n  right: 0;\r\n  position: absolute;\r\n  top: 0;\r\n  z-index: 100;\r\n}<\/pre>\n
    .crawl {\r\n  font-size: 300%;\r\n  bottom: 0;\r\n  height: 80rem;\r\n  left: 50%;\r\n  position: absolute;\r\n  transform: translateX(-50%) perspective(300px) rotateX(28deg);\r\n  transform-origin: 50% 100%;\r\n  width: 90%;\r\n}<\/pre>\n
    .content {\r\n  position: absolute;\r\n  top: 100%;\r\n}<\/pre>\n
    .title {\r\n  font-weight: 600;\r\n  margin-bottom: 5rem;\r\n  text-align: center;\r\n}<\/pre>\n
    .subtitle {\r\n  font-family: \"Saira Extra Condensed\", sans-serif;\r\n  font-size: 250%;\r\n  font-weight: 500;\r\n  line-height: 1;\r\n  margin-bottom: 7rem;\r\n  transform: scale(1, 1.5);\r\n  text-align: center;\r\n}<\/pre>\n
    .content p {\r\n  font-weight: 700;\r\n  line-height: 1.33;\r\n  margin-bottom: 4rem;\r\n  text-align: justify;\r\n}<\/pre>\n
    Add another ref to the\u00a0App<\/code>\u00a0constructor:<\/p>\n
    this.content = React.createRef();<\/pre>\n
    And chain a final\u00a0.to()<\/code>\u00a0to scroll the text back into space:<\/p>\n
    componentDidMount() {\r\n  const tl = new TimelineLite();<\/pre>\n
      tl\r\n    .to(this.intro.current, 4.5, { opacity: 1, delay: 1 })\r\n    .to(this.intro.current, 1.5, { opacity: 0 })\r\n    .set(this.logo.current, { opacity: 1, scale: 2.75 })\r\n    .to(this.logo.current, 8, { \r\n      scale: 0.05, \r\n      ease: Power2.easeOut\r\n    })\r\n    .to(this.logo.current, 1.5, { opacity: 0 }, \"-=1.5\")\r\n    .to(this.content.current, 200, { top: \"-170%\" }); \/\/ ADD THIS!\r\n}<\/pre>\n
    To scroll the text back, we simply need to animate its\u00a0top<\/code>\u00a0property over approximately 200 seconds.<\/p>\n
    Finishing Touch (Adding\u00a0Music)<\/h3>\n
    Our animation looks pretty good at this point, but a Star Wars-inspired crawl wouldn\u2019t be complete without a soundtrack to accompany it.<\/p>\n
    This would have a much easier to accomplish prior to\u00a0a recent release of Chrome that blocked non-muted, autoplaying audio<\/a>\u00a0(which was partially rolled back, but will eventually be reimplemented).<\/p>\n
    Ultimately, to make our soundtrack Chrome-friendly we\u2019ll need to start autoplaying the theme music at a point synchronized with our animation (it will start muted), and give the viewer the ability to unmute the audio if they wish. So we can also call this finishing touch a bonus round for learning how to deal with the new \u201cautoplaying normal\u201d in Chrome ?<\/p>\n
    We\u2019ll start by importing two SVGs to\u00a0App.js<\/code>\u00a0to use as a button to indicate to the viewer whether the audio is muted:<\/p>\n
    import volumeOff from \".\/volume_off.svg\";\r\nimport volumeOn from \".\/volume_on.svg\";<\/pre>\n
    You can find the\u00a0volume_on.svg<\/a><\/code>\u00a0and\u00a0volume_off.svg<\/a><\/code>\u00a0files in the repo for this tutorial. Shout-out to\u00a0Agarunov Oktay-Abraham<\/a>\u00a0for the Noun Project icons.<\/p>\n
    We\u2019ll need to add a final ref to the constructor, and we\u2019ll also need to managed some state with respect to whether the audio is muted (of course starting off as\u00a0true<\/code>):<\/p>\n
    constructor(props) {\r\n  super(props);\r\n  \r\n  this.intro = React.createRef();\r\n  this.logo = React.createRef();\r\n  this.content = React.createRef();\r\n  this.audio = React.createRef(); \/\/ LAST REF TO ADD!<\/pre>\n
      this.state = {\r\n    muted: true\r\n  };\r\n}<\/pre>\n
    We\u2019ll also need to add some JSX for the\u00a0audio<\/code>\u00a0element and a\u00a0button<\/code>\u00a0to trigger the unmute action just after crawl\u00a0section<\/code>:<\/p>\n
    <audio ref={this.audio} muted>\r\n  <source\r\n    type=\"audio\/mpeg\"\r\nsrc=\"https:\/\/ia801307.us.archive.org\/28\/items\/JohnWilliamsStarWarsMainThemeFULL\/John%20Williams%20-%20Star%20Wars%20Main%20Theme%20(FULL).mp3\"\r\n\/>\r\n<\/audio>\r\n<button\r\n  className=\"volume\"\r\n  type=\"button\"\r\n  onClick= {this.onVolumeClick}\r\n>\r\n  {this.state.muted ? (\r\n    <img src={volumeOff} alt=\"Volume is off\" \/>\r\n  ) : (\r\n    <img src={volumeOn} alt=\"Volume is on\" \/>\r\n  )}\r\n<\/button><\/pre>\n
    You likely noticed a reference to an\u00a0onVolumeClick<\/code>\u00a0method above, so we\u2019ll need to add that to the\u00a0App<\/code>\u00a0class as well:<\/p>\n
    onVolumeClick = () => {\r\n  if (this.state.muted) {\r\n    this.audio.current.muted = false;\r\n  } else {\r\n    this.audio.current.muted = true;\r\n  }<\/pre>\n
      this.setState({ muted: !this.state.muted });\r\n}<\/pre>\n
    And some CSS to style the SVG icon button:<\/p>\n
    .volume {\r\n  background: transparent;\r\n  border: 0;\r\n  bottom: 10px;\r\n  cursor: pointer;\r\n  left: 10px;\r\n  position: absolute;\r\n  z-index: 1000;\r\n}<\/pre>\n
    .volume img {\r\n  height: 24px;\r\n}<\/pre>\n
    Lastly, we need to start playing the audio at a sychronized point in the GSAP animation, which is right as the intro animation completes and the logo animation starts. Luckily the object of animation properties that\u00a0.to()<\/code>accepts can contain an\u00a0onComplete<\/code>\u00a0method where we can trigger the audio to begin playing.<\/p>\n
    tl\r\n  .to(this.intro.current, 4.5, { opacity: 1, delay: 1 })\r\n  .to(this.intro.current, 1.5, {\r\n    opacity: 0,  \r\n    onComplete: () => { \r\n      this.audio.current.play();\r\n    } \/\/ Add this to autoplay the theme music\r\n  })\r\n  .set(this.logo.current, {\r\n    opacity: 1,\r\n    scale: 2.75,\r\n    delay: 0.5 \/\/ A slight delay here syncs better with the audio\r\n  })\r\n  .to(this.logo.current, 8, { scale: 0.05, ease: Power2.easeOut })\r\n  .to(this.logo.current, 1.5, { opacity: 0 }, \"-=1.5\")\r\n  .to(this.content.current, 200, { top: \"-170%\" })<\/pre>\n
    I found that adding a slight delay on the logo animation at this point helped sync up the opening note of the theme with the beginning of the animation, but you may want to play around with this a bit more.<\/p>\n
    Congrats on making it to the end!<\/p>\n
    At this point you hopefully have an idea of how easy it is to get started with GreenSock\u2014and we\u2019ve only scratched the surface of what it\u2019s capable of. Have fun making your own Star Wars-inspired crawls, and feel free to post any questions in the comment section below.<\/p>\n
     <\/p>\n
    Mandi Wise<\/a><\/h3>\n
    Program Director for Web & App Development at RED Academy<\/p>\n","protected":false},"excerpt":{"rendered":"
    Do you like Star Wars? Do you enjoy animating things in a web browser? So do I! I\u2019ve wanted to […]<\/p>\n","protected":false},"author":2,"featured_media":192,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[49,12,50,48,44,29,69],"tags":[],"class_list":["post-435","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-back-end","category-bloghassler-ec","category-css","category-front-end","category-javascript","category-programacion","category-react"],"_links":{"self":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/comments?post=435"}],"version-history":[{"count":1,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/435\/revisions"}],"predecessor-version":[{"id":436,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/posts\/435\/revisions\/436"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media\/192"}],"wp:attachment":[{"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/media?parent=435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/categories?post=435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hassler.ec\/wp\/wp-json\/wp\/v2\/tags?post=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}