{"id":75,"date":"2019-06-11T19:24:52","date_gmt":"2019-06-11T17:24:52","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/06\/11\/tutorial-%f0%9f%96%90%ef%b8%8f-how-to-add-lottie-animations-to-sketch2react\/"},"modified":"2020-06-18T07:26:59","modified_gmt":"2020-06-18T07:26:59","slug":"tutorial-%f0%9f%96%90%ef%b8%8f-how-to-add-lottie-animations-to-sketch2react","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/tutorial-%f0%9f%96%90%ef%b8%8f-how-to-add-lottie-animations-to-sketch2react\/","title":{"rendered":"Tutorial ?\ufe0f How to add Lottie Animations to Sketch2React"},"content":{"rendered":"

Lottie animations and Sketch files, together? Whaaaaat\u2026 Yup\u00a0?<\/h4>\n
\n


\n<\/figure>\n

Lottie is one of the most versatile animation formats out there and works about everywhere, be it web or app, iOS or Android, Lottie have you covered. It\u2019s become really popular, specially within app developers.<\/p>\n

From version 1.5 of Sketch2React you now can embed Lottie animations, the same way that you today embed Haiku animations within our framework.<\/p>\n

Another great thing about Lottie is that there\u2019s a huge amount of free resources, specially on Lottiefiles.com<\/a>.<\/p>\n

Why should I even\u00a0bother?<\/h3>\n

I always ask myself this very important question every day. Why? If you, like me, also dabble with motion design and animation, this should by now have you very, very excited. Only if you\u2019re a nerd like me ?<\/p>\n

You can, very quickly, create a simple Lottie Animation Showcase website straight from within Sketch. <\/strong>Export takes just seconds and you just need to drag+drop your files onto a server and you\u2019re done! If you\u2019re going for speed and efficiency, export as HTML, it\u2019s the best supported and quickest Sketch to code workflow we have.<\/p>\n

Don\u2019t feel like putting things on a server?<\/strong> Just share your\u00a0.sketch file and make sure the dude on the other end also has our code app v1.5 pre-release.<\/p>\n

\n

Important Thing\u00a01<\/h4>\n

As of this writing the only way of getting hold of v1.5 (pre-release) and the Lottie symbol is by either <\/em>purchasing it<\/em><\/a> or by being a patron of Fredrik & Juan on the highest tier. Version 1.5 will be released for free to the public later this summer.<\/em><\/p>\n

https:\/\/medium.com\/sketch2react\/sketch2react-dlc-1-is-here-4e8055568fab<\/a><\/p>\n

Important Thing\u00a02<\/h4>\n

Our Lottie Symbol is based on you needing to upload your Lottie Animations to <\/em>Lottiefiles.com<\/em><\/a>.<\/em><\/p>\n

\n
\n

Just look at all this motion\u200a\u2014\u200aall inside of\u00a0Sketch!<\/figcaption><\/figure>\n

Step 1\u200a\u2014\u200aCopy the Lottie Symbol from our\u00a0Template<\/h3>\n
\n

Our very handy Lottie Animations Template contains the symbol that you\u00a0need<\/figcaption><\/figure>\n
    \n
  1. Open up our Lottie Animations Template<\/strong>\u00a0.sketch file<\/li>\n
  2. Select one of the three provided template symbols and copy it to your own artboard\/document<\/li>\n
  3. \nImportant!<\/strong> Make sure you have a page called Symbols <\/strong>in your Sketch file or this will not work in our code app<\/li>\n<\/ol>\n

    Step 2\u200a\u2014\u200aGetting the Lottie Animation URL<\/h3>\n
    \n

    Easy peasy to get the\u00a0URL<\/figcaption><\/figure>\n

    This tutorial assumes that you already know how to upload Lottie\u00a0.json files to Lottiefiles.com<\/em><\/p><\/blockquote>\n

      \n
    1. If you have uploaded your own Lottie animation, go to your Dashboard<\/strong>, click the animation you want to embed, and copy the Lottie Animation URL to clipboard<\/li>\n<\/ol>\n

      Step 3\u200a\u2014\u200aPasting the Lottie Animation URL in\u00a0Sketch<\/h3>\n
      \n

      This is where the magic gets\u00a0done?<\/figcaption><\/figure>\n
        \n
      1. Go to your own artboard where you have our Lottie Animation symbol<\/li>\n
      2. Paste the Lottie Animation URL into the override that is called {attribute.animationSourceUrl}<\/em><\/strong>\n<\/li>\n
      3. Add a Preview image<\/strong>, presumably the first frame of your animation into {preview}\u200a\u2014\u200ait makes it way easier to see what animation you have embedded<\/li>\n
      4. Done! ??<\/li>\n<\/ol>\n

        I hate to read, give me video\u00a0sir<\/h3>\n