{"id":100,"date":"2018-12-09T17:45:39","date_gmt":"2018-12-09T16:45:39","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2018\/12\/09\/css-animations-inside-of-sketch-with-sketch2react\/"},"modified":"2020-06-18T07:27:01","modified_gmt":"2020-06-18T07:27:01","slug":"css-animations-inside-of-sketch-with-sketch2react","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/css-animations-inside-of-sketch-with-sketch2react\/","title":{"rendered":"CSS Animations inside of Sketch with Sketch2React"},"content":{"rendered":"
\n


\n<\/figure>\n

Since the release of our Code App<\/strong><\/a> you now have the possibility to add custom CSS plugins<\/strong> that are stored locally on your computer.<\/p><\/blockquote>\n

This is, without doubt, the single most powerful addition<\/strong> (yet) to our framework since the very beginning. Why? Let me explain.<\/p>\n

With your own custom made CSS plugins<\/strong> you expand your Sketch design files with things that<\/p>\n

    \n
  1. \nWe haven\u2019t added yet<\/em> or<\/li>\n
  2. \nAre not even possible to do within our framework without thousands of hours of more work\u200a\u2014\u200aand who needs more work? Not us <\/em>?<\/li>\n<\/ol>\n

    Like CSS animations<\/a> for example. Or CSS effects.<\/p>\n

    \n

    All these CSS animations where made using Animate.css without even writing our own\u00a0CSS.<\/figcaption><\/figure>\n

    Simple Demo<\/a><\/h3>\n

    Click above to check out the power of using CSS plugins straight from inside of Sketch.<\/p>\n

    Create transitions between everything really<\/h3>\n

    With very simple code<\/strong> you can create really neat transitions between pages<\/strong>, animate elements, fade in whole blocks of content, create mock-up side menus<\/strong>, mega menus<\/strong>, modals. Sky is the limit.<\/em><\/p>\n

    Or CSS is the limit actually but you can do a lot of cool stuff that is well supported nowadays. Just check Can I Use<\/strong><\/a> from time to time to be sure.<\/p>\n

    Combine our method for Quick Responsive Prototyping<\/a> with this and you have yourself a very powerful (free) framework for HTML5 prototyping directly inside of Sketch. ????<\/p>\n

    \n

    Aaa you sweet sexy custom made\u00a0.css I\u2019m soooo proud of\u00a0you<\/figcaption><\/figure>\n

    Add, not subtract to your hand-off\u00a0workflow<\/h3>\n

    We see our framework as a compliment to all the excellent tools that are already out there. Keep using them, they are superb and we will never ever be able to compete with them. Heck we don\u2019t even want that!<\/em><\/strong><\/p>\n

    There is no number one solution to the \u201ctool problem\u201d. You as a designer, need an arsenal of tools and frameworks to do your job.<\/p>\n

    With Sketch2React<\/a> you actually work with code that your developers can just copy+paste onto their own. Got that transition juuuuuust<\/em> right after some tweaking in the CSS with things like timing, delays etc? No worries, just send them your custom.css file<\/strong> together with your Sketch2React prototype, in code or just send them your\u00a0.sketchfile, it\u2019s really up to you.<\/p>\n

    Boom! ? ?\u200d?<\/p>\n

    That is why we are soooo excited about this.<\/em><\/p>\n

    \n

    Lovely app this Espresso!<\/figcaption><\/figure>\n

    Preparations before we\u00a0start<\/h3>\n

    Consider using a more visual code editor like for example Espresso<\/a>. I love the gentle UI it has, it really is very visual and helpful. It\u2019s included in the amazing service Setapp.<\/p>\n

    Who loves visuals more than anyone? Designers of course! Another great editor for Mac is also Coda<\/a>.<\/p>\n

    Both apps have CSS overriding<\/strong> which is really great for users of Sketch2React since we don\u2019t support all of Bootstrap 4\u2019s components yet. Probably never will actually.<\/p>\n

    Get some basic code knowledge<\/h3>\n

    If you have a basic understanding of HTML and CSS, you will feel right at home. If not there are plenty of great free resources out there. If you happen to have a Pluralsight account they have several great ones about all these topics. One course I really like is called HTML5 Animations made Easy with Animate.css<\/strong><\/a> by Jeff Batt.<\/p>\n

    Let\u2019s look at a very short video\u00a0first!<\/h3>\n