{"id":14964088,"url":"https://github.com/jhavrick/phaser3-transitions","last_synced_at":"2025-09-30T19:30:48.369Z","repository":{"id":205875450,"uuid":"147578165","full_name":"JHAvrick/phaser3-transitions","owner":"JHAvrick","description":"A Phaser 3 plugin for smooth UI enter/exit transitions.","archived":false,"fork":false,"pushed_at":"2020-02-23T22:58:39.000Z","size":1061,"stargazers_count":13,"open_issues_count":1,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-07T05:05:35.879Z","etag":null,"topics":["javascript","phaser","phaser3","phaserjs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JHAvrick.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-09-05T20:52:55.000Z","updated_at":"2025-01-03T21:48:36.000Z","dependencies_parsed_at":"2023-11-07T03:47:19.857Z","dependency_job_id":null,"html_url":"https://github.com/JHAvrick/phaser3-transitions","commit_stats":null,"previous_names":["jhavrick/phaser3-transitions"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JHAvrick/phaser3-transitions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHAvrick%2Fphaser3-transitions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHAvrick%2Fphaser3-transitions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHAvrick%2Fphaser3-transitions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHAvrick%2Fphaser3-transitions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JHAvrick","download_url":"https://codeload.github.com/JHAvrick/phaser3-transitions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JHAvrick%2Fphaser3-transitions/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277746955,"owners_count":25870057,"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-09-30T02:00:09.208Z","response_time":75,"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":["javascript","phaser","phaser3","phaserjs"],"created_at":"2024-09-24T13:32:33.949Z","updated_at":"2025-09-30T19:30:47.976Z","avatar_url":"https://github.com/JHAvrick.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# phaser3-transitions\n\nA UI transitions plugin for Phaser 3. This plugin essentialy provides a simple wrapper for some complex tweens that move UI components into and out of the scene. Each transition can also be used declaratively if you prefer not to pollute your scene with excessive plugins. \n\n- [Features](#feature)\n- [Install and Setup](#install) \n- [Examples](#examples)\n- [Plugin API](#pluginapi)\n- [Transition Classes](#transitions-classses)\n\t- [BaseTransition](#base-transition)\n\t- [FadeTransition](#fade-transition)\n\t- [SlideTransition](#slide-transition)\n\t- [GrowTransition](#grow-transition)\n\t- [ExplodeTransition](#explode-transition)\n\t- [SlideFadeTransition](#slidefade-transition)\n- [Using Declaratively](#using-declaratively)\n- [Custom Transitions](#custom-transitions)\n\n\u003ca name=\"features\"\u003e\u003c/a\u003e\n### Features\n- Smooth transitions for moving UI components on and off the screen\n- Simple config options for light customization\n- Abstracts away repetitive and/or complex tweens\n- Easily extensible via the `BaseTransition` class\n\n\u003ca name=\"install\"\u003e\u003c/a\u003e\n### Install\n`npm install --save phaser3-transitions`\n\n\u003ca name=\"setup\"\u003e\u003c/a\u003e\n### Setup\n\n```javascript\nimport Phaser from 'phaser';\nimport TransitionsPlugin from 'phaser3-transitions';\n\nconst gameConfig = {\n    type: Phaser.WEBGL,\n    parent: 'game-container',\n    width: 400,\n    height: 600,\n    scene: [\n        Preload,\n        DemoScene\n    ],\n    plugins: {\n        scene: [\n            { \n                key: 'transitions', \n                mapping: 'transitions',\n                plugin: TransitionsPlugin\n            }\n        ]\n    },\n};\n\nconst game = new Phaser.Game(gameConfig);\n\n```\n\n\u003ca name=\"examples\"\u003e\u003c/a\u003e\n### Examples\n---\nSlide in from the left, slide out to the bottom.\n```javascript\nimport TransitionsPlugin 'phaser3-transitions';\n\n//In your create() function\nfunction create(){\n\t\n    //The transition will return the sprites to their original positions\n    let sprite1 = this.add.sprite(100, 100, 'menuItem');\n    let sprite2 = this.add.sprite(100, 200, 'menuItem');\n    let sprite3 = this.add.sprite(100, 300, 'menuItem');\n\tlet sprites = [sprite1, sprite2, sprite3]; //etc.\n    \n    let config = {\n    \ttype: 'slide',\n        duration: 500,\n   \t\tenterFrom: 'left',\n        exitTo: 'bottom'\n    }\n\n\tlet slide = this.transitions.create(sprites, config);\n    \n    //This will slide all the objects in and then immediately exit\n   \tslide.enter().then(() =\u003e {\n    \tslide.exit();\n    });\n    \n}\n```\n---\nFade into place, fade AND slide out to the top.\n```javascript\nimport TransitionsPlugin 'phaser3-transitions';\n\n//In your create() function\nfunction create(){\n\t\n    //The transition will return the sprites to their original positions\n    let sprite1 = this.add.sprite(100, 100, 'menuItem');\n    let sprite2 = this.add.sprite(100, 200, 'menuItem');\n    let sprite3 = this.add.sprite(100, 300, 'menuItem');\n\tlet sprites = [sprite1, sprite2, sprite3]; //etc.\n    \n    let enterConfig = {\n    \ttype: 'Fade', //not case sensitive\n    }\n    \n    let exitConfig = {\n    \ttype: 'FadeSlide',\n        exitTo: 'top'\n    }\n\n\tlet enterTransitions = this.transitions.create(sprites, enterConfig);\n    let exitTransition = this.transitions.create(sprites, exitConfig);\n    \n    //This will fade all the objects in and then immediately exit\n   \tenterTransition.enter().then(() =\u003e {\n    \texitTransition.exit();\n    });\n    \n}\n```\n\u003ca name=\"pluginapi\"\u003e\u003c/a\u003e\n## Plugin API\n\n### TransitionsPlugin\n\nThe TransitionsPlugin is a factory class which creates transitions for you. Each transition extends the `BaseTransition` class and is essentially a wrapper over top of a (sometimes) complex tween. This plugin also has some ease-of-use methods for quick transitions when your transition are simple.\n* Methods:\n    * [register(key, transitionClass)](#TransitionsPlugin+register)\n    * [create(targets, config)](#TransitionsPlugin+create) ⇒ \u003ccode\u003eBaseTransition\u003c/code\u003e\n    * [enter(targets, config)](#TransitionsPlugin+enter) ⇒ \u003ccode\u003ePromise\u003c/code\u003e\n    * [exit(targets, config)](#TransitionsPlugin+exit) ⇒ \u003ccode\u003ePromise\u003c/code\u003e\n\n\u003ca name=\"TransitionsPlugin+register\"\u003e\u003c/a\u003e\n\n### transitions.register(key, transitionClass)\nAdds a transition class to the plugin's dictionary. A transition class must extend `BaseTransition` and be registered if it is not already one of the default classes.\n\n\n\n| Param | Type | Description |\n| --- | --- | --- |\n| key | \u003ccode\u003eString\u003c/code\u003e | The key by which the transition can be referenced |\n| transitionClass | \u003ccode\u003eBaseTransition\u003c/code\u003e | A class which extends the BaseTransition class |\n\n\u003ca name=\"TransitionsPlugin+create\"\u003e\u003c/a\u003e\n\n### transitions.create(targets, config) ⇒ \u003ccode\u003eBaseTransition\u003c/code\u003e\nCreates a new transition based on the given config\n\n\n**Returns**: \u003ccode\u003eBaseTransition\u003c/code\u003e - - A transition class extending `BaseTransition`\n\n| Param | Type | Description |\n| --- | --- | --- |\n| targets | \u003ccode\u003eArray\u003c/code\u003e | The targets for this transition. These cannot be changed once the transition is created. |\n| config | \u003ccode\u003eObject\u003c/code\u003e | Settings for the transition |\n| config.type | \u003ccode\u003eString\u003c/code\u003e | A key to one of the default transitions, which currently includes any of the following: `\"Fade\"`, `\"Slide\"`, `\"Grow\"`, `\"Explode\"`, or `\"FadeSlide\"`. See the class descriptions for more info about each transition. |\n\n\u003ca name=\"TransitionsPlugin+enter\"\u003e\u003c/a\u003e\n\n### transitions.enter(targets, config) ⇒ \u003ccode\u003ePromise\u003c/code\u003e\nCreates and starts a new enter transition\n\n\n**Returns**: \u003ccode\u003ePromise\u003c/code\u003e - - Returns a promise which resolves when the transition is complete\n\n| Param | Type | Description |\n| --- | --- | --- |\n| targets | \u003ccode\u003eArray\u003c/code\u003e | The GameObject targets to transition |\n| config | \u003ccode\u003eObject\u003c/code\u003e | Settings for the transition. Must contain a transition-type key, but can also contain other config settings for the given transition type. |\n| config.type | \u003ccode\u003eString\u003c/code\u003e | The transition key |\n\n\u003ca name=\"TransitionsPlugin+exit\"\u003e\u003c/a\u003e\n\n### transitions.exit(targets, config) ⇒ \u003ccode\u003ePromise\u003c/code\u003e\nCreates and starts a new exit transition\n\n\n**Returns**: \u003ccode\u003ePromise\u003c/code\u003e - - Returns a promise which resolves when the transition is complete\n\n| Param | Type | Description |\n| --- | --- | --- |\n| targets | \u003ccode\u003eArray\u003c/code\u003e | The GameObject targets to transition |\n| config | \u003ccode\u003eObject\u003c/code\u003e | Settings for the transition. Must contain a transition-type key, but can also contain other config settings for the given transition type. |\n| config.type | \u003ccode\u003eString\u003c/code\u003e | The transition key |\n\n\n---\n\n\u003ca name=\"transition-classes\"\u003e\u003c/a\u003e\n## Transition Classes\n\n\u003ca name=\"base-transition\"\u003e\u003c/a\u003e\n### BaseTransition\n\nThe BaseTransition class implements the tweens defined in it's child classes. This class cannot be used directly as a transition, but it's methods (namely `enter()` and `exit()`) are called to initiate transitions. None of the BaseTransition methods generally need to be overridden.\n\n* Methods\n    * [new BaseTransition(params)](#new_BaseTransition_new)\n    * [setConfig(config)](#BaseTransition+setConfig)\n    * [resetProps(targets, cachedProps)](#BaseTransition+resetProps)\n    * [enter([userConfig])](#BaseTransition+enter) ⇒ \u003ccode\u003ePromise\u003c/code\u003e\n    * [exit([userConfig])](#BaseTransition+exit) ⇒ \u003ccode\u003ePromise\u003c/code\u003e\n\n### new BaseTransition(params)\n\n| Param | Type | Description |\n| --- | --- | --- |\n| params | \u003ccode\u003eObject\u003c/code\u003e | The config object |\n| params.scene | \u003ccode\u003ePhaser.Scene\u003c/code\u003e | The parent scene |\n| params.targets | \u003ccode\u003eArray\u003c/code\u003e | The target objects for the transition |\n| params.defaults | \u003ccode\u003eObject\u003c/code\u003e | The default config options for this transition |\n| params.config | \u003ccode\u003eObject\u003c/code\u003e | The user-defined config object, which is merged with the defaults (if provided) |\n| params.enterConfig | \u003ccode\u003efunction\u003c/code\u003e | A function which returns the tween config for the `enter` tween |\n| params.exitConfig | \u003ccode\u003efunction\u003c/code\u003e | A function which returns the tween config for the `exit` tween |\n| params.affectedProps | \u003ccode\u003eArray.\u0026lt;String\u0026gt;\u003c/code\u003e | An array listing the props which are affected by this transition. This list is used to cache and reset those props when `resetProps()` is called. |\n\n\u003ca name=\"BaseTransition+setConfig\"\u003e\u003c/a\u003e\n### baseTransition.setConfig(config)\nUpdate the configuration for this transition. Any unset properties will be resolved to their defaults or settings from a previously set configuration.\n\n| Param | Type | Description |\n| --- | --- | --- |\n| config | \u003ccode\u003eObject\u003c/code\u003e | An object defining transition configurations, such as duration, chain, etc. |\n\n\u003ca name=\"BaseTransition+resetProps\"\u003e\u003c/a\u003e\n\n### baseTransition.resetProps(targets, cachedProps)\nReturns each target object to it's initial state before either `enter()` or `exit()` was called.\n\n| Param | Type | Description |\n| --- | --- | --- |\n| targets | \u003ccode\u003eArray\u003c/code\u003e | An array of GameObject targets |\n| cachedProps | \u003ccode\u003eArray\u003c/code\u003e | An array of props generated by _cacheProps() |\n\n\u003ca name=\"BaseTransition+enter\"\u003e\u003c/a\u003e\n### baseTransition.enter([userConfig]) ⇒ \u003ccode\u003ePromise\u003c/code\u003e\nStarts the enter transition\n\n**Returns**: \u003ccode\u003ePromise\u003c/code\u003e - - A promise which resolves when the transition's tween is complete\n\n| Param | Type | Description |\n| --- | --- | --- |\n| [userConfig] | \u003ccode\u003eObject\u003c/code\u003e | A new config object for on-the-fly changes |\n\n\u003ca name=\"BaseTransition+exit\"\u003e\u003c/a\u003e\n### baseTransition.exit([userConfig]) ⇒ \u003ccode\u003ePromise\u003c/code\u003e\nStarts the exit transition\n\n**Returns**: \u003ccode\u003ePromise\u003c/code\u003e - - A promise which resolves when the transition's tween is complete\n\n| Param | Type | Description |\n| --- | --- | --- |\n| [userConfig] | \u003ccode\u003eObject\u003c/code\u003e | A new config object for on-the-fly changes |\n\n---\n\n\u003ca name=\"fade-transition\"\u003e\u003c/a\u003e\n### new FadeTransition(scene, targets, [config])\n\nThis transition tweens the `alpha` property of it's targets, fading object each into or out of view.\n\n| Param | Type | Default | Description |\n| --- | --- | --- | --- |\n| scene | \u003ccode\u003ePhaser.Scene\u003c/code\u003e | null | The parent scene |\n| targets | \u003ccode\u003eArray\u003c/code\u003e | null | An array of game objects to be included in this transition |\n| [config] | \u003ccode\u003eObject\u003c/code\u003e | `FadeTransition.Defaults` | The config object. Defaults will be used if not provided |\n| [config.duration] | \u003ccode\u003eNumber\u003c/code\u003e | \u003ccode\u003e500\u003c/code\u003e | The duration of this transition |\n| [config.chain] | \u003ccode\u003eBool\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | When true, each object will enter individually with overlap determined by the `offset` setting |\n| [config.offset] | \u003ccode\u003eString\u003c/code\u003e | 80% of duration| The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `\"-=500\"`, `\"+=500\"`, etc. |\n| [config.fuzz] | \u003ccode\u003eNumber\u003c/code\u003e | `0` | A number between 0 and 1 which adds randomness to the duration of this transition |\n\n\u003ca name=\"slide-transition\"\u003e\u003c/a\u003e\n### new SlideTransition(scene, targets, [config])\nThe SlideTransition slides it's targets in and out of the scene based on the directions specified via `enterFrom` and `exitTo`. The following properties are affected: `x`, `y`\n\n| Param | Type | Default | Description |\n| --- | --- | --- | --- |\n| scene | \u003ccode\u003ePhaser.Scene\u003c/code\u003e | null | The parent scene |\n| targets | \u003ccode\u003eArray\u003c/code\u003e | null | An array of game objects to be included in this transition |\n| [config] | \u003ccode\u003eObject\u003c/code\u003e | \u003ccode\u003eSlideTransition.Defaults\u003c/code\u003e | The config object. Defaults will be used if not provided. |\n| [config.duration] | \u003ccode\u003eNumber\u003c/code\u003e | \u003ccode\u003e500\u003c/code\u003e | The duration of this transition |\n| [config.chain] | \u003ccode\u003eBool\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | When true, each object will enter individually with overlap determined by the `offset` setting |\n| [config.offset] | \u003ccode\u003eString\u003c/code\u003e | \u003ccode\u003e80% of duration\u003c/code\u003e | The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `\"-=500\"`, `\"+=500\"`, etc. |\n| [config.fuzz] | \u003ccode\u003eNumber\u003c/code\u003e | \u003ccode\u003e0\u003c/code\u003e | A number between 0 and 1 which adds randomness to the duration of this transition |\n| [config.enterFrom] | \u003ccode\u003eString\u003c/code\u003e | \u003ccode\u003e\u0026#x27;left\u0026#x27;\u003c/code\u003e | The direction from which the transition will enter. Valid options include: `\"left\"`, `\"right\"`, `\"top\"`, and `\"bottom\"` |\n| [config.exitTo] | \u003ccode\u003eString\u003c/code\u003e | \u003ccode\u003e\u0026#x27;right\u0026#x27;\u003c/code\u003e | The direction from which the transition will exit. Valid options include: `\"left\"`, `\"right\"`, `\"top\"`, and `\"bottom\"` |\n\n\u003ca name=\"grow-transition\"\u003e\u003c/a\u003e\n### new GrowTransition(scene, targets, [config])\n\nThe GrowTransition scales each object up from zero in place (as opposed to the ExplodeTransition which moves from the center out but also scales it's objects). The following properties are affected: `scaleX`, `scaleY`\n\n| Param | Type | Default | Description |\n| --- | --- | --- | --- |\n| scene | \u003ccode\u003ePhaser.Scene\u003c/code\u003e |  | The parent scene |\n| targets | \u003ccode\u003eArray\u003c/code\u003e |  | An array of game objects to be included in this transition |\n| [config] | \u003ccode\u003eObject\u003c/code\u003e | \u003ccode\u003eSlideTransition.Defaults\u003c/code\u003e | The config object. Defaults will be used if not provided. |\n| [config.duration] | \u003ccode\u003eNumber\u003c/code\u003e | \u003ccode\u003e500\u003c/code\u003e | The duration of this transition |\n| [config.chain] | \u003ccode\u003eBool\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | When true, each object will enter individually with overlap determined by the `offset` setting |\n| [config.offset] | \u003ccode\u003eString\u003c/code\u003e | \u003ccode\u003e80% of duration\u003c/code\u003e | The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `\"-=500\"`, `\"+=500\"`, etc. |\n| [config.fuzz] | \u003ccode\u003eNumber\u003c/code\u003e | \u003ccode\u003e0\u003c/code\u003e | A number between 0 and 1 which adds randomness to the duration of this transition |\n\n\u003ca name=\"explode-transition\"\u003e\u003c/a\u003e\n### new ExplodeTransition(scene, targets, [config])\n\nThe ExplodeTransition scales each object up from zero while sliding out from the center. The following properties are affected: `alpha`, `scaleX`, `scaleY`, `x`, `y`\n\n| Param | Type | Default | Description |\n| --- | --- | --- | --- |\n| scene | \u003ccode\u003ePhaser.Scene\u003c/code\u003e |  | The parent scene |\n| targets | \u003ccode\u003eArray\u003c/code\u003e |  | An array of game objects to be included in this transition |\n| [config] | \u003ccode\u003eObject\u003c/code\u003e | \u003ccode\u003eExplodeTransition.Defaults\u003c/code\u003e | The config object. Defaults will be used if not provided. |\n| [config.duration] | \u003ccode\u003eNumber\u003c/code\u003e | \u003ccode\u003e500\u003c/code\u003e | The duration of this transition |\n| [config.chain] | \u003ccode\u003eBool\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | When true, each object will enter individually with overlap determined by the `offset` setting |\n| [config.offset] | \u003ccode\u003eString\u003c/code\u003e | \u003ccode\u003e80% of duration\u003c/code\u003e | The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `\"-=500\"`, `\"+=500\"`, etc. |\n| [config.fuzz] | \u003ccode\u003eNumber\u003c/code\u003e | \u003ccode\u003e0\u003c/code\u003e | A number between 0 and 1 which adds randomness to the duration of this transition |\n\n\n\u003ca name=\"slidefade-transition\"\u003e\u003c/a\u003e\n### new SlideFadeTransition(scene, targets, [config])\n\nA combination of the Slide and Fade transitions. The following properties are affected: `alpha`, `x`, `y`\n\n| Param | Type | Default | Description |\n| --- | --- | --- | --- |\n| scene | \u003ccode\u003ePhaser.Scene\u003c/code\u003e |  | The parent scene |\n| targets | \u003ccode\u003eArray\u003c/code\u003e |  | An array of game objects to be included in this transition |\n| [config] | \u003ccode\u003eObject\u003c/code\u003e | \u003ccode\u003eSlideFadeTransition.Defaults\u003c/code\u003e | The config object. Defaults will be used if not provided. |\n| [config.duration] | \u003ccode\u003eNumber\u003c/code\u003e | \u003ccode\u003e500\u003c/code\u003e | The duration of this transition |\n| [config.chain] | \u003ccode\u003eBool\u003c/code\u003e | \u003ccode\u003efalse\u003c/code\u003e | When true, each object will enter individually with overlap determined by the `offset` setting |\n| [config.offset] | \u003ccode\u003eString\u003c/code\u003e | \u003ccode\u003e80% of duration\u003c/code\u003e | The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `\"-=500\"`, `\"+=500\"`, etc. |\n| [config.fuzz] | \u003ccode\u003eNumber\u003c/code\u003e | \u003ccode\u003e0\u003c/code\u003e | A number between 0 and 1 which adds randomness to the duration of this transition |\n| [config.enterFrom] | \u003ccode\u003eString\u003c/code\u003e | \u003ccode\u003e\u0026#x27;bottom\u0026#x27;\u003c/code\u003e | The direction from which the transition will enter. Valid options include: `\"left\"`, `\"right\"`, `\"top\"`, and `\"bottom\"` |\n| [config.exitTo] | \u003ccode\u003eString\u003c/code\u003e | \u003ccode\u003e\u0026#x27;top\u0026#x27;\u003c/code\u003e | The direction from which the transition will exit. Valid options include: `\"left\"`, `\"right\"`, `\"top\"`, and `\"bottom\"` |\n\n\u003ca name=\"using-declaratively\"\u003e\u003c/a\u003e\n## Using Declaratively\n\nYou can bypass the plugin altogether and use each transition class declaratively if you wish. You can import any of the transition classes directly.\n\n```javascript\nimport { SlideTransition } from 'phaser3-transitions';\n\nfunction create(){\n\t\n  \t//The transition will return the sprites to their original positions\n    let sprite1 = this.add.sprite(100, 100, 'menuItem');\n    let sprite2 = this.add.sprite(100, 200, 'menuItem');\n    let sprite3 = this.add.sprite(100, 300, 'menuItem');\n\tlet sprites = [sprite1, sprite2, sprite3]; //etc.\n    \n    //You can omit the 'type' property when creating transition directly\n    let config = {\n        duration: 500,\n   \t\tenterFrom: 'left',\n        exitTo: 'bottom'\n    }\n    \n    //PARAMS: Scene, Targets, Config\n    let slide = new SlideTransition(this, targets, config);\n    \n    slide.enter();\n    \n}\n\n```\n\n\u003ca name=\"custom-transitions\"\u003e\u003c/a\u003e\n## Custom Transitions\n\nThis section also coming soon...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhavrick%2Fphaser3-transitions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhavrick%2Fphaser3-transitions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhavrick%2Fphaser3-transitions/lists"}