{"id":29093,"date":"2017-02-02T21:01:56","date_gmt":"2017-02-02T13:01:56","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29093"},"modified":"2018-04-09T16:46:38","modified_gmt":"2018-04-09T08:46:38","slug":"granim","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/granim\/","title":{"rendered":"Create Beautiful Gradient Transitions with Granim.js"},"content":{"rendered":"

Web design is full of beauty and pleasing interface design. Some features are functional while others are just for show. Gradient transitions<\/strong> are solely for show<\/strong> but they pack quite a punch!<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tUnderstanding CSS3 Circular and Elliptical Gradients<\/a>\n\t\t\t\t<\/p>\n

With Granim.js<\/a><\/strong>, you can build custom full-color gradient transitions<\/strong> that look smooth and mesh nicely with any website.<\/p>\n

You can find a bunch of custom examples<\/strong> on the main examples page<\/a> with many different styles from simple transitions to more complex animations using background images.<\/p>\n

Granim is the only JS library I know tackling gradient transitions<\/strong>. This is a question I\u2019ve always wondered about<\/a> and never really found a great answer. Granim is the perfect solution and it\u2019s built on vanilla JavaScript<\/strong>, so it can run alongside jQuery or any other JS library.<\/p>\n

Just drop the granim.js<\/code> file into your page<\/strong> to get started. You can either download a copy from GitHub<\/a> or host one from a live CDN<\/a>.<\/p>\n

Here\u2019s a basic code sample<\/strong> from the GitHub repo:<\/p>\n

\r\n<!-- Create a canvas element -->\r\n<canvas id=\"granim-canvas\"><\/canvas>\r\n<!-- Create a Granim instance -->\r\n<script>\r\nvar granimInstance = new Granim({\r\n   element: '#granim-canvas',\r\n   name: 'granim',\r\n   opacity: [1, 1],\r\n   states : {\r\n       \"default-state\": {\r\n           gradients: [\r\n               ['#834D9B', '#D04ED6'],\r\n               ['#1CD8D2', '#93EDC7']\r\n           ]\r\n       }\r\n   }\r\n});\r\n<\/script><\/pre>\n
Things can get a lot more complicated than this so you really should dig into the examples<\/strong> to learn more. You\u2019ll find code snippets under each example<\/strong> so you can create gradient transitions<\/strong> for image backgrounds and even image masks.<\/p>\n
The image masks can be used for a logo, for instance a PNG image, which gets hidden behind a gradient. This lets you create a JS-animated logo<\/strong> where the gradient slowly transitions throughout the text<\/strong>.<\/p>\n
\"granim<\/a><\/figure>\n
Note this example takes a lot<\/em> of JS\/CSS code<\/strong> so it\u2019s not a simple implementation.<\/p>\n
But the more you practice with Granim the easier it\u2019ll be to setup and customize. And with this being the only true gradient transition library online it\u2019s the absolute best solution for any project.<\/p>\n
The library is still updated semi-frequently so you can check the issues tab<\/a> for more info.<\/p>\n
It\u2019s a pretty small library<\/strong> so there aren\u2019t too many things to go wrong or need updating. This is what makes Granim.js a reliable solution for any site small or large.<\/p>\n
To download a copy<\/strong> visit the releases page<\/a> on GitHub or grab a copy of the .js<\/code> file directly from cdnjs<\/a>. And to view the source on a live example<\/strong> take a peek at this CodePen demo<\/a> created by Jonathan Schneider.<\/p>\n