{"id":19977460,"url":"https://github.com/hypernym-studio/nuxt-gsap","last_synced_at":"2025-04-04T06:09:25.413Z","repository":{"id":46690659,"uuid":"309859661","full_name":"hypernym-studio/nuxt-gsap","owner":"hypernym-studio","description":"GSAP module for Nuxt.","archived":false,"fork":false,"pushed_at":"2024-08-27T10:56:28.000Z","size":918,"stargazers_count":307,"open_issues_count":0,"forks_count":13,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-03-28T05:11:46.240Z","etag":null,"topics":["greensock","gsap","gsap-module","javascript-animations","nuxt","nuxt-animations","nuxt-greensock","nuxt-gsap","nuxt-gsap-module","nuxt-module","page-transitions"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/hypernym-studio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/codeowners","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://revolut.me/ivodolenc","https://paypal.me/ivodolenc"]}},"created_at":"2020-11-04T02:22:45.000Z","updated_at":"2025-03-08T01:47:12.000Z","dependencies_parsed_at":"2022-08-12T13:00:50.965Z","dependency_job_id":"37bcbcae-72f9-4b6f-8f13-ddd8eeb1be51","html_url":"https://github.com/hypernym-studio/nuxt-gsap","commit_stats":null,"previous_names":["ivodolenc/nuxt-gsap-module"],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypernym-studio%2Fnuxt-gsap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypernym-studio%2Fnuxt-gsap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypernym-studio%2Fnuxt-gsap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hypernym-studio%2Fnuxt-gsap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hypernym-studio","download_url":"https://codeload.github.com/hypernym-studio/nuxt-gsap/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247128752,"owners_count":20888235,"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":["greensock","gsap","gsap-module","javascript-animations","nuxt","nuxt-animations","nuxt-greensock","nuxt-gsap","nuxt-gsap-module","nuxt-module","page-transitions"],"created_at":"2024-11-13T03:28:11.639Z","updated_at":"2025-04-04T06:09:25.393Z","avatar_url":"https://github.com/hypernym-studio.png","language":"TypeScript","funding_links":["https://revolut.me/ivodolenc","https://paypal.me/ivodolenc"],"categories":[],"sub_categories":[],"readme":"# Nuxt Gsap Module\n\nGSAP module for Nuxt.\n\n## Features\n\n- Helps you integrate the GSAP animation library\n- Provides a solution for global use\n- Supports custom composables\n- Automatically registers plugins after activation\n- Allows you to easily register global effects \u0026 eases\n- Supports Club GreenSock premium plugins\n- Zero-config setup ready to go\n- TypeScript friendly\n- Super easy to use\n\n## Quick Start\n\n1. Install `@hypernym/nuxt-gsap` to your project\n\n```sh\nnpm i -D @hypernym/nuxt-gsap\n```\n\n2. Enable the module in the main config file\n\n```ts\n// nuxt.config.ts\n\n{\n  modules: ['@hypernym/nuxt-gsap']\n}\n```\n\nThat's it!\n\n## Module\n\nThe module comes with a zero-config setup so after activation it automatically adds the GSAP core and it is globally available without additional settings.\n\n```html\n\u003c!-- layout.vue | page.vue | component.vue --\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1 class=\"title\"\u003eNuxt Gsap\u003c/h1\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  const { $gsap } = useNuxtApp()\n\n  onMounted(() =\u003e {\n    $gsap.to('.title', { rotation: 3, x: 100, duration: 1 })\n  })\n\u003c/script\u003e\n```\n\n## Options\n\nNuxt Gsap Module is completely rewritten in TypeScript. It also improves the development experience with detailed descriptions, examples and code auto-completion.\n\nAfter plugin activation, it is immediately available globally, so there is no need to manually import or register.\n\n```ts\n// nuxt.config.ts\n\n{\n  modules: ['@hypernym/nuxt-gsap'],\n\n  gsap: {\n    // Module options\n  }\n}\n```\n\n## GSAP Core\n\nIt can be used via a `provide` helper that will be available globally or via a custom `composable` that you can import where you need it.\n\n### Provide\n\nGSAP core is enabled by default on module activation.\n\n```ts\n// nuxt.config.ts\n\n{\n  modules: ['@hypernym/nuxt-gsap'],\n}\n```\n\n**Available globally**\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n  const { $gsap } = useNuxtApp()\n\n  onMounted(() =\u003e {\n    $gsap.to('.title', { rotation: 3, x: 100, duration: 1 })\n  })\n\u003c/script\u003e\n```\n\nTo disable the _provide_ helper completely, set it to `false`.\n\n```ts\n// nuxt.config.ts\n\n{\n  gsap: {\n    provide: false\n  }\n}\n```\n\n### Composable\n\nImports the main `gsap` core as custom composable.\n\nTo enable custom [_composables_](#composables), set it to `true`:\n\n```ts\n// nuxt.config.ts\n\n{\n  gsap: {\n    composables: true\n  }\n}\n```\n\n#### useGsap\n\n- Custom composable\n\n```html\n\u003c!-- layout.vue | page.vue | component.vue --\u003e\n\n\u003ctemplate\u003e\n  \u003ch1 class=\"title\"\u003eNuxt Gsap Module\u003c/h1\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  useGsap.to('.title', { rotation: 3, x: 100, duration: 1 })\n\u003c/script\u003e\n```\n\n```ts\n// Explicit import (optional)\nimport { useGsap } from '#gsap'\n```\n\n## Documentation\n\nCheck the official [docs](./docs) for more info.\n\n## Community\n\nFeel free to use the official [discussions](https://github.com/hypernym-studio/nuxt-gsap/discussions) for any additional questions.\n\n## License\n\n### Gsap Platform\n\nMore details about GSAP licenses can be found in the \u003ca href=\"https://github.com/greensock/GSAP#license\"\u003eofficial\u003c/a\u003e repository.\n\n### Nuxt Gsap Module\n\nDeveloped in 🇭🇷 Croatia\n\nReleased under the [MIT](LICENSE.txt) license.\n\n© Hypernym Studio\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypernym-studio%2Fnuxt-gsap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhypernym-studio%2Fnuxt-gsap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhypernym-studio%2Fnuxt-gsap/lists"}