{"id":22381168,"url":"https://github.com/ex-machine/ng-magics","last_synced_at":"2025-07-29T05:04:03.788Z","repository":{"id":58234952,"uuid":"51317862","full_name":"ex-machine/ng-magics","owner":"ex-machine","description":"AngularJS companion module for ScrollMagic","archived":false,"fork":false,"pushed_at":"2016-03-17T14:49:37.000Z","size":65,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-11T07:17:16.643Z","etag":null,"topics":[],"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/ex-machine.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}},"created_at":"2016-02-08T18:39:55.000Z","updated_at":"2020-12-16T10:30:52.000Z","dependencies_parsed_at":"2022-08-31T09:21:53.530Z","dependency_job_id":null,"html_url":"https://github.com/ex-machine/ng-magics","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ex-machine/ng-magics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ex-machine%2Fng-magics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ex-machine%2Fng-magics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ex-machine%2Fng-magics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ex-machine%2Fng-magics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ex-machine","download_url":"https://codeload.github.com/ex-machine/ng-magics/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ex-machine%2Fng-magics/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267632858,"owners_count":24118748,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-05T00:07:39.977Z","updated_at":"2025-07-29T05:04:03.769Z","avatar_url":"https://github.com/ex-machine.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng-magics\r\n\r\n*ng-magics* (full name: *ng-magics-crawl*) is Angular 1.x companion for ScrollMagic, a de facto JavaScript tool for top grade scrolling animation.\r\n\r\n[![Build Status](https://travis-ci.org/ex-machine/ng-magics.svg?branch=master)](https://travis-ci.org/ex-machine/ng-magics)\r\n\r\n# Description\r\n\r\nThe module introduces several Angular directives and services to do scrolling sorcery in Angular-friendly, declarative way:\r\n\r\n```\r\n\u003cdiv ng-class=\"{ activeClass: isActive }\u003e{{ isActive ? 'active' : '' }}\u003c/div\u003e\r\n\u003cdiv magics-scene magics-spy=\"isActive\" magics-spy-progress=\"progressHandler\"\u003e{{ progress }}\u003c/div\u003e\r\n```\r\n\r\n```javascript\r\n// may use built-in `debounce` or `throttle` services for best performance \r\n$scope.progressHandler = throttle((e) =\u003e {\r\n\t$scope.progress = Math.round(e.progress * 100) + '%';\r\n\t$scope.$apply();\r\n}, 100);\r\n```\r\nInstead of jQuery-fashioned, harder to maintain code:\r\n\r\n```javascript\r\nvar scene = new ScrollMagic.Scene({\r\n\ttriggerElement: '#element',\r\n\t// manually calculated number\r\n\t// or a function that calculates it from responsive elements\r\n\tduration: 100  \r\n})\r\n\t.setClassToggle('#anotherElement', 'activeClass')\r\n\t.on('enter leave', (e) =\u003e {\r\n\t\t$('#anotherElement').text(e.type == 'enter' ? 'active' : ''); \r\n\t})\r\n\t.on('progress', (e) =\u003e {\r\n\t\t$('#element').text(Math.round(e.progress * 100) + '%'); \r\n\t});\r\n\r\nnew ScrollMagic.Controller()\r\n\t.addscene(scene);\r\n```\r\n\r\nEven if the full power of ScrollMagic is demanded for some serious black arts, ScrollMagic API is available through Angular services.\r\n\r\n## Glossary\r\n\r\n### Stage\r\n\r\nThe stage behind the sequence of scenes which does no actions and holds no logic. Known as [*controller* in *ScrollMagic*](http://scrollmagic.io/docs/ScrollMagic.Controller.html) but renamed to *stage* in *ng-magics* to match its role better and avoid confusion with Angular controllers (it even asked for that in person).\r\n\r\nIt defines root element for the act (any container, but, more frequently, `window`) and the axis of scrolling. All the relevant scenes are attached to it, the controller also defines default settings for them.\r\n\r\nThe stage holds global information (current position, direction, container) about the stage. There's not much to say about it besides that.\r\n\r\n### Scene\r\n\r\nThe place where the magic happens [in ScrollMagic](http://scrollmagic.io/docs/ScrollMagic.Scene.html). The scene triggers events on its beginning, continuation and finale, any sort of change (likely visual) can be caused by them.\r\n\r\n*ScrollMagic* doesn't perform any visual effects by itself, they have to be implemented by either CSS3 classes or third-party animation library (*TweenMax* or *TweenLite*).\r\n\r\nA scene may be some abstract start point and have no end, but *ng-magics* `magics-scene` directive limits the scene to the bounds of specific DOM element.\r\n\r\n### Pin\t\r\n\r\nFixes the element in viewport during the current scene, until it is unpinned manually, or the scene is over. While *ScrollMagic* can pin an arbitrary element, *ng-magics* `magics-pin` directive is supposed to pin only scene's children.\r\n\r\n### Spy\r\n\r\nThe concept of scene spies is specific to *ng-magics*. A spy directive, `magics-spy` binds scope properties to the events ('enter', 'leave' and 'progress') of the relevant scene.\r\n\r\n# Prerequisites\r\n\r\nThe module depends on *ScrollMagic* (`ScrollMagic` global) and its [*GSAP*](http://scrollmagic.io/docs/animation.GSAP.html) and [*addIndicators*](http://scrollmagic.io/docs/debug.addIndicators.html) (for enabled `magicsProvider.debug`) plugins that should be loaded before the application is bootstrapped.\r\n\r\nIt also depends on GreenSock *TweenMax* or *TweenLite* libraries  (`TweenMax` or `TweenLite` global) and their [ScrollToPlugin](https://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/) plugin for ScrollMagic animations, one of the libraries should be loaded before ScrollMagic.\r\n\r\n# API\r\n\r\n\n\n##magicsScene\n\nCreates a new scene or reuses the existing one\non either the stage specified by `magicsStage` directive or 'default' stage.\n\n###Directive Info\n\n###Usage\n\n* as attribute:\n    ```\n    \u003cANY\n      [magics-scene=\"string\"]\n      [magics-scene-options=\"Object\"]\u003e\n    ...\n    \u003c/ANY\u003e\n    ```\n\n####Arguments\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| magicsScene\u003cbr\u003e*(optional)* | string | \u003cp\u003eScene name.\u003c/p\u003e  |\n| magicsSceneOptions\u003cbr\u003e*(optional)* | Object | \u003cp\u003eOptions that are used on scene creation.\u003c/p\u003e  |\n\n##magicsSpy\n\nSets up a spy for the scene specified\n by either parent `magicsScene` directive or `magicsSpyScene` attribute.\n\n###Directive Info\n\n###Usage\n\n* as attribute:\n    ```\n    \u003cANY\n      [magics-spy=\"expression\"]\n      [magics-spy-scene=\"string\"]\n      [magics-spy-progress=\"expression\"]\u003e\n    ...\n    \u003c/ANY\u003e\n    ```\n\n####Arguments\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| magicsSpy\u003cbr\u003e*(optional)* | expression | \u003cp\u003eScope variable flag \u003cem\u003e(read-only)\u003c/em\u003e.\u003c/p\u003e  |\n| magicsSpyScene\u003cbr\u003e*(optional)* | string | \u003cp\u003eScene name.\u003c/p\u003e  |\n| magicsSpyProgress\u003cbr\u003e*(optional)* | expression | \u003cp\u003eScene progress callback function.\u003c/p\u003e  |\n\n##magicsStage\n\nCreates a new stage or reuses the existing one.\n\n###Directive Info\n\n###Usage\n\n* as attribute:\n    ```\n    \u003cANY\n      [magics-stage=\"string\"]\n      [magics-stage-options=\"Object\"]\u003e\n    ...\n    \u003c/ANY\u003e\n    ```\n\n####Arguments\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| magicsStage\u003cbr\u003e*(optional)* | string | \u003cp\u003eStage name.\u003c/p\u003e  |\n| magicsStageOptions\u003cbr\u003e*(optional)* | Object | \u003cp\u003eOptions that have to be passed  to \u003ccode\u003emagics.stage\u003c/code\u003e.\u003c/p\u003e  |\n\n\r\n\r\n# Example\r\n\r\n[A demo is available](https://embed.plnkr.co/Y0IaNluA9fYFKAGQmMhT/), it briefly depicts the features and the concepts behind the module.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fex-machine%2Fng-magics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fex-machine%2Fng-magics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fex-machine%2Fng-magics/lists"}