{"id":24775236,"url":"https://github.com/9itish/grad-motion","last_synced_at":"2025-03-23T23:45:59.469Z","repository":{"id":259655696,"uuid":"851908741","full_name":"9itish/grad-motion","owner":"9itish","description":"Awesome JavaScript library for creating, animating, and manipulating CSS gradients and background patterns with ease.","archived":false,"fork":false,"pushed_at":"2025-01-25T13:03:42.000Z","size":33677,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-25T14:18:05.103Z","etag":null,"topics":["animated-gradient","animation","background-pattern","css","css-backgrounds","css-gradients","gradient","gradient-animation","gradient-background","gradient-patterns","javascript","javascript-library","linear-gradients","repeating-gradients"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/9itish.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-03T22:31:20.000Z","updated_at":"2025-01-25T13:03:45.000Z","dependencies_parsed_at":"2025-01-25T14:28:08.239Z","dependency_job_id":null,"html_url":"https://github.com/9itish/grad-motion","commit_stats":null,"previous_names":["9itish/neat-animated-gradients","9itish/grad-motion"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9itish%2Fgrad-motion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9itish%2Fgrad-motion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9itish%2Fgrad-motion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9itish%2Fgrad-motion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/9itish","download_url":"https://codeload.github.com/9itish/grad-motion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245186928,"owners_count":20574554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated-gradient","animation","background-pattern","css","css-backgrounds","css-gradients","gradient","gradient-animation","gradient-background","gradient-patterns","javascript","javascript-library","linear-gradients","repeating-gradients"],"created_at":"2025-01-29T06:53:21.817Z","updated_at":"2025-03-23T23:45:59.432Z","avatar_url":"https://github.com/9itish.png","language":"JavaScript","readme":"# Why did I Create `GradMotion`?\n\nWe can create some interesting patterns for backgrounds using CSS gradients.\n\nI got the idea for animating and manipulating these gradient patterns through JavaScript when I stumbled upon [Granim.js](https://github.com/sarcadass/granim.js).\n\nThere are no other JavaScript libraries that did exactly what I wanted to do. Therefore, I set out to create one myself.\n\nDeveloping this library also gave me the opportunity to improve my Object Oriented Programming skills.\n\n## Installation\n\nYou can directly load Colorful on your webpage using the following HTML:\n\n```\n\u003cscript src=\"path/to/grad-motion.js\"\u003e\u003c/script\u003e\n```\n\nHelper CSS to move the gradient patterns in different directions is in the `style.css` file. So, you might want to load that as well. \n\n## Animated Linear Gradients\n\nYou can create animated gradients with the `GradMotion.Linear` class to mimic Granim's functionality.\n\n![Animated Linear Gradients](resources/linear-output.gif)\n\nHere is a basic example:\n\n```javascript\nlet gradientObject =  new GradMotion.Linear({\n    element: boxElems[0],\n    colors: ['#8063f7', '#d9f764', '#f78164', '#64f781'],\n    styleOptions: {\n        angle: 90\n    },\n    classes: 'nbg-move-lr'\n});\n\ngradientObject.animateGradient();\n```\n\nThe `GradMotion.Linear` class allows you to create animated linear gradients at any angle and with as many as six colors.\n\nYou can configure `styleOptions` to create smooth transition of colors between two different linear gradients. Take a look at the fifth block in the above image for an example.\n\n### Animated Abstract Gradients\n\nSometimes, you might want to use more complex backgrounds without necessarily creating common recognizable patterns. The `GradMotion.Abstract` class can help you here.\n\n![Animated Abstract Gradients](resources/abstract-output.gif)\n\nHere is a basic example:\n\n```javascript\nlet gradientObject =  new GradMotion.Abstract({\n    element: boxElems[0],\n    colors: ['#fc0356', '#03fca9', '#56fc03', '#0356fc'],\n    classes: 'nbg-move-tb'\n});\n\ngradientObject.animateGradient();\n```\n\n### Animated ZigZag Patterns\n\nThe ZigZag pattern is pretty common and looks great if you choose the right colors. You can create such patterns with ease using the `GradMotion.ZigZag` class.\n\n![Animated ZigZag Patterns](resources/zigzag-output.gif)\n\nAll these patterns were created using the same `GradMotion.ZigZag` class by tweaking the values for the `styleOptions` object.\n\nHere is a basic example:\n\n```javascript\nlet gradientObject =  new GradMotion.ZigZag({\n    element: boxElems[0],\n    colors: ['#b00659', '#8e0547'],\n    styleOptions: {\n        bandWidth: 5,\n        variant: 'uneven'\n    },\n    classes: 'nbg-move-bt'\n});\n\ngradientObject.animateGradient();\n```\n\n### Animated Polka Dot Patterns\n\nPolka Dot patterns are also very popular as backgrounds. You can create, manipulate, and animate them easily using the `GradMotion.PolkaDots` class.\n\n![Animated Polka Dot Patterns](resources/polka-dots-output.gif)\n\nHere is the code to create the pattern in the third block:\n\n```javascript\nlet gradientObject =  new GradMotion.PolkaDots({\n    element: boxElems[0],\n    colors: ['#b35e51', '#b351a6'],\n    styleOptions: {\n        bgPosMultipliers: [0, 0, 0, -0.5],\n        radii: [30, 60], \n        rings: true,\n        baseSize: 80\n    },\n    classes: 'nbg-move-bt'\n});\n\ngradientObject.animateGradient();\n```\n\n### Animated UpDownTriangle Patterns\n\nYou can use the `GradMotion.UpDownTriangles` class to create animated gradient patterns where half the triangles are facing up and the other half are facing down.\n\n![Animated UpDownTriangle Patterns](resources/up-down-output.gif)\n\nHere is the code to create the animation in the third block:\n\n```javascript\nlet gradientObject =  new GradMotion.UpDownTriangles({\n    element: boxElems[0],\n    colors: ['#b5359c', '#912a7d'],\n    styleOptions: {\n        baseSize: 60,\n        variant: 'opposite-stripes'\n    },\n    classes: 'nbg-move-rl'\n});\n\ngradientObject.animateGradient();\n```\n\n### Animated Brick Patterns\n\nYou can also create gradient patterns that look like a brick wall using the `GradMotion.Bricks` class.\n\n![Animated Brick Patterns](resources/bricks-output.gif)\n\nThe following code will create the animation in the first block for you.\n\n```javascript\nlet gradientObject =  new GradMotion.Bricks({\n    element: boxElems[0],\n    colors: ['#d05e0b', '#a74b09'],\n    classes: 'nbg-move-tb'\n});\n\ngradientObject.animateGradient();\n```\n\n## Manipulating Gradients\n\nYou can update the colors that make up the gradient pattern by updating the value for the `colors` property like this.\n\n```javascript\ngradientObject.colors = ['#b8f475', '#97ee33'];\n```\n\nHelper classes like `nbg-move-tb`, `nbg-move-lr`, `nbg-move-rl`, and `nbg-move-bt` use CSS keyframe animation to move the gradient in a certain direction.\n\nYou can control how fast the pattern moves by setting the animation duration like this:\n\n```javascript\ngradientObject.animationDuration = 60;\n```\n\nYou can also tweak all the values in the `styleOptions` object and see the changes immediately.\n\nSome components of a gradient pattern use CSS variables to animate. You can control the speed of such animations by setting a value for the `tickSpeed` property.\n\n## To Do List\n\n1. Create a detailed documentation.\n2. Add more gradient patterns.\n3. Make the `GradMotion.Linear` gradients more flexible.\n\nIf you have any other suggestions, I would be glad to hear them.\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9itish%2Fgrad-motion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F9itish%2Fgrad-motion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9itish%2Fgrad-motion/lists"}