{"id":25825736,"url":"https://github.com/waseemdev/ng-ionic-connectedanim","last_synced_at":"2025-02-28T14:45:47.348Z","repository":{"id":143896525,"uuid":"124652338","full_name":"waseemdev/ng-ionic-connectedanim","owner":"waseemdev","description":"Connected Animation (Shared Element Transition) for Ionic Framework.","archived":false,"fork":false,"pushed_at":"2018-10-27T10:55:32.000Z","size":10542,"stargazers_count":12,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-13T19:04:05.136Z","etag":null,"topics":["angular","animation","ionic","ionic2","transition"],"latest_commit_sha":null,"homepage":null,"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/waseemdev.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":"2018-03-10T12:10:58.000Z","updated_at":"2021-09-27T01:40:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"26a65df0-c3a9-4fce-b7f1-bc8217042802","html_url":"https://github.com/waseemdev/ng-ionic-connectedanim","commit_stats":{"total_commits":6,"total_committers":3,"mean_commits":2.0,"dds":0.5,"last_synced_commit":"9c51afabd7ba6cf8b14a774efce196a8ee296840"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waseemdev%2Fng-ionic-connectedanim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waseemdev%2Fng-ionic-connectedanim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waseemdev%2Fng-ionic-connectedanim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waseemdev%2Fng-ionic-connectedanim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/waseemdev","download_url":"https://codeload.github.com/waseemdev/ng-ionic-connectedanim/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240483747,"owners_count":19808634,"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":["angular","animation","ionic","ionic2","transition"],"created_at":"2025-02-28T14:45:45.659Z","updated_at":"2025-02-28T14:45:47.343Z","avatar_url":"https://github.com/waseemdev.png","language":"TypeScript","readme":"\n# Connected Animation for Ionic Framework\nEasily add Connected Animation (in UWP) or Shared Element Transition (in Android) to your elements.\n\n# Example Project\n[Here is an example](example)\n\n\n# Setup\n\n1. install via npm:\n```\nnpm i ng-ionic-connectedanim@latest --save\n```\n2. Import ConnectedAnimationModule in you module\n```typescript\nimport { ConnectedAnimationModule } from \"ng-ionic-connectedanim\";\n\n@NgModule({\n    imports: [\n        ConnectedAnimationModule.forRoot(),\n        ....\n    ]\n})\nexport class AppModule { }\n```\n\n\n# Usage\n## 1. Basic example. as easy as:\nIn Page1.html:\n```html\n\u003cimg [src]=\"image\" [animStart]=\"'animation-cover'\"\u003e\n\u003cbutton (click)=\"push()\"\u003ePush page2\u003c/button\u003e\n```\nPage1.ts:\n```javascript\n    push() {\n        this.navCtrl.push('Page2');\n    }\n```\n\nPage2.html:\n```html\n\u003cimg [src]=\"image\" [animEnd]=\"'animation-cover'\"\u003e\n```\n\n## 2. Multiple connected animation\nPage1.html:\n```html\n\u003cimg [src]=\"image\" [animStart]=\"'anim-image'\"\u003e\n\u003cp class=\"title\" [animStart]=\"'anim-title'\"\u003e\n\u003cbutton (click)=\"push()\"\u003ePush page2\u003c/button\u003e\n```\nPage1.ts:\n```javascript\n    push() {\n        this.navCtrl.push('Page2');\n    }\n```\nPage2.html:\n```html\n\u003cimg [src]=\"image\" [animEnd]=\"'anim-image'\"\u003e\n\u003cp class=\"title\" [animEnd]=\"'anim-title'\"\u003e\n```\n\n**Note:** If you want to use any element other than `img`, the `animStart` element and `animEnd` must be identical in font-*, width, height and text-align, otherwise the animation will not work well.\n\n![Example 1](uploads/preview1.gif)\n\n## 3. Multiple Items as 'animStart'\nWhen you have a list of items in the first page, it is important to pass the element index before navigate to the second page, so animation can be played correctly.\nAlso add `animItem` attribute to animated element.\n\nPage1.html:\n```html\n\u003cdiv *ngFor=\"let item of items; let i = index\" (click)=\"pushPage(i)\"\u003e\n    \u003cimg [src]=\"item.image\" [animStart]=\"'animation-image'\" animItem\u003e\n\u003c/div\u003e\n```\nPgae1.ts:\n```javascript\nimport {ConnectedAnimationService} from 'ng-ionic-connectedanim';\nexport class Page1 {\n    constructor(private navCtrl: NavController,\n                private connectedAnimationService: ConnectedAnimationService) {\n    }\n\n    pushPage(itemIndex) {\n        // pass item index\n        this.connectedAnimationService.setItemIndex(itemIndex, this);\n        // then push page2\n        this.navCtrl.push('Page2');\n    }\n}\n```\nPage2.html:\n```html\n\u003cimg [src]=\"image\" [animEnd]=\"'animation-image'\"\u003e\n```\n\n## 4. Manually play animation:\nThis is useful for elements in the same page.\nset autoFire to false in `animOptions`:\n```html\n\u003cimg [src]=\"image\" [animStart]=\"'animation1'\" [animOptions]=\"{ autoFire: false }\"\u003e\n\u003cbutton (click)=\"openModal()\"\u003eOpen\u003c/button\u003e\n\n\u003cdiv class=\"my-modal\"\u003e\n    \u003cimg [src]=\"image\" [animEnd]=\"'animation1'\"\u003e\n    \u003cbutton (click)=\"closeModal()\"\u003eClose\u003c/button\u003e\n\u003c/div\u003e\n```\n\n```javascript\nexport class Page {\n    constructor(private animationService: ConnectedAnimationService) {\n    }\n\n    openModal() {\n        // first show your modal \n        // Make sure its 'style.display' is not 'none' before playing animation.\n\n\n        //let itemIndex = 0; /* Send element index if you are using ngFor */\n        this.animationService.playAnimations(this/*, itemIndex*/);\n        // or play a specific animation by its name\n        //this.animationService.playAnimation('animation1'/*, itemIndex*/);\n    }\n\n    closeModal() {\n        this.animationService.playAnimationBack(this);\n        // then hide the modal...\n    }\n}\n```\n\n![Example 2](uploads/preview2.gif)\n\n# Options\nYou can pass animation options to `animStart' element.\n```html\n\u003cimg [animStart]=\"'animation1'\" [animOptions]=\"options\"\u003e\n```\n\n#### Options:\n| Option | Desc.   |\n| ------ | ------- |\n| autoFire | Set autoFire to false to manually play the animation by calling animationService.playAnimation(), default is true. |\n| type | Animation type, e.g.: 'ease', 'ease-in'... |\n| delay | Animation delay. |\n| duration | Animation duration. |\n| targetRect | Target element ('animEnd' element) position or offset. |\n\n\u003cbr\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaseemdev%2Fng-ionic-connectedanim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwaseemdev%2Fng-ionic-connectedanim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaseemdev%2Fng-ionic-connectedanim/lists"}