18 amazing 🤩 GitHub repositories that will help you 🪄 make a Beautiful Project
Tags: webdev, github, javascript, beginners
Published: 2021-09-03 20:31:32

<h1>Introduction</h1>
Today I would like to give examples of good GitHub repositories that will help you implement complex animations, as well as useful functions in your projects.

So let's get started

<h1>1. Lottie-Web/Bodymovin</h1>
{% github airbnb/lottie-web %}

I want to start with my favorite repository. With this library, you can export the animation you created from `Adobe After Effects` directly to your `website`.

<strong>Examples:</strong>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ab9lw773gbkzx8fd1h3b.gif)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/od5sa1hhenf3tebzxf1e.gif)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3tejdtk8maoiwv17gvao.gif)

<h1>2. Parallax.js</h1>
{% github wagerfield/parallax %}

With this library, you can create a beautiful parallax effect that you can control with the mouse movement. You can also adjust the speed of moving objects.

![Alt Text](https://media.giphy.com/media/Wmv1XOIvePuc3qO0Cb/giphy.gif)

<h1>3. Flat Surface Shader [FSS]</h1>
{% github wagerfield/flat-surface-shader %}

![Alt Text](https://media.giphy.com/media/40PrJABm6oBD2neqbG/giphy.gif?cid=790b76119f62e40cd0c934d412fc4929c9a71e79e649acbf&rid=giphy.gif&ct=g)

<h1>4. Hover.css</h1>
{% github IanLunn/Hover %}

<h1>5. Video.js Markers</h1>
{% github spchuang/videojs-markers %}

With this plugin, you can place the necessary marks on the video that is present on your site, so that you can easily switch to the time codes you need.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ths63oa1tpsxgn25a20.png)

<h1>6. Magic Grid</h1>
{% github e-oj/Magic-Grid %}

This library will help you create an adaptive grid, where you do not have to create separate `@media styles`. Just specify the container and that's it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2f9l8iqohheixpi5hl8d.gif)

<h1>7. Vue/React Content Loader</h1>
{% github egoist/vue-content-loader %}

> SVG component to create placeholder loading, like Facebook cards loading.

![Alt Text](https://media.giphy.com/media/EzDts3uOGLkzqB6JMd/giphy.gif?cid=790b7611babc983ffdf784eefb5f8ffd3b26eddc3d9011e0&rid=giphy.gif&ct=g)

<strong>Version for `React.js`:</strong>
{% github danilowoz/react-content-loader %}

<h1>8. React Image Gallery</h1>
{% github xiaolin/react-image-gallery %}

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbx76t756fw1ct3g00er.gif)

<h1>9. WebSlides</h1>
{% github webslides/WebSlides %}

![Alt Text](https://media.giphy.com/media/ZtqYdOuCxPsAHWUyyv/giphy.gif?cid=790b76110e13186bab19f9adf313e1d4b3d5f8ca34ba6e62&rid=giphy.gif&ct=g)

<h1>10. SVG.js</h1>
{% github svgdotjs/svg.js %}

<strong>Open Result</strong>
{% jsfiddle https://jsfiddle.net/Fuzzy/f2wbgx5a/ %}

<h1>11. React Motion</h1>
{% github chenglou/react-motion %}

> <h1>What does this library try to solve?</h1>
> For 95% of use-cases of animating components, we don't have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for your UI element, and let the magic of physics take care of the rest. This way, you don't have to worry about petty situations such as interrupted animation behavior. It also greatly simplifies the API.

<strong>Examples:</strong>
![Alt Text](https://media.giphy.com/media/5UFoMZysidoVnERZQI/giphy.gif?cid=790b76116ad776fcb8c42b1634d2baa5527c18973e6d69f6&rid=giphy.gif&ct=g)
![Alt Text](https://media.giphy.com/media/J7i7arvCqD2odP2jn7/giphy.gif?cid=790b7611b88b5b8670057396ed9d257100de01c7066015c2&rid=giphy.gif&ct=g)
![Alt Text](https://media.giphy.com/media/Pbb6RK6yFezhCo71zo/giphy.gif?cid=790b76117a7d69fb498be4839971ae3d68b6ae552d487312&rid=giphy.gif&ct=g)

<h1>12. RELLAX</h1>
{% github dixonandmoe/rellax %}

![Alt Text](https://media.giphy.com/media/QuE2jqcQ2aiUvZluXx/giphy.gif?cid=790b7611a4457fa52ccbdab26f75ae5d94e16e6f642669bc&rid=giphy.gif&ct=g)

<h1>13. Dynamics.js</h1>
{% github michaelvillar/dynamics.js %}

![Alt Text](https://media.giphy.com/media/FX1skO126IairT4Ioz/giphy.gif?cid=790b761199db9ca8a999651e8e0fa58cd75e2b3ee45aa90b&rid=giphy.gif&ct=g)

<h1>14. mo · js</h1>
{% github mojs/mojs %}

> The library provides built-in components to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way

{% codepen https://codepen.io/sol0mka/pen/ogOYJj %}
<strong>Click on any circle</strong>
{% codepen https://codepen.io/sol0mka/pen/yNOage %}
{% codepen https://codepen.io/sol0mka/pen/pEagoL %}

<h1>15. Reveal.js</h1>
{% github hakimel/reveal.js %}

![Alt Text](https://media.giphy.com/media/clPn37Z1Ij7iBrTsvg/giphy.gif?cid=790b76115eae8065ec2f824fa26cd69c8e4d1079ebb67bcd&rid=giphy.gif&ct=g)

<h1>16. Animsition</h1>
{% github blivesta/animsition %}

![Alt Text](https://media.giphy.com/media/UOPBUJCEQtRWgoCeIk/giphy.gif?cid=790b761178178021345b7f33f5f12441c337a8cc4e0829af&rid=giphy.gif&ct=g)

<h1>17. SVG Mesh 3d</h1>
{% github mattdesl/svg-mesh-3d %}

> A high-level module to convert a SVG <path> string into a 3D triangulated mesh. Best suited for silhouettes, like font icon SVGs.

![Alt Text](https://media.giphy.com/media/hllL76HZIEhs7Ir8Gc/giphy.gif?cid=790b7611685f483dab7673770057e400f0ae3a1a52d85c5d&rid=giphy.gif&ct=g)

<h1>18. Zdog</h1>
{% github metafizzy/zdog %}

With this library, you can create pseudo-3d elements, while you do not need to know geometry or algebra to create geometric shapes. This library is very easy to learn and learning will not take you much time.

![Alt Text](https://media.giphy.com/media/WUA2gPXAS9Jewk8vql/giphy.gif?cid=790b76115df6beadd5c63c20018a5b35eeceba16bf1a3e66&rid=giphy.gif&ct=g)

<strong>You can drag it</strong>
{% codepen https://codepen.io/desandro/pen/vdwMyW %}
{% codepen https://codepen.io/desandro/pen/YebMXQ %}
{% codepen https://codepen.io/chenxinnn/pen/Xwowxz %}
{% codepen https://codepen.io/gabriellewee/pen/JjNGvJd %}

<h1>The End</h1>
Thank you for taking your time to my post. You can also recommend the GitHub repositories you use. Or suggest a better alternative to the repositories that are presented in this post.

I also advise novice frontend programmers not to try to implement some complex task on their own, but it is better to use a ready-made solution so as not to generate a lot of problems in their own and third-party projects.

<strong>No need to re-invent the wheel.</strong>
![Alt Text](https://media.giphy.com/media/FVAvmLbptzZpC/giphy.gif?cid=ecf05e47f7vzwma5yq2wmr20jeteoy2xzokzzrpy47cm52zz&rid=giphy.gif&ct=g)

I can advise you to subscribe to my <a href="https://twitter.com/BelichenkoRoden"><strong>Twitter</strong></a>, I also post my works there.