{"_id":"@adapt-retail/animation-framework","_rev":"1-917cad135230fc1fc93b9ae62f063679","name":"@adapt-retail/animation-framework","description":"A framework for quickly and structured create HTML5 animations with both HTML elements and video.","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@adapt-retail/animation-framework","version":"0.0.1","description":"A framework for quickly and structured create HTML5 animations with both HTML elements and video.","main":"dist/index.js","scripts":{"test":"ava","tdd":"executor 'npm run build && npm run test' --watch='**/*.js' --ignore='node_modules/' --ignore='dist/'","build":"babel src -d dist","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/AdaptRetail/animation-framework.git"},"author":{"name":"Lasse S. Haslev","email":"lasse@haslev.no"},"license":"MIT","devDependencies":{"@lassehaslev/executor":"^1.0.1","ava":"^0.23.0","babel-cli":"^6.26.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","browser-env":"^3.2.1"},"dependencies":{"gsap":"^1.20.3","mustache":"^2.3.0"},"ava":{"require":["./test/helpers/setup-browser-env.js"]},"gitHead":"1cf7cf9fddf181adcade029a22ba3f6fdbfc1c82","bugs":{"url":"https://github.com/AdaptRetail/animation-framework/issues"},"homepage":"https://github.com/AdaptRetail/animation-framework#readme","_id":"@adapt-retail/animation-framework@0.0.1","_npmVersion":"5.4.1","_nodeVersion":"8.3.0","_npmUser":{"name":"lassehaslev","email":"lasse@haslev.no"},"dist":{"integrity":"sha512-JmEYmNn2Ln2DrmoITkx47p5SDKopPbBNLxvkXtR5ZmOTovcrOA7la343h/G0/8wllUfOWIQ3RQKx+eU02Iry/g==","shasum":"8d953a29b6d7c609a274f5f8532e0f94da345c81","tarball":"https://registry.npmjs.org/@adapt-retail/animation-framework/-/animation-framework-0.0.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKQQQppz0nhX0cM/rRrAFvKEqxfLP4zV72uhtEzx/aeQIhAKlDA+EL6E0SE/yxN+3L+n0StUI0g1g2/uAr0saw1YtI"}]},"maintainers":[{"name":"lassehaslev","email":"lasse@haslev.no"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/animation-framework-0.0.1.tgz_1510744593365_0.9581402752082795"}}},"readme":"# @adapt-retail/animation-framework\n> A framework for quickly and structured create linear HTML5 animations with both HTML elements and video.\n\n## Table of content\n- [Introduction](#introduction)\n- [Install](#install)\n- [Usage](#usage)\n    - [See it in action](#see-it-in-action)\n- [API](#api)\n    - [Timeline](#timeline)\n        - [The Timeline is not instant as TimelineMax](#not-instant)\n    - [Scene](#scene)\n        - [Example class](#scene-example-class)\n        - [Template](#template)\n            - [Render to](#render-to)\n        - [Animate](#animate)\n        - [Setup](#setup)\n            - [Before and after setup function hooks](#before-after-setup-hooks)\n    - [Transition](#transition)\n    - [Video](#video)\n- [License](#license)\n\n<a name=\"introduction\"></a>\n## Introduction\n\nThe core concept of this animation framework is to help you create fast,\nstructured and logical animations using the [GSAP animation framework](https://greensock.com/gsap).\nWe do this by helping you create sections/modules of your code, and then sowing it together on a higher level.\n\nThese modules are [Timeline](#timeline), [Scene](#scene) and [Transition](#transition).\n\n<a name=\"install\"></a>\n## Install\n\nIn your project folder run following code.\n\n```bash\nnpm install @adapt-retail/animation-framework\n```\n\n<a name=\"usage\"></a>\n## Usage\n\n### [Get familiar with GSAP animation framework](https://greensock.com/gsap)\nThis project is built upon [greensock/GreenSock-JS](https://github.com/greensock/GreenSock-JS).\nWe recommend you get familiar with [the basic of GSAP](https://greensock.com/jump-start-js/) to minimize whats new in this project. \n\nGreenSock GSAP is a animation standard for web, and we recommend you to read [Get started guide](https://greensock.com/get-started-js) to use GreenSock/GSAP in other projects to.\n\n<a name=\"see-it-in-action\"></a>\n### See it in action\nThis project is already used as a dependency in the\n[AdaptRetail/video-template](https://github.com/AdaptRetail/video-template).\n\n<a name=\"api\"></a>\n## API\n\n<a name=\"timeline\"></a>\n### Timeline\n\nTimeline is the core class of this package. At this point every other class uses Timeline.\nThe Timeline class is extending from [GSAP/TimelineMax](https://greensock.com/timelinemax).\n\nMost of the time you will only use the Timeline class as the main timeline for\nall other classes that inherits from the timeline class. Often you will find yourself using \nthe timeline through either a [Scene](#scene) or [Transition](#Transition).\n\n```js\n/**\n * Import Timeline\n */\nconst Timeline = require('@adapt-retail/animation-framework');\n// const { Timeline } = require('@adapt-retail/animation-framework'); // Also available\n\n/**\n * Import your scene, as we discuss in the Scene section\n */\nconst MyIntroScene = require( './Path/To/MyIntroScene' );\nconst MyScene = require( './Path/To/MyScene' );\n\n/**\n * Create the main timeline.\n * We recommend you to add it to the window to access it from the console later\n * as timeline.\n * \n * We all properties added to Timeline constructor will be added to TimelineMax\n */\nwindow.timeline = new Timeline();\n\n/**\n * Add the Scene to the timeline.\n * It will automaticly be rendered and added\n * Make sure you new opp your Scene class\n *\n * You can allso pass data to your scene through the constructorj:w\n */\n timeline.add( new MyIntroScene() );\n timeline.add( new MyScene() );\n\n /**\n  * The main timeline has to be kickstarted by running timeline.start() function.\n  * It will run the start function automaticly on every child Timline\n  */\n  timeline.start();\n```\n\n> Quick tip: Each module handle its own logic.\n> If you just want to work with MyScene, you can just comment out the\n> MyIntroScene, and then you only see your MyScene logic and animations.\n\nCause of the Timeline is extended from TimelineMax you can also add logic like this:\n```js\ntimeline.from( element, 3, {\n    opacity: 0,\n} );\n```\n\n<a name=\"not-instant\"></a>\n#### The Timeline is not instant as TimelineMax\nOne change we made to the Timeline is that it does not execute at once all the\nproperties are added to it. This is to make it possible to wait for resources\nto load and alter the timeline length without the TimelineMax skipping it.\n\nEach parent timeline will wait for every child to notify when it is done. Then it\nwill notify its parent that it is done. This process will bubble up until its\nmain timeline, then it will add All into TimelineMax and run.\n\nAn example of a resource it to wait for a video to load to get it length. \nYou cannot alter the timelines duration after it is added to another timeline in\nGSAP.\n\nA result of this is that functions like `totalDuration()`\non a timeline before it has started, will not work.\n\nYou can overwrite this behaviour by adding following to constructor\n```js\nwindow.timeline = new Timeline({\n    paused: false,\n});\n```\n\n<a name=\"scene\"></a>\n### Scene\n> The Scene is only meant to be extended, and not used on its own.\n\nIn this framework you will use the most of your time in a Scene.\nThe Scene is extending from Timeline that also inherits from TimelineMax.\n\nYou should think of each Scene as a Scene in a movie, or a section/module of\nyour animation. Try make your Scenes solve one task. Also remember Scenes can\nadd multiple sub Scenes. [See example here](https://github.com/AdaptRetail/video-template/blob/master/src/Scripts/Scenes/Products.js#L23-L36).\n\n<a name=\"scene-example-class\"></a>\n#### Example class\n```js\nimport {Scene} from '@adapt-retail/animation-framework';\n\nclass MyScene extends Scene {\n\n    constructor() {\n        super();\n        this.helloTo = 'world';\n    }\n\n    /**\n     * Return html string\n     *\n     * @return string\n     */\n    template() {\n        return `\n            <div>Hello <span class=\"hello-to\">{{ helloTo }}</span>!</div>\n        `;\n    }\n\n    /**\n     * Animate the elemnts around.\n     * this.template references the first element in template function\n     *\n     * @return void\n     */\n    animate() {\n        this.from( this.template, 5, {\n            x: '100%',\n        } );\n\n        this.from( this.template.querySelector( '.hello-to' ), .8, {\n            opacity: 0,\n        }, 0 );\n    }\n\n}\n```\n\n<a name=\"template\"></a>\n#### Template\n\n```js\nrender() {\n    return `\n        <div>\n            <h1 class=\"title\">Hello {{ world }}</h1>\n            <p class=\"description\">{{{ description }}}</p>\n        </div>\n    `\n}\n```\n\n> Note: A template can only have one root HTML element, if multiple is set we will use\n> the first one.\n\nThe template function is where you will add your HTML for this Scene. We are\nusing [mustache](https://github.com/janl/mustache.js) to render variables to the template.\nAs a default you can access all `this.` variables through the template.\n\n<a name=\"render-to\"></a>\n##### Render to\nAs a default we are rendering each Scene and element to the document.body.\nYou can define what element you want to render your elements to like this:\n```js\ntimeline.add( new Scene({\n    renderTo: document.querySelector( '.content' ),\n}) );\n```\n\n<a name=\"animate\"></a>\n#### Animate\n```js\nanimate() {\n    /**\n     * Introduction movement for <h1 class=\"title\"></h1> elemnt in template.\n     */\n    this.to( this.template.querySelector( '.title' ), 1, {\n        ease: SlowMo.ease.config(0.1, 2, true),\n        scale: 1.5,\n    } );\n\n    /**\n     * Show the description half a second before the title movement is done.\n     */\n    this.from( this.template.querySelector( '.description' ), .8, {\n        opacity: 0,\n    }, '-=.5' );\n}\n```\n\nThe animate function is where you make all your elements move.\nThe animate will run when everything is rendered to the page.\n\nAs the scene is inheriting from TimelineMax, we are accessing the TimelineMax,\nfrom using the `this.` keyword. From there you can do [everything a\nTimelineMax](https://greensock.com/docs/TimelineMax) can do.\n\n<a name=\"setup\"></a>\n#### Setup\n```js\nsetup() {\n    return new Promise( function( resolve, reject ) {\n        window.setTimeout( function() {\n            resolve();\n        }, 500 );\n    } );\n}\n```\n\nIf you need to setup something or wait for resources to load before running\nanimation you can setup a `setup()` function in the class.\n\nThe setup command returns a promise. This is to make timeline wait to sew the\nfull timeline together before each Scene, Transition and Timeline is done loading before rendering and running animation.\n\nYou can read about [why here](#not-instant).\n\n<a name=\"before-after-setup-hooks\"></a>\n##### Before and after setup function hooks\n\nNone of the `beforeSetup()` or `afterSetup()` need to return anything.\n\nThe `beforeSetup()` will run immediately before the `setup()` is executed.\nThe `afterSetup()` will run immediately after the `setup()` is executed.\n\n<a name=\"transition\"></a>\n### Transition\n\n```js\nconst { Transition } = require( '@adapt-retail/animation-framework' );\n\ntimeline.add( new IntroScene );\ntimeline.add( new Transition ); // <-- Transition between Scenes\ntimeline.add( new ContentSectionScene );\ntimeline.add( new Transition ); // <-- Transition between Scenes\ntimeline.add( new OutroScene );\n```\n\nThe transition is extending from [Scene](#scene) and therefor inherits from [Timeline](#timeline) and TimelineMax also.\nYou should also extend the Transition or use it as it is. Do not run functions\nfrom it.\n\nTransitions are the glue between [Scenes](#scene), and you can look at as a\nspecial Scene that handle the transition between two Scenes.\n\nThe framework notifies the Transitions about the Scene that should be animated\nin (`this.in`) and what Scene should be animated out (`this.out`).\n\nThe [Core Transition class](https://github.com/AdaptRetail/animation-framework/blob/master/src/Transitions/Transition.js)\nis probably the best code reference about how to create a new version of it.\nBut here is an example:\n\n```js\nimport {Transition} from '@adapt-retail/animation-framework';\n\nexport default class SlideInOut extends Transition {\n\n    /**\n     * Animate the transition between two elements\n     * The this.to and this.from is automaticly set in the Timlineline\n     *\n     * this.to represents the element we are animating in\n     * this.from represents the element we are animating out\n     *\n     * @return void\n     */\n    animate() {\n\n        // Animate the element out\n        if (this.out) {\n            this.to( this.out.template, this.transitionTime, { \n                x: '100%',\n            });\n        }\n\n        // Animate the element in\n        if (this.in) {\n            this.to( this.in.template, this.transitionTime, {\n                x: '-100%',\n            }, 0 );\n        }\n\n    }\n\n}\n```\n\nWhen your class is created you can use it like so:\n```js\nconst SlideInOut = require( './path/to/SlideInOut' );\n\ntimeline.add( new FirstScene );\ntimeline.add( new SlideInOut ); // <-- Slides scenes from left to right\ntimeline.add( new SecondScene );\n```\n\n\n<a name=\"video\"></a>\n### Video\n\nThe video is under development, but can be reached by\n```js\nconst {Video} = require( '@adapt-retail/animation-framework' );\n```\n\nSee [Video.js](https://github.com/AdaptRetail/animation-framework/blob/master/src/Video.js) to see how it works.\n\n<a name=\"license\"></a>\n## License\n\nThis framework is built using the [GSAP animation framework](https://greensock.com/gsap), and they are subject to [their own license](http://greensock.com/standard-license).\nRead their license to make sure you are on the safe side on how you use this framework.\n\nThe code provided in this framework is available for usage by all clients of [Adapt Retail](https://adaptretail.com).\n","maintainers":[{"name":"lassehaslev","email":"lasse@haslev.no"},{"name":"adapt-retail-owner","email":"lasse.haslev@kodient.com"}],"time":{"modified":"2022-04-04T11:25:48.749Z","created":"2017-11-15T11:16:34.324Z","0.0.1":"2017-11-15T11:16:34.324Z"},"homepage":"https://github.com/AdaptRetail/animation-framework#readme","repository":{"type":"git","url":"git+https://github.com/AdaptRetail/animation-framework.git"},"author":{"name":"Lasse S. Haslev","email":"lasse@haslev.no"},"bugs":{"url":"https://github.com/AdaptRetail/animation-framework/issues"},"license":"MIT","readmeFilename":"README.md"}