├── .browserslistrc
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .npmignore
├── .prettierrc
├── README.MD
├── angular.json
├── e2e
    ├── src
    │   ├── app.e2e-spec.ts
    │   └── app.po.ts
    └── tsconfig.json
├── package-lock.json
├── package.json
├── projects
    └── ng2-animate-on-scroll
    │   ├── .eslintrc.json
    │   ├── README.md
    │   ├── ng-package.json
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── src
    │       ├── lib
    │       │   ├── animate-on-scroll.directive.ts
    │       │   ├── animate-on-scroll.module.ts
    │       │   └── scroll.service.ts
    │       ├── public-api.ts
    │       └── test.ts
    │   ├── tsconfig.lib.json
    │   ├── tsconfig.lib.prod.json
    │   └── tsconfig.spec.json
├── server.ts
├── src
    ├── app
    │   ├── app.component.css
    │   ├── app.component.html
    │   ├── app.component.spec.ts
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   └── app.server.module.ts
    ├── assets
    │   ├── .gitkeep
    │   ├── animate.css
    │   ├── mountains.jpg
    │   ├── sunset.jpg
    │   └── tiger.jpg
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── favicon.ico
    ├── index.html
    ├── main.server.ts
    ├── main.ts
    ├── polyfills.ts
    ├── styles.css
    └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.server.json
├── tsconfig.spec.json
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # You can see what browsers were selected by your queries by running:
 6 | #   npx browserslist
 7 | 
 8 | > 0.5%
 9 | last 2 versions
10 | Firefox ESR
11 | not dead
12 | not IE 9-11 # For IE 9-11 support, remove 'not'.


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "ignorePatterns": ["projects/**/*"],
 4 |   "overrides": [
 5 |     {
 6 |       "files": ["*.ts"],
 7 |       "parserOptions": {
 8 |         "project": ["tsconfig.json", "e2e/tsconfig.json"],
 9 |         "createDefaultProgram": true
10 |       },
11 |       "extends": [
12 |         "plugin:@angular-eslint/recommended",
13 |         "plugin:@angular-eslint/template/process-inline-templates",
14 |         "plugin:prettier/recommended"
15 |       ],
16 |       "rules": {
17 |         "@angular-eslint/component-selector": [
18 |           "error",
19 |           {
20 |             "prefix": "lib",
21 |             "style": "kebab-case",
22 |             "type": "element"
23 |           }
24 |         ],
25 |         "@angular-eslint/directive-selector": [
26 |           "error",
27 |           {
28 |             "prefix": "lib",
29 |             "style": "camelCase",
30 |             "type": "attribute"
31 |           }
32 |         ]
33 |       }
34 |     },
35 |     {
36 |       "files": ["*.html"],
37 |       "extends": ["plugin:@angular-eslint/template/recommended"],
38 |       "rules": {}
39 |     }
40 |   ]
41 | }
42 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Node
 2 | node_modules/*
 3 | npm-debug.log
 4 | **/node_modules/*
 5 | # TypeScript
 6 | *.js
 7 | *.map
 8 | *.d.ts
 9 | 
10 | # JetBrains
11 | .idea
12 | .project
13 | .settings
14 | .idea/*
15 | *.iml
16 | 
17 | # VS Code
18 | .vscode/*
19 | 
20 | # Visual Studio
21 | .vs/*
22 | 
23 | # Windows
24 | Thumbs.db
25 | Desktop.ini
26 | 
27 | # Mac
28 | .DS_Store
29 | **/.DS_Store
30 | 
31 | # compiled files
32 | dist/
33 | /compiled/
34 | *.metadata.json
35 | *.tgz


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | # Node
 2 | node_modules/*
 3 | npm-debug.log
 4 | 
 5 | # DO NOT IGNORE TYPESCRIPT FILES FOR NPM
 6 | # TypeScript
 7 | # *.js
 8 | # *.map
 9 | # *.d.ts
10 | 
11 | # JetBrains
12 | .idea
13 | .project
14 | .settings
15 | .idea/*
16 | *.iml
17 | 
18 | # VS Code
19 | .vscode/*
20 | 
21 | # Windows
22 | Thumbs.db
23 | Desktop.ini
24 | 
25 | # Mac
26 | .DS_Store
27 | **/.DS_Store
28 | 
29 | #tslint
30 | tslint.json
31 | 
32 | # ignore src files
33 | src/
34 | index.ts
35 | 
36 | # ignore compiles files
37 | /compiled


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "bracketSpacing": true,
3 |   "trailingComma": "es5",
4 |   "printWidth": 80,
5 |   "endOfLine": "auto",
6 |   "singleQuote": false
7 | }
8 | 


--------------------------------------------------------------------------------
/README.MD:
--------------------------------------------------------------------------------
  1 | 
  2 | # ng2-animate-on-scroll
  3 | 
  4 | A very simple Angular directive with no dependencies that allows you to add CSS animations on elements, once that element has been reached via scrolling the page.  Works with whatever CSS animation you choose, including Animate.css as shown in examples. An example without animate.css can be found [here](https://angular-ivy-zznhm8.stackblitz.io), with animate.css can be found [here](https://withanimate.stackblitz.io).
  5 | 
  6 | ## Installation
  7 | 
  8 | To install the directive in your project, run:
  9 | 
 10 | ```bash
 11 | $ npm install ng2-animate-on-scroll --save
 12 | ```
 13 | 
 14 | ## Using the directive
 15 | 
 16 | Modify the following in your app module:
 17 | 
 18 | ```typescript
 19 | import { BrowserModule } from '@angular/platform-browser';
 20 | import { NgModule } from '@angular/core';
 21 | 
 22 | import { AppComponent } from './app.component';
 23 | 
 24 | // import third-party module
 25 | import { AnimateOnScrollModule } from 'ng2-animate-on-scroll';
 26 | 
 27 | @NgModule({
 28 |   declarations: [
 29 |     AppComponent
 30 |   ],
 31 |   imports: [
 32 |     BrowserModule,
 33 | 
 34 |     // import module here
 35 |     AnimateOnScrollModule.forRoot()
 36 |   ],
 37 |   providers: [],
 38 |   bootstrap: [AppComponent]
 39 | })
 40 | export class AppModule { }
 41 | ```
 42 | 
 43 | Use the directive in your component template:
 44 | 
 45 | ```html
 46 | <div animateOnScroll animationName="animation-class-name"></div>
 47 | ```
 48 | 
 49 | ## animationName attribute
 50 | 
 51 | **(Optional)**. The `animationName` attribute is for the name(s) of the CSS class(es) to be added at the time the element appears. In cases when no animation is required (e.g in a ngif case) specify null. Here is a real-world example if you were using the Animate.css library in your project:
 52 | 
 53 | ```html
 54 | <div class="container">
 55 | 
 56 |   long scrolling content..
 57 | 
 58 |   <div class="animated" animateOnScroll animationName="fadeIn">
 59 |     animated content upon appearing in the viewport..
 60 |   </div>
 61 | 
 62 | </div>
 63 | ```
 64 | 
 65 | or
 66 | 
 67 | ```html
 68 | <div class="container">
 69 | 
 70 |   long scrolling content..
 71 | 
 72 |   <div animateOnScroll animationName="animated fadeIn">
 73 |     animated content upon appearing in the viewport..
 74 |   </div>
 75 | 
 76 | </div>
 77 | ```
 78 | 
 79 | ### Animate.css Peculiarity
 80 | 
 81 | If you're using Animate.css with this component and you're trying to animate an element IN to view (fadeIn, slideInLeft etc), you may experience "flashing" when the element scrolls into the viewport (i.e. the element will be shown, then be hidden, then animate into view). This can be mitigated by overriding Animate.css's `.animated` class, then applying `visibility: hidden;` to the element you want to hide:
 82 | 
 83 | ```css
 84 | .animated {
 85 |     visibility: visible !important;
 86 | }
 87 | .hide-on-init {
 88 |     visibility: hidden;
 89 | }
 90 | ```
 91 | 
 92 | ```html
 93 | <div class="container">
 94 | 
 95 |   long scrolling content..
 96 | 
 97 |   <div class="hide-on-init" animateOnScroll animationName="animated fadeIn">
 98 |     animated content upon appearing in the viewport..
 99 |   </div>
100 | 
101 | </div>
102 | ```
103 | 
104 | ## offset attribute
105 | 
106 | You can also optionally add an `offset` attribute (thanks `siegerx3`) to specify the number of pixels you would need to scroll to *below* the top of the element for the animation to activate. The default is 80 pixels and the value given can be positive or negative.
107 | 
108 | ```html
109 |   <div animateOnScroll animationName="animated slideDown" offset="120">
110 |     content with different pixel offset specified
111 |   </div>
112 | ```
113 | ## Options available
114 | | Options | Type | Comments |
115 | |:------------:|:-------------:|:-------------:|
116 | | animationName | string/null | Add animation class or null in case no animation is required |
117 | | offset | number | For scroll Listener, to add offsets |
118 | | useScroll | boolean | Add for using scroll Listener, default is true and uses intersection observer |
119 | | threshold | number | Add threshold value for intersection observer only |
120 | 
121 | 
122 | ## Developing ng2-animate-on-scroll with the demo application
123 | 
124 | 1. After cloning this repo, install dependencies with `npm install`.
125 | 2. The command `npm run watch` will build the library in watch mode (you can alternately use `npm run build:lib` if you prefer not to run in watch mode). 3. Finally, `npm run start` will start the server for the demo app. If you prefer you can use `npm run dev:ssr` to start the demo in server rendered mode using Angular Universal.
126 | 
127 | ## License
128 | 
129 | MIT © [Aaron Hazelton](mailto:abhazelton@gmail.com)
130 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "animate-on-scroll-sample-project": {
  7 |       "projectType": "application",
  8 |       "schematics": {},
  9 |       "root": "",
 10 |       "sourceRoot": "src",
 11 |       "prefix": "app",
 12 |       "architect": {
 13 |         "build": {
 14 |           "builder": "@angular-devkit/build-angular:browser",
 15 |           "options": {
 16 |             "outputPath": "dist/animate-on-scroll-sample-project/browser",
 17 |             "index": "src/index.html",
 18 |             "main": "src/main.ts",
 19 |             "polyfills": "src/polyfills.ts",
 20 |             "tsConfig": "tsconfig.app.json",
 21 |             "assets": [
 22 |               "src/favicon.ico",
 23 |               "src/assets"
 24 |             ],
 25 |             "styles": [
 26 |               "src/styles.css"
 27 |             ],
 28 |             "scripts": [],
 29 |             "vendorChunk": true,
 30 |             "extractLicenses": false,
 31 |             "buildOptimizer": false,
 32 |             "sourceMap": true,
 33 |             "optimization": false,
 34 |             "namedChunks": true
 35 |           },
 36 |           "configurations": {
 37 |             "production": {
 38 |               "fileReplacements": [
 39 |                 {
 40 |                   "replace": "src/environments/environment.ts",
 41 |                   "with": "src/environments/environment.prod.ts"
 42 |                 }
 43 |               ],
 44 |               "optimization": true,
 45 |               "outputHashing": "all",
 46 |               "sourceMap": false,
 47 |               "namedChunks": false,
 48 |               "extractLicenses": true,
 49 |               "vendorChunk": false,
 50 |               "buildOptimizer": true,
 51 |               "budgets": [
 52 |                 {
 53 |                   "type": "initial",
 54 |                   "maximumWarning": "2mb",
 55 |                   "maximumError": "5mb"
 56 |                 },
 57 |                 {
 58 |                   "type": "anyComponentStyle",
 59 |                   "maximumWarning": "6kb",
 60 |                   "maximumError": "10kb"
 61 |                 }
 62 |               ]
 63 |             }
 64 |           },
 65 |           "defaultConfiguration": ""
 66 |         },
 67 |         "serve": {
 68 |           "builder": "@angular-devkit/build-angular:dev-server",
 69 |           "options": {
 70 |             "browserTarget": "animate-on-scroll-sample-project:build"
 71 |           },
 72 |           "configurations": {
 73 |             "production": {
 74 |               "browserTarget": "animate-on-scroll-sample-project:build:production"
 75 |             }
 76 |           }
 77 |         },
 78 |         "extract-i18n": {
 79 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 80 |           "options": {
 81 |             "browserTarget": "animate-on-scroll-sample-project:build"
 82 |           }
 83 |         },
 84 |         "test": {
 85 |           "builder": "@angular-devkit/build-angular:karma",
 86 |           "options": {
 87 |             "main": "src/test.ts",
 88 |             "polyfills": "src/polyfills.ts",
 89 |             "tsConfig": "tsconfig.spec.json",
 90 |             "karmaConfig": "karma.conf.js",
 91 |             "assets": [
 92 |               "src/favicon.ico",
 93 |               "src/assets"
 94 |             ],
 95 |             "styles": [
 96 |               "src/styles.css"
 97 |             ],
 98 |             "scripts": []
 99 |           }
100 |         },
101 |         "lint": {
102 |           "builder": "@angular-eslint/builder:lint",
103 |           "options": {
104 |             "lintFilePatterns": [
105 |               "src/**/*.ts",
106 |               "src/**/*.html"
107 |             ]
108 |           }
109 |         },
110 |         "e2e": {
111 |           "builder": "@angular-devkit/build-angular:protractor",
112 |           "options": {
113 |             "protractorConfig": "e2e/protractor.conf.js",
114 |             "devServerTarget": "animate-on-scroll-sample-project:serve"
115 |           },
116 |           "configurations": {
117 |             "production": {
118 |               "devServerTarget": "animate-on-scroll-sample-project:serve:production"
119 |             }
120 |           }
121 |         },
122 |         "server": {
123 |           "builder": "@angular-devkit/build-angular:server",
124 |           "options": {
125 |             "outputPath": "dist/animate-on-scroll-sample-project/server",
126 |             "main": "server.ts",
127 |             "tsConfig": "tsconfig.server.json",
128 |             "sourceMap": true,
129 |             "optimization": false
130 |           },
131 |           "configurations": {
132 |             "production": {
133 |               "outputHashing": "media",
134 |               "fileReplacements": [
135 |                 {
136 |                   "replace": "src/environments/environment.ts",
137 |                   "with": "src/environments/environment.prod.ts"
138 |                 }
139 |               ],
140 |               "sourceMap": false,
141 |               "optimization": true
142 |             }
143 |           },
144 |           "defaultConfiguration": ""
145 |         },
146 |         "serve-ssr": {
147 |           "builder": "@nguniversal/builders:ssr-dev-server",
148 |           "options": {
149 |             "browserTarget": "animate-on-scroll-sample-project:build",
150 |             "serverTarget": "animate-on-scroll-sample-project:server"
151 |           },
152 |           "configurations": {
153 |             "production": {
154 |               "browserTarget": "animate-on-scroll-sample-project:build:production",
155 |               "serverTarget": "animate-on-scroll-sample-project:server:production"
156 |             }
157 |           }
158 |         },
159 |         "prerender": {
160 |           "builder": "@nguniversal/builders:prerender",
161 |           "options": {
162 |             "browserTarget": "animate-on-scroll-sample-project:build:production",
163 |             "serverTarget": "animate-on-scroll-sample-project:server:production",
164 |             "routes": [
165 |               "/"
166 |             ]
167 |           },
168 |           "configurations": {
169 |             "production": {}
170 |           }
171 |         }
172 |       }
173 |     },
174 |     "ng2-animate-on-scroll": {
175 |       "projectType": "library",
176 |       "root": "projects/ng2-animate-on-scroll",
177 |       "sourceRoot": "projects/ng2-animate-on-scroll/src",
178 |       "prefix": "lib",
179 |       "architect": {
180 |         "build": {
181 |           "builder": "@angular-devkit/build-angular:ng-packagr",
182 |           "options": {
183 |             "tsConfig": "projects/ng2-animate-on-scroll/tsconfig.lib.json",
184 |             "project": "projects/ng2-animate-on-scroll/ng-package.json"
185 |           },
186 |           "configurations": {
187 |             "production": {
188 |               "tsConfig": "projects/ng2-animate-on-scroll/tsconfig.lib.prod.json"
189 |             }
190 |           }
191 |         },
192 |         "test": {
193 |           "builder": "@angular-devkit/build-angular:karma",
194 |           "options": {
195 |             "main": "projects/ng2-animate-on-scroll/src/test.ts",
196 |             "tsConfig": "projects/ng2-animate-on-scroll/tsconfig.spec.json",
197 |             "karmaConfig": "projects/ng2-animate-on-scroll/karma.conf.js"
198 |           }
199 |         },
200 |         "lint": {
201 |           "builder": "@angular-eslint/builder:lint",
202 |           "options": {
203 |             "lintFilePatterns": [
204 |               "projects/ng2-animate-on-scroll/**/*.ts",
205 |               "projects/ng2-animate-on-scroll/**/*.html"
206 |             ]
207 |           }
208 |         }
209 |       }
210 |     }
211 |   },
212 |   "defaultProject": "animate-on-scroll-sample-project",
213 |   "cli": {
214 |     "defaultCollection": "@angular-eslint/schematics"
215 |   }
216 | }
217 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | import { browser, logging } from 'protractor';
 3 | 
 4 | describe('workspace-project App', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should display welcome message', () => {
12 |     page.navigateTo();
13 |     expect(page.getTitleText()).toEqual('animate-on-scroll-sample-project app is running!');
14 |   });
15 | 
16 |   afterEach(async () => {
17 |     // Assert that there are no errors emitted from the browser
18 |     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 |     expect(logs).not.toContain(jasmine.objectContaining({
20 |       level: logging.Level.SEVERE,
21 |     } as logging.Entry));
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo(): Promise<unknown> {
 5 |     return browser.get(browser.baseUrl) as Promise<unknown>;
 6 |   }
 7 | 
 8 |   getTitleText(): Promise<string> {
 9 |     return element(by.css('app-root .content span')).getText() as Promise<string>;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "module": "commonjs",
 6 |     "target": "es2018",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng2-animate-on-scroll",
 3 |   "version": "2.3.2",
 4 |   "author": {
 5 |     "name": "Aaron Hazelton",
 6 |     "email": "abhazelton@gmail.com"
 7 |   },
 8 |   "contributors": [
 9 |     "abhiruppalmethodist@gmail.com"
10 |   ],
11 |   "scripts": {
12 |     "ng": "ng",
13 |     "start": "ng serve",
14 |     "build": "ng build",
15 |     "build:lib": "ng build ng2-animate-on-scroll --configuration production",
16 |     "test": "ng test",
17 |     "lint": "ng lint",
18 |     "e2e": "ng e2e",
19 |     "dev:ssr": "ng run animate-on-scroll-sample-project:serve-ssr",
20 |     "serve:ssr": "node dist/animate-on-scroll-sample-project/server/main.js",
21 |     "build:ssr": "ng build --configuration production && ng run animate-on-scroll-sample-project:server:production",
22 |     "prerender": "ng run animate-on-scroll-sample-project:prerender",
23 |     "watch": "ng build ng2-animate-on-scroll --watch"
24 |   },
25 |   "dependencies": {
26 |     "@angular/animations": "^12.0.0",
27 |     "@angular/common": "^12.0.0",
28 |     "@angular/compiler": "^12.0.0",
29 |     "@angular/core": "^12.0.0",
30 |     "@angular/forms": "^12.0.0",
31 |     "@angular/platform-browser": "^12.0.0",
32 |     "@angular/platform-browser-dynamic": "^12.0.0",
33 |     "@angular/platform-server": "^12.0.0",
34 |     "@angular/router": "^12.0.0",
35 |     "@nguniversal/express-engine": "^12.0.0",
36 |     "express": "^4.15.2",
37 |     "react-image-crop": "^9.0.4",
38 |     "rxjs": "~6.5.4",
39 |     "tslib": "^2.0.0",
40 |     "zone.js": "~0.11.4"
41 |   },
42 |   "devDependencies": {
43 |     "@angular-devkit/build-angular": "^12.0.0",
44 |     "@angular-eslint/builder": "12.5.0",
45 |     "@angular-eslint/eslint-plugin": "12.5.0",
46 |     "@angular-eslint/eslint-plugin-template": "12.5.0",
47 |     "@angular-eslint/schematics": "12.5.0",
48 |     "@angular-eslint/template-parser": "12.5.0",
49 |     "@angular/cli": "^12.0.0",
50 |     "@angular/compiler-cli": "^12.0.0",
51 |     "@angular/language-service": "^12.0.0",
52 |     "@nguniversal/builders": "^12.0.0",
53 |     "@types/express": "^4.17.0",
54 |     "@types/jasmine": "~3.6.0",
55 |     "@types/jasminewd2": "~2.0.3",
56 |     "@types/node": "^12.11.1",
57 |     "@typescript-eslint/eslint-plugin": "4.28.2",
58 |     "@typescript-eslint/parser": "4.28.2",
59 |     "eslint": "^7.26.0",
60 |     "eslint-config-prettier": "^8.3.0",
61 |     "eslint-plugin-prettier": "^4.0.0",
62 |     "jasmine-core": "~3.6.0",
63 |     "jasmine-spec-reporter": "~5.0.0",
64 |     "karma": "~6.3.4",
65 |     "karma-chrome-launcher": "~3.1.0",
66 |     "karma-coverage-istanbul-reporter": "~3.0.2",
67 |     "karma-jasmine": "~4.0.0",
68 |     "karma-jasmine-html-reporter": "^1.5.0",
69 |     "ng-packagr": "^12.2.2",
70 |     "prettier": "^2.4.1",
71 |     "prettier-eslint": "^13.0.0",
72 |     "protractor": "~7.0.0",
73 |     "ts-node": "~8.3.0",
74 |     "typescript": "~4.3.5"
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/projects/ng2-animate-on-scroll/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../.eslintrc.json",
 3 |   "ignorePatterns": [
 4 |     "!**/*"
 5 |   ],
 6 |   "overrides": [
 7 |     {
 8 |       "files": [
 9 |         "*.ts"
10 |       ],
11 |       "parserOptions": {
12 |         "project": [
13 |           "projects/ng2-animate-on-scroll/tsconfig.lib.json",
14 |           "projects/ng2-animate-on-scroll/tsconfig.spec.json"
15 |         ],
16 |         "createDefaultProgram": true
17 |       },
18 |       "rules": {
19 |         "@angular-eslint/directive-selector": [
20 |           "error",
21 |           {
22 |             "type": "attribute",
23 |             "prefix": "lib",
24 |             "style": "camelCase"
25 |           }
26 |         ],
27 |         "@angular-eslint/component-selector": [
28 |           "error",
29 |           {
30 |             "type": "element",
31 |             "prefix": "lib",
32 |             "style": "kebab-case"
33 |           }
34 |         ]
35 |       }
36 |     },
37 |     {
38 |       "files": [
39 |         "*.html"
40 |       ],
41 |       "rules": {}
42 |     }
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/projects/ng2-animate-on-scroll/README.md:
--------------------------------------------------------------------------------
  1 | # Project Status
  2 | 
  3 | This project is in maintenance mode. Only bug fixes and new Angular version support is actively developed.
  4 | If you'd like new features, consider helping maintain the project.
  5 | 
  6 | # ng2-animate-on-scroll
  7 | 
  8 | A very simple Angular directive with no dependencies that allows you to add CSS animations on elements, once that element has been reached via scrolling the page.  Works with whatever CSS animation you choose, including Animate.css as shown in examples.
  9 | 
 10 | ## Installation
 11 | 
 12 | To install the directive in your project, run:
 13 | 
 14 | ```bash
 15 | $ npm install ng2-animate-on-scroll --save
 16 | ```
 17 | 
 18 | ## Using the directive
 19 | 
 20 | Modify the following in your app module:
 21 | 
 22 | ```typescript
 23 | import { BrowserModule } from '@angular/platform-browser';
 24 | import { NgModule } from '@angular/core';
 25 | 
 26 | import { AppComponent } from './app.component';
 27 | 
 28 | // import third-party module
 29 | import { AnimateOnScrollModule } from 'ng2-animate-on-scroll';
 30 | 
 31 | @NgModule({
 32 |   declarations: [
 33 |     AppComponent
 34 |   ],
 35 |   imports: [
 36 |     BrowserModule,
 37 | 
 38 |     // import module here
 39 |     AnimateOnScrollModule.forRoot()
 40 |   ],
 41 |   providers: [],
 42 |   bootstrap: [AppComponent]
 43 | })
 44 | export class AppModule { }
 45 | ```
 46 | 
 47 | Use the directive in your component template:
 48 | 
 49 | ```html
 50 | <div animateOnScroll animationName="animation-class-name"></div>
 51 | ```
 52 | 
 53 | ## animationName attribute
 54 | 
 55 | Required. The `animationName` attribute is for the name(s) of the CSS class(es) to be added at the time the element appears.  Here is a real-world example if you were using the Animate.css library in your project:
 56 | 
 57 | ```html
 58 | <div class="container">
 59 | 
 60 |   long scrolling content..
 61 | 
 62 |   <div class="animated" animateOnScroll animationName="fadeIn">
 63 |     animated content upon appearing in the viewport..
 64 |   </div>
 65 | 
 66 | </div>
 67 | ```
 68 | 
 69 | or
 70 | 
 71 | ```html
 72 | <div class="container">
 73 | 
 74 |   long scrolling content..
 75 | 
 76 |   <div animateOnScroll animationName="animated fadeIn">
 77 |     animated content upon appearing in the viewport..
 78 |   </div>
 79 | 
 80 | </div>
 81 | ```
 82 | 
 83 | ### Animate.css Peculiarity
 84 | 
 85 | If you're using Animate.css with this component and you're trying to animate an element IN to view (fadeIn, slideInLeft etc), you may experience "flashing" when the element scrolls into the viewport (i.e. the element will be shown, then be hidden, then animate into view). This can be mitigated by overriding Animate.css's `.animated` class, then applying `visibility: hidden;` to the element you want to hide:
 86 | 
 87 | ```css
 88 | .animated {
 89 |     visibility: visible !important;
 90 | }
 91 | .hide-on-init {
 92 |     visibility: hidden;
 93 | }
 94 | ```
 95 | 
 96 | ```html
 97 | <div class="container">
 98 | 
 99 |   long scrolling content..
100 | 
101 |   <div class="hide-on-init" animateOnScroll animationName="animated fadeIn">
102 |     animated content upon appearing in the viewport..
103 |   </div>
104 | 
105 | </div>
106 | ```
107 | 
108 | ## offset attribute
109 | 
110 | You can also optionally add an `offset` attribute (thanks `siegerx3`) to specify the number of pixels you would need to scroll to *below* the top of the element for the animation to activate. The default is 80 pixels and the value given can be positive or negative.
111 | 
112 | ```html
113 |   <div animateOnScroll animationName="animated slideDown" offset="120">
114 |     content with different pixel offset specified
115 |   </div>
116 | ```
117 | 
118 | ## Demo
119 | 
120 | An example of usage of the directory can be found at:
121 | [https://github.com/abhazelton/animate-on-scroll-test](https://github.com/abhazelton/animate-on-scroll-test)
122 | 
123 | ## License
124 | 
125 | MIT © [Aaron Hazelton](mailto:abhazelton@gmail.com)
126 | 


--------------------------------------------------------------------------------
/projects/ng2-animate-on-scroll/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3 |   "dest": "../../dist/ng2-animate-on-scroll",
4 |   "lib": {
5 |     "entryFile": "src/public-api.ts"
6 |   }
7 | }


--------------------------------------------------------------------------------
/projects/ng2-animate-on-scroll/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "ng2-animate-on-scroll",
  3 |   "version": "2.2.0",
  4 |   "lockfileVersion": 2,
  5 |   "requires": true,
  6 |   "packages": {
  7 |     "": {
  8 |       "version": "2.2.0",
  9 |       "license": "MIT",
 10 |       "dependencies": {
 11 |         "tslib": "^2.0.0"
 12 |       },
 13 |       "peerDependencies": {
 14 |         "@angular/common": "~11.0.7",
 15 |         "@angular/core": "~11.0.7"
 16 |       }
 17 |     },
 18 |     "node_modules/@angular/common": {
 19 |       "version": "11.0.9",
 20 |       "resolved": "https://registry.npmjs.org/@angular/common/-/common-11.0.9.tgz",
 21 |       "integrity": "sha512-QYJx+Y7Bmqdwtyk8TZDqF6io7gPaiZnUPrS/JbV/qB1QA8Q0OVaJSRRy/d0ahsc385+OiUhT7gVnbEh92oWXmQ==",
 22 |       "peer": true,
 23 |       "dependencies": {
 24 |         "tslib": "^2.0.0"
 25 |       },
 26 |       "peerDependencies": {
 27 |         "@angular/core": "11.0.9",
 28 |         "rxjs": "^6.5.3"
 29 |       }
 30 |     },
 31 |     "node_modules/@angular/core": {
 32 |       "version": "11.0.9",
 33 |       "resolved": "https://registry.npmjs.org/@angular/core/-/core-11.0.9.tgz",
 34 |       "integrity": "sha512-J0ff3UK2Cw7Z0eNLtUXrpMFvmmkvPPZWLYIwimyc1pZys7qsIVT6cy2ybGEOhbJgC6qt3fo0DoJV3pGXTalb8A==",
 35 |       "peer": true,
 36 |       "dependencies": {
 37 |         "tslib": "^2.0.0"
 38 |       },
 39 |       "peerDependencies": {
 40 |         "rxjs": "^6.5.3",
 41 |         "zone.js": "~0.10.3"
 42 |       }
 43 |     },
 44 |     "node_modules/rxjs": {
 45 |       "version": "6.6.3",
 46 |       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
 47 |       "integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==",
 48 |       "peer": true,
 49 |       "dependencies": {
 50 |         "tslib": "^1.9.0"
 51 |       },
 52 |       "engines": {
 53 |         "npm": ">=2.0.0"
 54 |       }
 55 |     },
 56 |     "node_modules/rxjs/node_modules/tslib": {
 57 |       "version": "1.14.1",
 58 |       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
 59 |       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
 60 |       "peer": true
 61 |     },
 62 |     "node_modules/tslib": {
 63 |       "version": "2.1.0",
 64 |       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
 65 |       "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
 66 |     },
 67 |     "node_modules/zone.js": {
 68 |       "version": "0.10.3",
 69 |       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz",
 70 |       "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg==",
 71 |       "peer": true
 72 |     }
 73 |   },
 74 |   "dependencies": {
 75 |     "@angular/common": {
 76 |       "version": "11.0.9",
 77 |       "resolved": "https://registry.npmjs.org/@angular/common/-/common-11.0.9.tgz",
 78 |       "integrity": "sha512-QYJx+Y7Bmqdwtyk8TZDqF6io7gPaiZnUPrS/JbV/qB1QA8Q0OVaJSRRy/d0ahsc385+OiUhT7gVnbEh92oWXmQ==",
 79 |       "peer": true,
 80 |       "requires": {
 81 |         "tslib": "^2.0.0"
 82 |       }
 83 |     },
 84 |     "@angular/core": {
 85 |       "version": "11.0.9",
 86 |       "resolved": "https://registry.npmjs.org/@angular/core/-/core-11.0.9.tgz",
 87 |       "integrity": "sha512-J0ff3UK2Cw7Z0eNLtUXrpMFvmmkvPPZWLYIwimyc1pZys7qsIVT6cy2ybGEOhbJgC6qt3fo0DoJV3pGXTalb8A==",
 88 |       "peer": true,
 89 |       "requires": {
 90 |         "tslib": "^2.0.0"
 91 |       }
 92 |     },
 93 |     "rxjs": {
 94 |       "version": "6.6.3",
 95 |       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
 96 |       "integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==",
 97 |       "peer": true,
 98 |       "requires": {
 99 |         "tslib": "^1.9.0"
100 |       },
101 |       "dependencies": {
102 |         "tslib": {
103 |           "version": "1.14.1",
104 |           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
105 |           "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
106 |           "peer": true
107 |         }
108 |       }
109 |     },
110 |     "tslib": {
111 |       "version": "2.1.0",
112 |       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
113 |       "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
114 |     },
115 |     "zone.js": {
116 |       "version": "0.10.3",
117 |       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz",
118 |       "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg==",
119 |       "peer": true
120 |     }
121 |   }
122 | }
123 | 


--------------------------------------------------------------------------------
/projects/ng2-animate-on-scroll/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng2-animate-on-scroll",
 3 |   "version": "2.2.1",
 4 |   "description": "Angular directive that adds css animations on elements once they are reached via scrolling",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/abhazelton/animate-on-scroll.git"
 8 |   },
 9 |   "keywords": [
10 |     "css",
11 |     "animation",
12 |     "angular",
13 |     "scrolling",
14 |     "directive"
15 |   ],
16 |   "author": {
17 |     "name": "Aaron Hazelton",
18 |     "email": "abhazelton@gmail.com"
19 |   },
20 |   "maintainers": [
21 |     "Abhirup Pal(abhiruppalmethodist@gmail.com)"
22 |   ],
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/abhazelton/animate-on-scroll/issues"
26 |   },
27 |   "homepage": "https://github.com/abhazelton/animate-on-scroll#readme",
28 |   "dependencies": {
29 |     "tslib": "^2.0.0"
30 |   },
31 |   "peerDependencies": {
32 |     "@angular/common": "^12.0.0",
33 |     "@angular/core": "^12.0.0"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/projects/ng2-animate-on-scroll/src/lib/animate-on-scroll.directive.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Directive,
  3 |   Input,
  4 |   Renderer2,
  5 |   ElementRef,
  6 |   OnInit,
  7 |   OnDestroy,
  8 |   AfterViewInit,
  9 | } from "@angular/core";
 10 | import { ScrollService } from "./scroll.service";
 11 | import { Subscription } from "rxjs";
 12 | 
 13 | @Directive({
 14 |   // eslint-disable-next-line @angular-eslint/directive-selector
 15 |   selector: "[animateOnScroll]",
 16 | })
 17 | export class AnimateOnScrollDirective
 18 |   implements OnInit, OnDestroy, AfterViewInit
 19 | {
 20 |   private offsetTop: number;
 21 |   private isVisible: boolean;
 22 |   private winHeight: number;
 23 |   private scrollSub: Subscription = new Subscription();
 24 |   private resizeSub: Subscription = new Subscription();
 25 | 
 26 |   private get id(): string {
 27 |     return this.elementRef.nativeElement.id;
 28 |   }
 29 | 
 30 |   @Input() animationName: string | null; // use fadeIn as default if not specified, specify null for no animation
 31 |   // Pixel offset from screen bottom to the animated element to determine the start of the animation
 32 |   @Input() offset: number = 80; // for scroll Listener
 33 |   @Input() useScroll?: boolean;
 34 |   @Input() threshold?: number; // for intersection observer only for the time being
 35 | 
 36 |   constructor(
 37 |     private elementRef: ElementRef,
 38 |     private renderer: Renderer2,
 39 |     private scroll: ScrollService
 40 |   ) {}
 41 | 
 42 |   ngOnInit(): void {
 43 |     if (!this.animationName) {
 44 |       return;
 45 |     }
 46 |     // default visibility to false
 47 |     this.isVisible = false;
 48 |     this.useScroll = this.useScroll
 49 |       ? this.useScroll
 50 |       : this.useScroll === false
 51 |       ? false
 52 |       : true;
 53 |     this.threshold = this.threshold ? this.threshold || 0.5 : 0.5;
 54 |     // using intersecting observer by default, else fallback to scroll Listener
 55 |     if ("IntersectionObserver" in window && this.useScroll) {
 56 |       const options: IntersectionObserverInit = {
 57 |         root: null,
 58 |         threshold: this.threshold,
 59 |         rootMargin: "0px",
 60 |       };
 61 |       const observer: IntersectionObserver = new IntersectionObserver(
 62 |         (entries, _) => {
 63 |           entries.forEach((entry) => {
 64 |             if (!entry.isIntersecting) {
 65 |               return;
 66 |             }
 67 |             this.addAnimationClass();
 68 |           });
 69 |         },
 70 |         options
 71 |       );
 72 |       observer.observe(this.elementRef.nativeElement);
 73 |       return;
 74 |     }
 75 | 
 76 |     // subscribe to scroll event using service
 77 |     this.scrollSub = this.scroll.scrollObs.subscribe(() =>
 78 |       this.manageVisibility()
 79 |     );
 80 | 
 81 |     // subscribe to resize event using service so scrolling position is always accurate
 82 |     this.resizeSub = this.scroll.resizeObs.subscribe(() =>
 83 |       this.manageVisibility()
 84 |     );
 85 |   }
 86 | 
 87 |   ngAfterViewInit(): void {
 88 |     // run visibility check initially in case the element is already visible in viewport
 89 |     setTimeout(() => this.manageVisibility(), 1);
 90 |   }
 91 | 
 92 |   ngOnDestroy(): void {
 93 |     this.scrollSub.unsubscribe();
 94 |     this.resizeSub.unsubscribe();
 95 |   }
 96 | 
 97 |   /**
 98 |    * check for visibility of element in viewport to add animation
 99 |    *
100 |    * @returns void
101 |    */
102 |   private manageVisibility(): void {
103 |     if (this.isVisible) {
104 |       // Optimisation; nothing to do if class has already been applied
105 |       return;
106 |     }
107 | 
108 |     // check for window height, may change with a window resize
109 |     this.getWinHeight();
110 | 
111 |     // get vertical position for selected element
112 |     this.getOffsetTop();
113 | 
114 |     // we should trigger the addition of the animation class a little after getting to the element
115 |     const scrollTrigger = this.offsetTop + this.offset - this.winHeight;
116 | 
117 |     // using values updated in service
118 |     if (this.scroll.pos >= scrollTrigger) {
119 |       this.addAnimationClass();
120 |     }
121 |   }
122 | 
123 |   /**
124 |    * utility function to mark element visible and add css class
125 |    *
126 |    * @returns void
127 |    */
128 |   private addAnimationClass(): void {
129 |     // stops execution if no class is provided
130 |     if (!this.animationName) {
131 |       return;
132 |     }
133 | 
134 |     // mark this element visible, we won't remove the class after this
135 |     this.isVisible = true;
136 | 
137 |     // use default for animate.css if no value provided
138 |     this.setClass(this.animationName);
139 |   }
140 | 
141 |   /**
142 |    * utility function to add one or more css classes to element in DOM
143 |    *
144 |    * @param  {string} classes
145 |    * @returns void
146 |    */
147 |   private setClass(classes: string): void {
148 |     for (const c of classes.split(" ")) {
149 |       this.renderer.addClass(this.elementRef.nativeElement, c);
150 |     }
151 |   }
152 | 
153 |   /**
154 |    * get window height utility function
155 |    *
156 |    * @returns void
157 |    */
158 |   private getWinHeight(): void {
159 |     this.winHeight = typeof window !== "undefined" ? window.innerHeight : 0;
160 |   }
161 | 
162 |   /**
163 |    * get offsetTop value for element
164 |    *
165 |    * @returns void
166 |    */
167 |   private getOffsetTop(): void {
168 |     if (
169 |       typeof this.elementRef.nativeElement.getBoundingClientRect === "function"
170 |     ) {
171 |       const viewportTop =
172 |         this.elementRef.nativeElement.getBoundingClientRect().top;
173 |       const clientTop = this.elementRef.nativeElement.clientTop;
174 | 
175 |       // get vertical position for selected element
176 |       this.offsetTop = viewportTop + this.scroll.pos - clientTop;
177 |     } else {
178 |       this.offsetTop = 0;
179 |     }
180 |   }
181 | }
182 | 


--------------------------------------------------------------------------------
/projects/ng2-animate-on-scroll/src/lib/animate-on-scroll.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule, ModuleWithProviders } from "@angular/core";
 2 | import { CommonModule } from "@angular/common";
 3 | import { AnimateOnScrollDirective } from "./animate-on-scroll.directive";
 4 | import { ScrollService } from "./scroll.service";
 5 | 
 6 | @NgModule({
 7 |   imports: [CommonModule],
 8 |   declarations: [AnimateOnScrollDirective],
 9 |   exports: [AnimateOnScrollDirective],
10 | })
11 | export class AnimateOnScrollModule {
12 |   static forRoot(): ModuleWithProviders<AnimateOnScrollModule> {
13 |     return {
14 |       ngModule: AnimateOnScrollModule,
15 |       providers: [ScrollService],
16 |     };
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/projects/ng2-animate-on-scroll/src/lib/scroll.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable, OnDestroy } from "@angular/core";
 2 | import { Observable, Subscription, EMPTY, fromEvent } from "rxjs";
 3 | 
 4 | @Injectable()
 5 | export class ScrollService implements OnDestroy {
 6 |   scrollObs: Observable<any>;
 7 |   resizeObs: Observable<any>;
 8 |   pos: number;
 9 |   private scrollSub: Subscription = new Subscription();
10 |   private resizeSub: Subscription = new Subscription();
11 | 
12 |   constructor() {
13 |     // set initial value
14 |     this.manageScrollPos();
15 | 
16 |     // create observable that we can subscribe to from component or directive
17 |     this.scrollObs =
18 |       typeof window !== "undefined" ? fromEvent(window, "scroll") : EMPTY;
19 | 
20 |     // initiate subscription to update values
21 |     this.scrollSub = this.scrollObs.subscribe(() => this.manageScrollPos());
22 | 
23 |     // create observable for changes in screen size
24 |     this.resizeObs =
25 |       typeof window !== "undefined" ? fromEvent(window, "resize") : EMPTY;
26 | 
27 |     // initiate subscription to update values
28 |     this.resizeSub = this.resizeObs.subscribe(() => this.manageScrollPos());
29 |   }
30 | 
31 |   private manageScrollPos(): void {
32 |     // update service property
33 |     this.pos = typeof window !== "undefined" ? window.pageYOffset : 0;
34 |   }
35 | 
36 |   ngOnDestroy(): void {
37 |     this.scrollSub.unsubscribe();
38 |     this.resizeSub.unsubscribe();
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/projects/ng2-animate-on-scroll/src/public-api.ts:
--------------------------------------------------------------------------------
1 | export * from "./lib/animate-on-scroll.directive";
2 | export * from "./lib/animate-on-scroll.module";
3 | export * from "./lib/scroll.service";
4 | 


--------------------------------------------------------------------------------
/projects/ng2-animate-on-scroll/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import "zone.js";
 4 | import "zone.js/testing";
 5 | import { getTestBed } from "@angular/core/testing";
 6 | import {
 7 |   BrowserDynamicTestingModule,
 8 |   platformBrowserDynamicTesting,
 9 | } from "@angular/platform-browser-dynamic/testing";
10 | 
11 | declare const require: {
12 |   context(
13 |     path: string,
14 |     deep?: boolean,
15 |     filter?: RegExp
16 |   ): {
17 |     keys(): string[];
18 |     <T>(id: string): T;
19 |   };
20 | };
21 | 
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 |   BrowserDynamicTestingModule,
25 |   platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context("./", true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | 


--------------------------------------------------------------------------------
/projects/ng2-animate-on-scroll/tsconfig.lib.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/lib",
 5 |     "declarationMap": true,
 6 |     "target": "es2015",
 7 |     "declaration": true,
 8 |     "inlineSources": true,
 9 |     "types": [],
10 |     "lib": [
11 |       "dom",
12 |       "es2018"
13 |     ]
14 |   },
15 |   "angularCompilerOptions": {
16 |     "skipTemplateCodegen": true,
17 |     "strictMetadataEmit": true,
18 |     "enableResourceInlining": true
19 |   },
20 |   "exclude": [
21 |     "src/test.ts",
22 |     "**/*.spec.ts"
23 |   ]
24 | }
25 | 


--------------------------------------------------------------------------------
/projects/ng2-animate-on-scroll/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.lib.json",
 3 |   "compilerOptions": {
 4 |     "declarationMap": false
 5 |   },
 6 |   "angularCompilerOptions": {
 7 |     "enableIvy": false
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/projects/ng2-animate-on-scroll/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts"
12 |   ],
13 |   "include": [
14 |     "**/*.spec.ts",
15 |     "**/*.d.ts"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/server.ts:
--------------------------------------------------------------------------------
 1 | import 'zone.js/node';
 2 | 
 3 | import { ngExpressEngine } from '@nguniversal/express-engine';
 4 | import * as express from 'express';
 5 | import { join } from 'path';
 6 | 
 7 | import { AppServerModule } from './src/main.server';
 8 | import { APP_BASE_HREF } from '@angular/common';
 9 | import { existsSync } from 'fs';
10 | 
11 | // The Express app is exported so that it can be used by serverless Functions.
12 | export function app() {
13 |   const server = express();
14 |   const distFolder = join(process.cwd(), 'dist/animate-on-scroll-sample-project/browser');
15 |   const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
16 | 
17 |   // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
18 |   server.engine('html', ngExpressEngine({
19 |     bootstrap: AppServerModule,
20 |   }));
21 | 
22 |   server.set('view engine', 'html');
23 |   server.set('views', distFolder);
24 | 
25 |   // Example Express Rest API endpoints
26 |   // app.get('/api/**', (req, res) => { });
27 |   // Serve static files from /browser
28 |   server.get('*.*', express.static(distFolder, {
29 |     maxAge: '1y'
30 |   }));
31 | 
32 |   // All regular routes use the Universal engine
33 |   server.get('*', (req, res) => {
34 |     res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
35 |   });
36 | 
37 |   return server;
38 | }
39 | 
40 | function run() {
41 |   const port = process.env.PORT || 4000;
42 | 
43 |   // Start up the Node server
44 |   const server = app();
45 |   server.listen(port, () => {
46 |     console.log(`Node Express server listening on http://localhost:${port}`);
47 |   });
48 | }
49 | 
50 | // Webpack will replace 'require' with '__webpack_require__'
51 | // '__non_webpack_require__' is a proxy to Node 'require'
52 | // The below code is to ensure that the server is run only when not requiring the bundle.
53 | declare const __non_webpack_require__: NodeRequire;
54 | const mainModule = __non_webpack_require__.main;
55 | const moduleFilename = mainModule && mainModule.filename || '';
56 | if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
57 |   run();
58 | }
59 | 
60 | export * from './src/main.server';
61 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abhazelton/animate-on-scroll/da59f7a8385561a8283fb11ae348028a26c46506/src/app/app.component.css


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
  1 | <div class="container">
  2 |   <div class="jumbotron">
  3 |     <div class="container">
  4 |       <h1 class="display-3">ng2-animate-on-scroll example</h1>
  5 |       <p class="lead">Scroll down for a few examples</p>
  6 |     </div>
  7 |   </div>
  8 | 
  9 |   <div class="row p-5">
 10 |     <div class="col-12 col-md-6 col-lg-4">
 11 |       <div
 12 |         class="card"
 13 |         animateOnScroll
 14 |         [animationName]=null
 15 |         threshold="0"
 16 |         [useScroll]="false"
 17 |       >
 18 |         <div class="card-block">
 19 |           <div class="card-title">
 20 |             <h3>One</h3>
 21 |           </div>
 22 |           <div class="card-text">
 23 |             <p>Cards that ...</p>
 24 |           </div>
 25 |         </div>
 26 |       </div>
 27 |     </div>
 28 | 
 29 |     <div class="col-12 col-md-6 col-lg-4">
 30 |       <div
 31 |         class="card hide-on-init animated-delay-1"
 32 |         animateOnScroll
 33 |         animationName="animated fadeInDown"
 34 |         threshold="0.5"
 35 |       >
 36 |         <div class="card-block">
 37 |           <div class="card-title">
 38 |             <h3>Two</h3>
 39 |           </div>
 40 |           <div class="card-text">
 41 |             <p>... fade in at ...</p>
 42 |           </div>
 43 |         </div>
 44 |       </div>
 45 |     </div>
 46 | 
 47 |     <div class="col-12 col-md-6 col-lg-4">
 48 |       <div
 49 |         class="card hide-on-init animated-delay-2"
 50 |         animateOnScroll
 51 |         animationName="animated fadeInDown"
 52 |       >
 53 |         <div class="card-block">
 54 |           <div class="card-title">
 55 |             <h3>Three</h3>
 56 |           </div>
 57 |           <div class="card-text">
 58 |             <p>... different times.</p>
 59 |           </div>
 60 |         </div>
 61 |       </div>
 62 |     </div>
 63 |   </div>
 64 | 
 65 |   <div class="row p-5">
 66 |     <div
 67 |       class="col hide-on-init"
 68 |       animateOnScroll
 69 |       animationName="animated fadeInLeft"
 70 |     >
 71 |       <h4>Divs containing other elements like buttons or forms</h4>
 72 |       <p>
 73 |         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet
 74 |         elit feugiat, venenatis turpis id, pharetra felis. Cras mollis vitae
 75 |         orci eget volutpat. Proin dapibus massa vitae lacus maximus, vitae
 76 |         cursus diam sodales. Curabitur laoreet nunc sit amet est sagittis
 77 |         rutrum. Nulla at ante sed elit scelerisque vestibulum. Vivamus commodo
 78 |         mauris ante, quis varius ante dictum vel. Mauris in est volutpat, auctor
 79 |         diam ut, pretium est. Suspendisse ...
 80 |       </p>
 81 | 
 82 |       <div class="btn-group" role="group" aria-label="Basic example">
 83 |         <button type="button" class="btn btn-secondary">Left</button>
 84 |         <button type="button" class="btn btn-secondary">Middle</button>
 85 |         <button type="button" class="btn btn-secondary">Right</button>
 86 |       </div>
 87 |     </div>
 88 |   </div>
 89 | 
 90 |   <div class="row p-5">
 91 |     <div
 92 |       class="col hide-on-init"
 93 |       animateOnScroll
 94 |       animationName="animated fadeInRight"
 95 |     >
 96 |       <h4>Sections of text</h4>
 97 |       <p>
 98 |         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet
 99 |         elit feugiat, venenatis turpis id, pharetra felis. Cras mollis vitae
100 |         orci eget volutpat. Proin dapibus massa vitae lacus maximus, vitae
101 |         cursus diam sodales. Curabitur laoreet nunc sit amet est sagittis
102 |         rutrum. Nulla at ante sed elit scelerisque vestibulum. Vivamus commodo
103 |         mauris ante, quis varius ante dictum vel. Mauris in est volutpat, auctor
104 |         diam ut, pretium est. Suspendisse ...
105 |       </p>
106 |     </div>
107 |   </div>
108 | 
109 |   <div class="row p-5">
110 |     <div class="col">
111 |       <h4>Images</h4>
112 |     </div>
113 |   </div>
114 |   <div class="row">
115 |     <div class="col-md-12 col-lg-6 p-3">
116 |       <img
117 |         src="../assets/sunset.jpg"
118 |         class="img-fluid rounded float-left hide-on-init"
119 |         animateOnScroll
120 |         animationName="animated zoomInDown"
121 |       />
122 |     </div>
123 |     <div class="col-md-12 col-lg-6 p-3">
124 |       <img
125 |         src="../assets/tiger.jpg"
126 |         class="img-fluid rounded float-left hide-on-init"
127 |         animateOnScroll
128 |         animationName="animated zoomInDown"
129 |       />
130 |     </div>
131 |     <div class="col-md-12 col-lg-6 p-3">
132 |       <img
133 |         src="../assets/mountains.jpg"
134 |         class="img-fluid rounded float-left hide-on-init"
135 |         animateOnScroll
136 |         animationName="animated zoomInDown"
137 |       />
138 |     </div>
139 |   </div>
140 | </div>
141 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, waitForAsync } from "@angular/core/testing";
 2 | import { AppComponent } from "./app.component";
 3 | 
 4 | describe("AppComponent", () => {
 5 |   beforeEach(
 6 |     waitForAsync(() => {
 7 |       TestBed.configureTestingModule({
 8 |         declarations: [AppComponent],
 9 |       }).compileComponents();
10 |     })
11 |   );
12 | 
13 |   it("should create the app", () => {
14 |     const fixture = TestBed.createComponent(AppComponent);
15 |     const app = fixture.componentInstance;
16 |     expect(app).toBeTruthy();
17 |   });
18 | 
19 |   it(`should have as title 'animate-on-scroll-sample-project'`, () => {
20 |     const fixture = TestBed.createComponent(AppComponent);
21 |     const app = fixture.componentInstance;
22 |     expect(app.title).toEqual("animate-on-scroll-sample-project");
23 |   });
24 | 
25 |   it("should render title", () => {
26 |     const fixture = TestBed.createComponent(AppComponent);
27 |     fixture.detectChanges();
28 |     const compiled = fixture.nativeElement;
29 |     expect(compiled.querySelector(".content span").textContent).toContain(
30 |       "animate-on-scroll-sample-project app is running!"
31 |     );
32 |   });
33 | });
34 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from "@angular/core";
 2 | 
 3 | @Component({
 4 |   // eslint-disable-next-line @angular-eslint/component-selector
 5 |   selector: "app-root",
 6 |   templateUrl: "./app.component.html",
 7 |   styleUrls: ["./app.component.css"],
 8 | })
 9 | export class AppComponent {
10 |   title = "animate-on-scroll-sample-project";
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from "@angular/platform-browser";
 2 | import { NgModule } from "@angular/core";
 3 | 
 4 | import { AppComponent } from "./app.component";
 5 | import { AnimateOnScrollModule } from "ng2-animate-on-scroll";
 6 | 
 7 | @NgModule({
 8 |   declarations: [AppComponent],
 9 |   imports: [
10 |     BrowserModule.withServerTransition({ appId: "serverApp" }),
11 |     AnimateOnScrollModule.forRoot(),
12 |   ],
13 |   providers: [],
14 |   bootstrap: [AppComponent],
15 | })
16 | export class AppModule {}
17 | 


--------------------------------------------------------------------------------
/src/app/app.server.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from "@angular/core";
 2 | import { ServerModule } from "@angular/platform-server";
 3 | 
 4 | import { AppModule } from "./app.module";
 5 | import { AppComponent } from "./app.component";
 6 | 
 7 | @NgModule({
 8 |   imports: [AppModule, ServerModule],
 9 |   bootstrap: [AppComponent],
10 | })
11 | export class AppServerModule {}
12 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abhazelton/animate-on-scroll/da59f7a8385561a8283fb11ae348028a26c46506/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/assets/animate.css:
--------------------------------------------------------------------------------
   1 | @charset "UTF-8";
   2 | 
   3 | /*!
   4 |  * animate.css -http://daneden.me/animate
   5 |  * Version - 3.5.1
   6 |  * Licensed under the MIT license - http://opensource.org/licenses/MIT
   7 |  *
   8 |  * Copyright (c) 2016 Daniel Eden
   9 |  */
  10 | 
  11 | .animated {
  12 |   -webkit-animation-duration: 1s;
  13 |   animation-duration: 1s;
  14 |   -webkit-animation-fill-mode: both;
  15 |   animation-fill-mode: both;
  16 | }
  17 | 
  18 | .animated.infinite {
  19 |   -webkit-animation-iteration-count: infinite;
  20 |   animation-iteration-count: infinite;
  21 | }
  22 | 
  23 | .animated.hinge {
  24 |   -webkit-animation-duration: 2s;
  25 |   animation-duration: 2s;
  26 | }
  27 | 
  28 | .animated.flipOutX,
  29 | .animated.flipOutY,
  30 | .animated.bounceIn,
  31 | .animated.bounceOut {
  32 |   -webkit-animation-duration: .75s;
  33 |   animation-duration: .75s;
  34 | }
  35 | 
  36 | @-webkit-keyframes bounce {
  37 |   from, 20%, 53%, 80%, to {
  38 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  39 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  40 |     -webkit-transform: translate3d(0,0,0);
  41 |     transform: translate3d(0,0,0);
  42 |   }
  43 | 
  44 |   40%, 43% {
  45 |     -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  46 |     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  47 |     -webkit-transform: translate3d(0, -30px, 0);
  48 |     transform: translate3d(0, -30px, 0);
  49 |   }
  50 | 
  51 |   70% {
  52 |     -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  53 |     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  54 |     -webkit-transform: translate3d(0, -15px, 0);
  55 |     transform: translate3d(0, -15px, 0);
  56 |   }
  57 | 
  58 |   90% {
  59 |     -webkit-transform: translate3d(0,-4px,0);
  60 |     transform: translate3d(0,-4px,0);
  61 |   }
  62 | }
  63 | 
  64 | @keyframes bounce {
  65 |   from, 20%, 53%, 80%, to {
  66 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  67 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  68 |     -webkit-transform: translate3d(0,0,0);
  69 |     transform: translate3d(0,0,0);
  70 |   }
  71 | 
  72 |   40%, 43% {
  73 |     -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  74 |     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  75 |     -webkit-transform: translate3d(0, -30px, 0);
  76 |     transform: translate3d(0, -30px, 0);
  77 |   }
  78 | 
  79 |   70% {
  80 |     -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  81 |     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  82 |     -webkit-transform: translate3d(0, -15px, 0);
  83 |     transform: translate3d(0, -15px, 0);
  84 |   }
  85 | 
  86 |   90% {
  87 |     -webkit-transform: translate3d(0,-4px,0);
  88 |     transform: translate3d(0,-4px,0);
  89 |   }
  90 | }
  91 | 
  92 | .bounce {
  93 |   -webkit-animation-name: bounce;
  94 |   animation-name: bounce;
  95 |   -webkit-transform-origin: center bottom;
  96 |   transform-origin: center bottom;
  97 | }
  98 | 
  99 | @-webkit-keyframes flash {
 100 |   from, 50%, to {
 101 |     opacity: 1;
 102 |   }
 103 | 
 104 |   25%, 75% {
 105 |     opacity: 0;
 106 |   }
 107 | }
 108 | 
 109 | @keyframes flash {
 110 |   from, 50%, to {
 111 |     opacity: 1;
 112 |   }
 113 | 
 114 |   25%, 75% {
 115 |     opacity: 0;
 116 |   }
 117 | }
 118 | 
 119 | .flash {
 120 |   -webkit-animation-name: flash;
 121 |   animation-name: flash;
 122 | }
 123 | 
 124 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 125 | 
 126 | @-webkit-keyframes pulse {
 127 |   from {
 128 |     -webkit-transform: scale3d(1, 1, 1);
 129 |     transform: scale3d(1, 1, 1);
 130 |   }
 131 | 
 132 |   50% {
 133 |     -webkit-transform: scale3d(1.05, 1.05, 1.05);
 134 |     transform: scale3d(1.05, 1.05, 1.05);
 135 |   }
 136 | 
 137 |   to {
 138 |     -webkit-transform: scale3d(1, 1, 1);
 139 |     transform: scale3d(1, 1, 1);
 140 |   }
 141 | }
 142 | 
 143 | @keyframes pulse {
 144 |   from {
 145 |     -webkit-transform: scale3d(1, 1, 1);
 146 |     transform: scale3d(1, 1, 1);
 147 |   }
 148 | 
 149 |   50% {
 150 |     -webkit-transform: scale3d(1.05, 1.05, 1.05);
 151 |     transform: scale3d(1.05, 1.05, 1.05);
 152 |   }
 153 | 
 154 |   to {
 155 |     -webkit-transform: scale3d(1, 1, 1);
 156 |     transform: scale3d(1, 1, 1);
 157 |   }
 158 | }
 159 | 
 160 | .pulse {
 161 |   -webkit-animation-name: pulse;
 162 |   animation-name: pulse;
 163 | }
 164 | 
 165 | @-webkit-keyframes rubberBand {
 166 |   from {
 167 |     -webkit-transform: scale3d(1, 1, 1);
 168 |     transform: scale3d(1, 1, 1);
 169 |   }
 170 | 
 171 |   30% {
 172 |     -webkit-transform: scale3d(1.25, 0.75, 1);
 173 |     transform: scale3d(1.25, 0.75, 1);
 174 |   }
 175 | 
 176 |   40% {
 177 |     -webkit-transform: scale3d(0.75, 1.25, 1);
 178 |     transform: scale3d(0.75, 1.25, 1);
 179 |   }
 180 | 
 181 |   50% {
 182 |     -webkit-transform: scale3d(1.15, 0.85, 1);
 183 |     transform: scale3d(1.15, 0.85, 1);
 184 |   }
 185 | 
 186 |   65% {
 187 |     -webkit-transform: scale3d(.95, 1.05, 1);
 188 |     transform: scale3d(.95, 1.05, 1);
 189 |   }
 190 | 
 191 |   75% {
 192 |     -webkit-transform: scale3d(1.05, .95, 1);
 193 |     transform: scale3d(1.05, .95, 1);
 194 |   }
 195 | 
 196 |   to {
 197 |     -webkit-transform: scale3d(1, 1, 1);
 198 |     transform: scale3d(1, 1, 1);
 199 |   }
 200 | }
 201 | 
 202 | @keyframes rubberBand {
 203 |   from {
 204 |     -webkit-transform: scale3d(1, 1, 1);
 205 |     transform: scale3d(1, 1, 1);
 206 |   }
 207 | 
 208 |   30% {
 209 |     -webkit-transform: scale3d(1.25, 0.75, 1);
 210 |     transform: scale3d(1.25, 0.75, 1);
 211 |   }
 212 | 
 213 |   40% {
 214 |     -webkit-transform: scale3d(0.75, 1.25, 1);
 215 |     transform: scale3d(0.75, 1.25, 1);
 216 |   }
 217 | 
 218 |   50% {
 219 |     -webkit-transform: scale3d(1.15, 0.85, 1);
 220 |     transform: scale3d(1.15, 0.85, 1);
 221 |   }
 222 | 
 223 |   65% {
 224 |     -webkit-transform: scale3d(.95, 1.05, 1);
 225 |     transform: scale3d(.95, 1.05, 1);
 226 |   }
 227 | 
 228 |   75% {
 229 |     -webkit-transform: scale3d(1.05, .95, 1);
 230 |     transform: scale3d(1.05, .95, 1);
 231 |   }
 232 | 
 233 |   to {
 234 |     -webkit-transform: scale3d(1, 1, 1);
 235 |     transform: scale3d(1, 1, 1);
 236 |   }
 237 | }
 238 | 
 239 | .rubberBand {
 240 |   -webkit-animation-name: rubberBand;
 241 |   animation-name: rubberBand;
 242 | }
 243 | 
 244 | @-webkit-keyframes shake {
 245 |   from, to {
 246 |     -webkit-transform: translate3d(0, 0, 0);
 247 |     transform: translate3d(0, 0, 0);
 248 |   }
 249 | 
 250 |   10%, 30%, 50%, 70%, 90% {
 251 |     -webkit-transform: translate3d(-10px, 0, 0);
 252 |     transform: translate3d(-10px, 0, 0);
 253 |   }
 254 | 
 255 |   20%, 40%, 60%, 80% {
 256 |     -webkit-transform: translate3d(10px, 0, 0);
 257 |     transform: translate3d(10px, 0, 0);
 258 |   }
 259 | }
 260 | 
 261 | @keyframes shake {
 262 |   from, to {
 263 |     -webkit-transform: translate3d(0, 0, 0);
 264 |     transform: translate3d(0, 0, 0);
 265 |   }
 266 | 
 267 |   10%, 30%, 50%, 70%, 90% {
 268 |     -webkit-transform: translate3d(-10px, 0, 0);
 269 |     transform: translate3d(-10px, 0, 0);
 270 |   }
 271 | 
 272 |   20%, 40%, 60%, 80% {
 273 |     -webkit-transform: translate3d(10px, 0, 0);
 274 |     transform: translate3d(10px, 0, 0);
 275 |   }
 276 | }
 277 | 
 278 | .shake {
 279 |   -webkit-animation-name: shake;
 280 |   animation-name: shake;
 281 | }
 282 | 
 283 | @-webkit-keyframes headShake {
 284 |   0% {
 285 |     -webkit-transform: translateX(0);
 286 |     transform: translateX(0);
 287 |   }
 288 | 
 289 |   6.5% {
 290 |     -webkit-transform: translateX(-6px) rotateY(-9deg);
 291 |     transform: translateX(-6px) rotateY(-9deg);
 292 |   }
 293 | 
 294 |   18.5% {
 295 |     -webkit-transform: translateX(5px) rotateY(7deg);
 296 |     transform: translateX(5px) rotateY(7deg);
 297 |   }
 298 | 
 299 |   31.5% {
 300 |     -webkit-transform: translateX(-3px) rotateY(-5deg);
 301 |     transform: translateX(-3px) rotateY(-5deg);
 302 |   }
 303 | 
 304 |   43.5% {
 305 |     -webkit-transform: translateX(2px) rotateY(3deg);
 306 |     transform: translateX(2px) rotateY(3deg);
 307 |   }
 308 | 
 309 |   50% {
 310 |     -webkit-transform: translateX(0);
 311 |     transform: translateX(0);
 312 |   }
 313 | }
 314 | 
 315 | @keyframes headShake {
 316 |   0% {
 317 |     -webkit-transform: translateX(0);
 318 |     transform: translateX(0);
 319 |   }
 320 | 
 321 |   6.5% {
 322 |     -webkit-transform: translateX(-6px) rotateY(-9deg);
 323 |     transform: translateX(-6px) rotateY(-9deg);
 324 |   }
 325 | 
 326 |   18.5% {
 327 |     -webkit-transform: translateX(5px) rotateY(7deg);
 328 |     transform: translateX(5px) rotateY(7deg);
 329 |   }
 330 | 
 331 |   31.5% {
 332 |     -webkit-transform: translateX(-3px) rotateY(-5deg);
 333 |     transform: translateX(-3px) rotateY(-5deg);
 334 |   }
 335 | 
 336 |   43.5% {
 337 |     -webkit-transform: translateX(2px) rotateY(3deg);
 338 |     transform: translateX(2px) rotateY(3deg);
 339 |   }
 340 | 
 341 |   50% {
 342 |     -webkit-transform: translateX(0);
 343 |     transform: translateX(0);
 344 |   }
 345 | }
 346 | 
 347 | .headShake {
 348 |   -webkit-animation-timing-function: ease-in-out;
 349 |   animation-timing-function: ease-in-out;
 350 |   -webkit-animation-name: headShake;
 351 |   animation-name: headShake;
 352 | }
 353 | 
 354 | @-webkit-keyframes swing {
 355 |   20% {
 356 |     -webkit-transform: rotate3d(0, 0, 1, 15deg);
 357 |     transform: rotate3d(0, 0, 1, 15deg);
 358 |   }
 359 | 
 360 |   40% {
 361 |     -webkit-transform: rotate3d(0, 0, 1, -10deg);
 362 |     transform: rotate3d(0, 0, 1, -10deg);
 363 |   }
 364 | 
 365 |   60% {
 366 |     -webkit-transform: rotate3d(0, 0, 1, 5deg);
 367 |     transform: rotate3d(0, 0, 1, 5deg);
 368 |   }
 369 | 
 370 |   80% {
 371 |     -webkit-transform: rotate3d(0, 0, 1, -5deg);
 372 |     transform: rotate3d(0, 0, 1, -5deg);
 373 |   }
 374 | 
 375 |   to {
 376 |     -webkit-transform: rotate3d(0, 0, 1, 0deg);
 377 |     transform: rotate3d(0, 0, 1, 0deg);
 378 |   }
 379 | }
 380 | 
 381 | @keyframes swing {
 382 |   20% {
 383 |     -webkit-transform: rotate3d(0, 0, 1, 15deg);
 384 |     transform: rotate3d(0, 0, 1, 15deg);
 385 |   }
 386 | 
 387 |   40% {
 388 |     -webkit-transform: rotate3d(0, 0, 1, -10deg);
 389 |     transform: rotate3d(0, 0, 1, -10deg);
 390 |   }
 391 | 
 392 |   60% {
 393 |     -webkit-transform: rotate3d(0, 0, 1, 5deg);
 394 |     transform: rotate3d(0, 0, 1, 5deg);
 395 |   }
 396 | 
 397 |   80% {
 398 |     -webkit-transform: rotate3d(0, 0, 1, -5deg);
 399 |     transform: rotate3d(0, 0, 1, -5deg);
 400 |   }
 401 | 
 402 |   to {
 403 |     -webkit-transform: rotate3d(0, 0, 1, 0deg);
 404 |     transform: rotate3d(0, 0, 1, 0deg);
 405 |   }
 406 | }
 407 | 
 408 | .swing {
 409 |   -webkit-transform-origin: top center;
 410 |   transform-origin: top center;
 411 |   -webkit-animation-name: swing;
 412 |   animation-name: swing;
 413 | }
 414 | 
 415 | @-webkit-keyframes tada {
 416 |   from {
 417 |     -webkit-transform: scale3d(1, 1, 1);
 418 |     transform: scale3d(1, 1, 1);
 419 |   }
 420 | 
 421 |   10%, 20% {
 422 |     -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 423 |     transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 424 |   }
 425 | 
 426 |   30%, 50%, 70%, 90% {
 427 |     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 428 |     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 429 |   }
 430 | 
 431 |   40%, 60%, 80% {
 432 |     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 433 |     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 434 |   }
 435 | 
 436 |   to {
 437 |     -webkit-transform: scale3d(1, 1, 1);
 438 |     transform: scale3d(1, 1, 1);
 439 |   }
 440 | }
 441 | 
 442 | @keyframes tada {
 443 |   from {
 444 |     -webkit-transform: scale3d(1, 1, 1);
 445 |     transform: scale3d(1, 1, 1);
 446 |   }
 447 | 
 448 |   10%, 20% {
 449 |     -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 450 |     transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 451 |   }
 452 | 
 453 |   30%, 50%, 70%, 90% {
 454 |     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 455 |     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 456 |   }
 457 | 
 458 |   40%, 60%, 80% {
 459 |     -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 460 |     transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 461 |   }
 462 | 
 463 |   to {
 464 |     -webkit-transform: scale3d(1, 1, 1);
 465 |     transform: scale3d(1, 1, 1);
 466 |   }
 467 | }
 468 | 
 469 | .tada {
 470 |   -webkit-animation-name: tada;
 471 |   animation-name: tada;
 472 | }
 473 | 
 474 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 475 | 
 476 | @-webkit-keyframes wobble {
 477 |   from {
 478 |     -webkit-transform: none;
 479 |     transform: none;
 480 |   }
 481 | 
 482 |   15% {
 483 |     -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 484 |     transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 485 |   }
 486 | 
 487 |   30% {
 488 |     -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 489 |     transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 490 |   }
 491 | 
 492 |   45% {
 493 |     -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 494 |     transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 495 |   }
 496 | 
 497 |   60% {
 498 |     -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 499 |     transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 500 |   }
 501 | 
 502 |   75% {
 503 |     -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 504 |     transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 505 |   }
 506 | 
 507 |   to {
 508 |     -webkit-transform: none;
 509 |     transform: none;
 510 |   }
 511 | }
 512 | 
 513 | @keyframes wobble {
 514 |   from {
 515 |     -webkit-transform: none;
 516 |     transform: none;
 517 |   }
 518 | 
 519 |   15% {
 520 |     -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 521 |     transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 522 |   }
 523 | 
 524 |   30% {
 525 |     -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 526 |     transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 527 |   }
 528 | 
 529 |   45% {
 530 |     -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 531 |     transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 532 |   }
 533 | 
 534 |   60% {
 535 |     -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 536 |     transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 537 |   }
 538 | 
 539 |   75% {
 540 |     -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 541 |     transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 542 |   }
 543 | 
 544 |   to {
 545 |     -webkit-transform: none;
 546 |     transform: none;
 547 |   }
 548 | }
 549 | 
 550 | .wobble {
 551 |   -webkit-animation-name: wobble;
 552 |   animation-name: wobble;
 553 | }
 554 | 
 555 | @-webkit-keyframes jello {
 556 |   from, 11.1%, to {
 557 |     -webkit-transform: none;
 558 |     transform: none;
 559 |   }
 560 | 
 561 |   22.2% {
 562 |     -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
 563 |     transform: skewX(-12.5deg) skewY(-12.5deg);
 564 |   }
 565 | 
 566 |   33.3% {
 567 |     -webkit-transform: skewX(6.25deg) skewY(6.25deg);
 568 |     transform: skewX(6.25deg) skewY(6.25deg);
 569 |   }
 570 | 
 571 |   44.4% {
 572 |     -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
 573 |     transform: skewX(-3.125deg) skewY(-3.125deg);
 574 |   }
 575 | 
 576 |   55.5% {
 577 |     -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
 578 |     transform: skewX(1.5625deg) skewY(1.5625deg);
 579 |   }
 580 | 
 581 |   66.6% {
 582 |     -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
 583 |     transform: skewX(-0.78125deg) skewY(-0.78125deg);
 584 |   }
 585 | 
 586 |   77.7% {
 587 |     -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
 588 |     transform: skewX(0.390625deg) skewY(0.390625deg);
 589 |   }
 590 | 
 591 |   88.8% {
 592 |     -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
 593 |     transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
 594 |   }
 595 | }
 596 | 
 597 | @keyframes jello {
 598 |   from, 11.1%, to {
 599 |     -webkit-transform: none;
 600 |     transform: none;
 601 |   }
 602 | 
 603 |   22.2% {
 604 |     -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
 605 |     transform: skewX(-12.5deg) skewY(-12.5deg);
 606 |   }
 607 | 
 608 |   33.3% {
 609 |     -webkit-transform: skewX(6.25deg) skewY(6.25deg);
 610 |     transform: skewX(6.25deg) skewY(6.25deg);
 611 |   }
 612 | 
 613 |   44.4% {
 614 |     -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
 615 |     transform: skewX(-3.125deg) skewY(-3.125deg);
 616 |   }
 617 | 
 618 |   55.5% {
 619 |     -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
 620 |     transform: skewX(1.5625deg) skewY(1.5625deg);
 621 |   }
 622 | 
 623 |   66.6% {
 624 |     -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
 625 |     transform: skewX(-0.78125deg) skewY(-0.78125deg);
 626 |   }
 627 | 
 628 |   77.7% {
 629 |     -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
 630 |     transform: skewX(0.390625deg) skewY(0.390625deg);
 631 |   }
 632 | 
 633 |   88.8% {
 634 |     -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
 635 |     transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
 636 |   }
 637 | }
 638 | 
 639 | .jello {
 640 |   -webkit-animation-name: jello;
 641 |   animation-name: jello;
 642 |   -webkit-transform-origin: center;
 643 |   transform-origin: center;
 644 | }
 645 | 
 646 | @-webkit-keyframes bounceIn {
 647 |   from, 20%, 40%, 60%, 80%, to {
 648 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 649 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 650 |   }
 651 | 
 652 |   0% {
 653 |     opacity: 0;
 654 |     -webkit-transform: scale3d(.3, .3, .3);
 655 |     transform: scale3d(.3, .3, .3);
 656 |   }
 657 | 
 658 |   20% {
 659 |     -webkit-transform: scale3d(1.1, 1.1, 1.1);
 660 |     transform: scale3d(1.1, 1.1, 1.1);
 661 |   }
 662 | 
 663 |   40% {
 664 |     -webkit-transform: scale3d(.9, .9, .9);
 665 |     transform: scale3d(.9, .9, .9);
 666 |   }
 667 | 
 668 |   60% {
 669 |     opacity: 1;
 670 |     -webkit-transform: scale3d(1.03, 1.03, 1.03);
 671 |     transform: scale3d(1.03, 1.03, 1.03);
 672 |   }
 673 | 
 674 |   80% {
 675 |     -webkit-transform: scale3d(.97, .97, .97);
 676 |     transform: scale3d(.97, .97, .97);
 677 |   }
 678 | 
 679 |   to {
 680 |     opacity: 1;
 681 |     -webkit-transform: scale3d(1, 1, 1);
 682 |     transform: scale3d(1, 1, 1);
 683 |   }
 684 | }
 685 | 
 686 | @keyframes bounceIn {
 687 |   from, 20%, 40%, 60%, 80%, to {
 688 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 689 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 690 |   }
 691 | 
 692 |   0% {
 693 |     opacity: 0;
 694 |     -webkit-transform: scale3d(.3, .3, .3);
 695 |     transform: scale3d(.3, .3, .3);
 696 |   }
 697 | 
 698 |   20% {
 699 |     -webkit-transform: scale3d(1.1, 1.1, 1.1);
 700 |     transform: scale3d(1.1, 1.1, 1.1);
 701 |   }
 702 | 
 703 |   40% {
 704 |     -webkit-transform: scale3d(.9, .9, .9);
 705 |     transform: scale3d(.9, .9, .9);
 706 |   }
 707 | 
 708 |   60% {
 709 |     opacity: 1;
 710 |     -webkit-transform: scale3d(1.03, 1.03, 1.03);
 711 |     transform: scale3d(1.03, 1.03, 1.03);
 712 |   }
 713 | 
 714 |   80% {
 715 |     -webkit-transform: scale3d(.97, .97, .97);
 716 |     transform: scale3d(.97, .97, .97);
 717 |   }
 718 | 
 719 |   to {
 720 |     opacity: 1;
 721 |     -webkit-transform: scale3d(1, 1, 1);
 722 |     transform: scale3d(1, 1, 1);
 723 |   }
 724 | }
 725 | 
 726 | .bounceIn {
 727 |   -webkit-animation-name: bounceIn;
 728 |   animation-name: bounceIn;
 729 | }
 730 | 
 731 | @-webkit-keyframes bounceInDown {
 732 |   from, 60%, 75%, 90%, to {
 733 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 734 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 735 |   }
 736 | 
 737 |   0% {
 738 |     opacity: 0;
 739 |     -webkit-transform: translate3d(0, -3000px, 0);
 740 |     transform: translate3d(0, -3000px, 0);
 741 |   }
 742 | 
 743 |   60% {
 744 |     opacity: 1;
 745 |     -webkit-transform: translate3d(0, 25px, 0);
 746 |     transform: translate3d(0, 25px, 0);
 747 |   }
 748 | 
 749 |   75% {
 750 |     -webkit-transform: translate3d(0, -10px, 0);
 751 |     transform: translate3d(0, -10px, 0);
 752 |   }
 753 | 
 754 |   90% {
 755 |     -webkit-transform: translate3d(0, 5px, 0);
 756 |     transform: translate3d(0, 5px, 0);
 757 |   }
 758 | 
 759 |   to {
 760 |     -webkit-transform: none;
 761 |     transform: none;
 762 |   }
 763 | }
 764 | 
 765 | @keyframes bounceInDown {
 766 |   from, 60%, 75%, 90%, to {
 767 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 768 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 769 |   }
 770 | 
 771 |   0% {
 772 |     opacity: 0;
 773 |     -webkit-transform: translate3d(0, -3000px, 0);
 774 |     transform: translate3d(0, -3000px, 0);
 775 |   }
 776 | 
 777 |   60% {
 778 |     opacity: 1;
 779 |     -webkit-transform: translate3d(0, 25px, 0);
 780 |     transform: translate3d(0, 25px, 0);
 781 |   }
 782 | 
 783 |   75% {
 784 |     -webkit-transform: translate3d(0, -10px, 0);
 785 |     transform: translate3d(0, -10px, 0);
 786 |   }
 787 | 
 788 |   90% {
 789 |     -webkit-transform: translate3d(0, 5px, 0);
 790 |     transform: translate3d(0, 5px, 0);
 791 |   }
 792 | 
 793 |   to {
 794 |     -webkit-transform: none;
 795 |     transform: none;
 796 |   }
 797 | }
 798 | 
 799 | .bounceInDown {
 800 |   -webkit-animation-name: bounceInDown;
 801 |   animation-name: bounceInDown;
 802 | }
 803 | 
 804 | @-webkit-keyframes bounceInLeft {
 805 |   from, 60%, 75%, 90%, to {
 806 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 807 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 808 |   }
 809 | 
 810 |   0% {
 811 |     opacity: 0;
 812 |     -webkit-transform: translate3d(-3000px, 0, 0);
 813 |     transform: translate3d(-3000px, 0, 0);
 814 |   }
 815 | 
 816 |   60% {
 817 |     opacity: 1;
 818 |     -webkit-transform: translate3d(25px, 0, 0);
 819 |     transform: translate3d(25px, 0, 0);
 820 |   }
 821 | 
 822 |   75% {
 823 |     -webkit-transform: translate3d(-10px, 0, 0);
 824 |     transform: translate3d(-10px, 0, 0);
 825 |   }
 826 | 
 827 |   90% {
 828 |     -webkit-transform: translate3d(5px, 0, 0);
 829 |     transform: translate3d(5px, 0, 0);
 830 |   }
 831 | 
 832 |   to {
 833 |     -webkit-transform: none;
 834 |     transform: none;
 835 |   }
 836 | }
 837 | 
 838 | @keyframes bounceInLeft {
 839 |   from, 60%, 75%, 90%, to {
 840 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 841 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 842 |   }
 843 | 
 844 |   0% {
 845 |     opacity: 0;
 846 |     -webkit-transform: translate3d(-3000px, 0, 0);
 847 |     transform: translate3d(-3000px, 0, 0);
 848 |   }
 849 | 
 850 |   60% {
 851 |     opacity: 1;
 852 |     -webkit-transform: translate3d(25px, 0, 0);
 853 |     transform: translate3d(25px, 0, 0);
 854 |   }
 855 | 
 856 |   75% {
 857 |     -webkit-transform: translate3d(-10px, 0, 0);
 858 |     transform: translate3d(-10px, 0, 0);
 859 |   }
 860 | 
 861 |   90% {
 862 |     -webkit-transform: translate3d(5px, 0, 0);
 863 |     transform: translate3d(5px, 0, 0);
 864 |   }
 865 | 
 866 |   to {
 867 |     -webkit-transform: none;
 868 |     transform: none;
 869 |   }
 870 | }
 871 | 
 872 | .bounceInLeft {
 873 |   -webkit-animation-name: bounceInLeft;
 874 |   animation-name: bounceInLeft;
 875 | }
 876 | 
 877 | @-webkit-keyframes bounceInRight {
 878 |   from, 60%, 75%, 90%, to {
 879 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 880 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 881 |   }
 882 | 
 883 |   from {
 884 |     opacity: 0;
 885 |     -webkit-transform: translate3d(3000px, 0, 0);
 886 |     transform: translate3d(3000px, 0, 0);
 887 |   }
 888 | 
 889 |   60% {
 890 |     opacity: 1;
 891 |     -webkit-transform: translate3d(-25px, 0, 0);
 892 |     transform: translate3d(-25px, 0, 0);
 893 |   }
 894 | 
 895 |   75% {
 896 |     -webkit-transform: translate3d(10px, 0, 0);
 897 |     transform: translate3d(10px, 0, 0);
 898 |   }
 899 | 
 900 |   90% {
 901 |     -webkit-transform: translate3d(-5px, 0, 0);
 902 |     transform: translate3d(-5px, 0, 0);
 903 |   }
 904 | 
 905 |   to {
 906 |     -webkit-transform: none;
 907 |     transform: none;
 908 |   }
 909 | }
 910 | 
 911 | @keyframes bounceInRight {
 912 |   from, 60%, 75%, 90%, to {
 913 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 914 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 915 |   }
 916 | 
 917 |   from {
 918 |     opacity: 0;
 919 |     -webkit-transform: translate3d(3000px, 0, 0);
 920 |     transform: translate3d(3000px, 0, 0);
 921 |   }
 922 | 
 923 |   60% {
 924 |     opacity: 1;
 925 |     -webkit-transform: translate3d(-25px, 0, 0);
 926 |     transform: translate3d(-25px, 0, 0);
 927 |   }
 928 | 
 929 |   75% {
 930 |     -webkit-transform: translate3d(10px, 0, 0);
 931 |     transform: translate3d(10px, 0, 0);
 932 |   }
 933 | 
 934 |   90% {
 935 |     -webkit-transform: translate3d(-5px, 0, 0);
 936 |     transform: translate3d(-5px, 0, 0);
 937 |   }
 938 | 
 939 |   to {
 940 |     -webkit-transform: none;
 941 |     transform: none;
 942 |   }
 943 | }
 944 | 
 945 | .bounceInRight {
 946 |   -webkit-animation-name: bounceInRight;
 947 |   animation-name: bounceInRight;
 948 | }
 949 | 
 950 | @-webkit-keyframes bounceInUp {
 951 |   from, 60%, 75%, 90%, to {
 952 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 953 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 954 |   }
 955 | 
 956 |   from {
 957 |     opacity: 0;
 958 |     -webkit-transform: translate3d(0, 3000px, 0);
 959 |     transform: translate3d(0, 3000px, 0);
 960 |   }
 961 | 
 962 |   60% {
 963 |     opacity: 1;
 964 |     -webkit-transform: translate3d(0, -20px, 0);
 965 |     transform: translate3d(0, -20px, 0);
 966 |   }
 967 | 
 968 |   75% {
 969 |     -webkit-transform: translate3d(0, 10px, 0);
 970 |     transform: translate3d(0, 10px, 0);
 971 |   }
 972 | 
 973 |   90% {
 974 |     -webkit-transform: translate3d(0, -5px, 0);
 975 |     transform: translate3d(0, -5px, 0);
 976 |   }
 977 | 
 978 |   to {
 979 |     -webkit-transform: translate3d(0, 0, 0);
 980 |     transform: translate3d(0, 0, 0);
 981 |   }
 982 | }
 983 | 
 984 | @keyframes bounceInUp {
 985 |   from, 60%, 75%, 90%, to {
 986 |     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 987 |     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 988 |   }
 989 | 
 990 |   from {
 991 |     opacity: 0;
 992 |     -webkit-transform: translate3d(0, 3000px, 0);
 993 |     transform: translate3d(0, 3000px, 0);
 994 |   }
 995 | 
 996 |   60% {
 997 |     opacity: 1;
 998 |     -webkit-transform: translate3d(0, -20px, 0);
 999 |     transform: translate3d(0, -20px, 0);
1000 |   }
1001 | 
1002 |   75% {
1003 |     -webkit-transform: translate3d(0, 10px, 0);
1004 |     transform: translate3d(0, 10px, 0);
1005 |   }
1006 | 
1007 |   90% {
1008 |     -webkit-transform: translate3d(0, -5px, 0);
1009 |     transform: translate3d(0, -5px, 0);
1010 |   }
1011 | 
1012 |   to {
1013 |     -webkit-transform: translate3d(0, 0, 0);
1014 |     transform: translate3d(0, 0, 0);
1015 |   }
1016 | }
1017 | 
1018 | .bounceInUp {
1019 |   -webkit-animation-name: bounceInUp;
1020 |   animation-name: bounceInUp;
1021 | }
1022 | 
1023 | @-webkit-keyframes bounceOut {
1024 |   20% {
1025 |     -webkit-transform: scale3d(.9, .9, .9);
1026 |     transform: scale3d(.9, .9, .9);
1027 |   }
1028 | 
1029 |   50%, 55% {
1030 |     opacity: 1;
1031 |     -webkit-transform: scale3d(1.1, 1.1, 1.1);
1032 |     transform: scale3d(1.1, 1.1, 1.1);
1033 |   }
1034 | 
1035 |   to {
1036 |     opacity: 0;
1037 |     -webkit-transform: scale3d(.3, .3, .3);
1038 |     transform: scale3d(.3, .3, .3);
1039 |   }
1040 | }
1041 | 
1042 | @keyframes bounceOut {
1043 |   20% {
1044 |     -webkit-transform: scale3d(.9, .9, .9);
1045 |     transform: scale3d(.9, .9, .9);
1046 |   }
1047 | 
1048 |   50%, 55% {
1049 |     opacity: 1;
1050 |     -webkit-transform: scale3d(1.1, 1.1, 1.1);
1051 |     transform: scale3d(1.1, 1.1, 1.1);
1052 |   }
1053 | 
1054 |   to {
1055 |     opacity: 0;
1056 |     -webkit-transform: scale3d(.3, .3, .3);
1057 |     transform: scale3d(.3, .3, .3);
1058 |   }
1059 | }
1060 | 
1061 | .bounceOut {
1062 |   -webkit-animation-name: bounceOut;
1063 |   animation-name: bounceOut;
1064 | }
1065 | 
1066 | @-webkit-keyframes bounceOutDown {
1067 |   20% {
1068 |     -webkit-transform: translate3d(0, 10px, 0);
1069 |     transform: translate3d(0, 10px, 0);
1070 |   }
1071 | 
1072 |   40%, 45% {
1073 |     opacity: 1;
1074 |     -webkit-transform: translate3d(0, -20px, 0);
1075 |     transform: translate3d(0, -20px, 0);
1076 |   }
1077 | 
1078 |   to {
1079 |     opacity: 0;
1080 |     -webkit-transform: translate3d(0, 2000px, 0);
1081 |     transform: translate3d(0, 2000px, 0);
1082 |   }
1083 | }
1084 | 
1085 | @keyframes bounceOutDown {
1086 |   20% {
1087 |     -webkit-transform: translate3d(0, 10px, 0);
1088 |     transform: translate3d(0, 10px, 0);
1089 |   }
1090 | 
1091 |   40%, 45% {
1092 |     opacity: 1;
1093 |     -webkit-transform: translate3d(0, -20px, 0);
1094 |     transform: translate3d(0, -20px, 0);
1095 |   }
1096 | 
1097 |   to {
1098 |     opacity: 0;
1099 |     -webkit-transform: translate3d(0, 2000px, 0);
1100 |     transform: translate3d(0, 2000px, 0);
1101 |   }
1102 | }
1103 | 
1104 | .bounceOutDown {
1105 |   -webkit-animation-name: bounceOutDown;
1106 |   animation-name: bounceOutDown;
1107 | }
1108 | 
1109 | @-webkit-keyframes bounceOutLeft {
1110 |   20% {
1111 |     opacity: 1;
1112 |     -webkit-transform: translate3d(20px, 0, 0);
1113 |     transform: translate3d(20px, 0, 0);
1114 |   }
1115 | 
1116 |   to {
1117 |     opacity: 0;
1118 |     -webkit-transform: translate3d(-2000px, 0, 0);
1119 |     transform: translate3d(-2000px, 0, 0);
1120 |   }
1121 | }
1122 | 
1123 | @keyframes bounceOutLeft {
1124 |   20% {
1125 |     opacity: 1;
1126 |     -webkit-transform: translate3d(20px, 0, 0);
1127 |     transform: translate3d(20px, 0, 0);
1128 |   }
1129 | 
1130 |   to {
1131 |     opacity: 0;
1132 |     -webkit-transform: translate3d(-2000px, 0, 0);
1133 |     transform: translate3d(-2000px, 0, 0);
1134 |   }
1135 | }
1136 | 
1137 | .bounceOutLeft {
1138 |   -webkit-animation-name: bounceOutLeft;
1139 |   animation-name: bounceOutLeft;
1140 | }
1141 | 
1142 | @-webkit-keyframes bounceOutRight {
1143 |   20% {
1144 |     opacity: 1;
1145 |     -webkit-transform: translate3d(-20px, 0, 0);
1146 |     transform: translate3d(-20px, 0, 0);
1147 |   }
1148 | 
1149 |   to {
1150 |     opacity: 0;
1151 |     -webkit-transform: translate3d(2000px, 0, 0);
1152 |     transform: translate3d(2000px, 0, 0);
1153 |   }
1154 | }
1155 | 
1156 | @keyframes bounceOutRight {
1157 |   20% {
1158 |     opacity: 1;
1159 |     -webkit-transform: translate3d(-20px, 0, 0);
1160 |     transform: translate3d(-20px, 0, 0);
1161 |   }
1162 | 
1163 |   to {
1164 |     opacity: 0;
1165 |     -webkit-transform: translate3d(2000px, 0, 0);
1166 |     transform: translate3d(2000px, 0, 0);
1167 |   }
1168 | }
1169 | 
1170 | .bounceOutRight {
1171 |   -webkit-animation-name: bounceOutRight;
1172 |   animation-name: bounceOutRight;
1173 | }
1174 | 
1175 | @-webkit-keyframes bounceOutUp {
1176 |   20% {
1177 |     -webkit-transform: translate3d(0, -10px, 0);
1178 |     transform: translate3d(0, -10px, 0);
1179 |   }
1180 | 
1181 |   40%, 45% {
1182 |     opacity: 1;
1183 |     -webkit-transform: translate3d(0, 20px, 0);
1184 |     transform: translate3d(0, 20px, 0);
1185 |   }
1186 | 
1187 |   to {
1188 |     opacity: 0;
1189 |     -webkit-transform: translate3d(0, -2000px, 0);
1190 |     transform: translate3d(0, -2000px, 0);
1191 |   }
1192 | }
1193 | 
1194 | @keyframes bounceOutUp {
1195 |   20% {
1196 |     -webkit-transform: translate3d(0, -10px, 0);
1197 |     transform: translate3d(0, -10px, 0);
1198 |   }
1199 | 
1200 |   40%, 45% {
1201 |     opacity: 1;
1202 |     -webkit-transform: translate3d(0, 20px, 0);
1203 |     transform: translate3d(0, 20px, 0);
1204 |   }
1205 | 
1206 |   to {
1207 |     opacity: 0;
1208 |     -webkit-transform: translate3d(0, -2000px, 0);
1209 |     transform: translate3d(0, -2000px, 0);
1210 |   }
1211 | }
1212 | 
1213 | .bounceOutUp {
1214 |   -webkit-animation-name: bounceOutUp;
1215 |   animation-name: bounceOutUp;
1216 | }
1217 | 
1218 | @-webkit-keyframes fadeIn {
1219 |   from {
1220 |     opacity: 0;
1221 |   }
1222 | 
1223 |   to {
1224 |     opacity: 1;
1225 |   }
1226 | }
1227 | 
1228 | @keyframes fadeIn {
1229 |   from {
1230 |     opacity: 0;
1231 |   }
1232 | 
1233 |   to {
1234 |     opacity: 1;
1235 |   }
1236 | }
1237 | 
1238 | .fadeIn {
1239 |   -webkit-animation-name: fadeIn;
1240 |   animation-name: fadeIn;
1241 | }
1242 | 
1243 | @-webkit-keyframes fadeInDown {
1244 |   from {
1245 |     opacity: 0;
1246 |     -webkit-transform: translate3d(0, -100%, 0);
1247 |     transform: translate3d(0, -100%, 0);
1248 |   }
1249 | 
1250 |   to {
1251 |     opacity: 1;
1252 |     -webkit-transform: none;
1253 |     transform: none;
1254 |   }
1255 | }
1256 | 
1257 | @keyframes fadeInDown {
1258 |   from {
1259 |     opacity: 0;
1260 |     -webkit-transform: translate3d(0, -100%, 0);
1261 |     transform: translate3d(0, -100%, 0);
1262 |   }
1263 | 
1264 |   to {
1265 |     opacity: 1;
1266 |     -webkit-transform: none;
1267 |     transform: none;
1268 |   }
1269 | }
1270 | 
1271 | .fadeInDown {
1272 |   -webkit-animation-name: fadeInDown;
1273 |   animation-name: fadeInDown;
1274 | }
1275 | 
1276 | @-webkit-keyframes fadeInDownBig {
1277 |   from {
1278 |     opacity: 0;
1279 |     -webkit-transform: translate3d(0, -2000px, 0);
1280 |     transform: translate3d(0, -2000px, 0);
1281 |   }
1282 | 
1283 |   to {
1284 |     opacity: 1;
1285 |     -webkit-transform: none;
1286 |     transform: none;
1287 |   }
1288 | }
1289 | 
1290 | @keyframes fadeInDownBig {
1291 |   from {
1292 |     opacity: 0;
1293 |     -webkit-transform: translate3d(0, -2000px, 0);
1294 |     transform: translate3d(0, -2000px, 0);
1295 |   }
1296 | 
1297 |   to {
1298 |     opacity: 1;
1299 |     -webkit-transform: none;
1300 |     transform: none;
1301 |   }
1302 | }
1303 | 
1304 | .fadeInDownBig {
1305 |   -webkit-animation-name: fadeInDownBig;
1306 |   animation-name: fadeInDownBig;
1307 | }
1308 | 
1309 | @-webkit-keyframes fadeInLeft {
1310 |   from {
1311 |     opacity: 0;
1312 |     -webkit-transform: translate3d(-100%, 0, 0);
1313 |     transform: translate3d(-100%, 0, 0);
1314 |   }
1315 | 
1316 |   to {
1317 |     opacity: 1;
1318 |     -webkit-transform: none;
1319 |     transform: none;
1320 |   }
1321 | }
1322 | 
1323 | @keyframes fadeInLeft {
1324 |   from {
1325 |     opacity: 0;
1326 |     -webkit-transform: translate3d(-100%, 0, 0);
1327 |     transform: translate3d(-100%, 0, 0);
1328 |   }
1329 | 
1330 |   to {
1331 |     opacity: 1;
1332 |     -webkit-transform: none;
1333 |     transform: none;
1334 |   }
1335 | }
1336 | 
1337 | .fadeInLeft {
1338 |   -webkit-animation-name: fadeInLeft;
1339 |   animation-name: fadeInLeft;
1340 | }
1341 | 
1342 | @-webkit-keyframes fadeInLeftBig {
1343 |   from {
1344 |     opacity: 0;
1345 |     -webkit-transform: translate3d(-2000px, 0, 0);
1346 |     transform: translate3d(-2000px, 0, 0);
1347 |   }
1348 | 
1349 |   to {
1350 |     opacity: 1;
1351 |     -webkit-transform: none;
1352 |     transform: none;
1353 |   }
1354 | }
1355 | 
1356 | @keyframes fadeInLeftBig {
1357 |   from {
1358 |     opacity: 0;
1359 |     -webkit-transform: translate3d(-2000px, 0, 0);
1360 |     transform: translate3d(-2000px, 0, 0);
1361 |   }
1362 | 
1363 |   to {
1364 |     opacity: 1;
1365 |     -webkit-transform: none;
1366 |     transform: none;
1367 |   }
1368 | }
1369 | 
1370 | .fadeInLeftBig {
1371 |   -webkit-animation-name: fadeInLeftBig;
1372 |   animation-name: fadeInLeftBig;
1373 | }
1374 | 
1375 | @-webkit-keyframes fadeInRight {
1376 |   from {
1377 |     opacity: 0;
1378 |     -webkit-transform: translate3d(100%, 0, 0);
1379 |     transform: translate3d(100%, 0, 0);
1380 |   }
1381 | 
1382 |   to {
1383 |     opacity: 1;
1384 |     -webkit-transform: none;
1385 |     transform: none;
1386 |   }
1387 | }
1388 | 
1389 | @keyframes fadeInRight {
1390 |   from {
1391 |     opacity: 0;
1392 |     -webkit-transform: translate3d(100%, 0, 0);
1393 |     transform: translate3d(100%, 0, 0);
1394 |   }
1395 | 
1396 |   to {
1397 |     opacity: 1;
1398 |     -webkit-transform: none;
1399 |     transform: none;
1400 |   }
1401 | }
1402 | 
1403 | .fadeInRight {
1404 |   -webkit-animation-name: fadeInRight;
1405 |   animation-name: fadeInRight;
1406 | }
1407 | 
1408 | @-webkit-keyframes fadeInRightBig {
1409 |   from {
1410 |     opacity: 0;
1411 |     -webkit-transform: translate3d(2000px, 0, 0);
1412 |     transform: translate3d(2000px, 0, 0);
1413 |   }
1414 | 
1415 |   to {
1416 |     opacity: 1;
1417 |     -webkit-transform: none;
1418 |     transform: none;
1419 |   }
1420 | }
1421 | 
1422 | @keyframes fadeInRightBig {
1423 |   from {
1424 |     opacity: 0;
1425 |     -webkit-transform: translate3d(2000px, 0, 0);
1426 |     transform: translate3d(2000px, 0, 0);
1427 |   }
1428 | 
1429 |   to {
1430 |     opacity: 1;
1431 |     -webkit-transform: none;
1432 |     transform: none;
1433 |   }
1434 | }
1435 | 
1436 | .fadeInRightBig {
1437 |   -webkit-animation-name: fadeInRightBig;
1438 |   animation-name: fadeInRightBig;
1439 | }
1440 | 
1441 | @-webkit-keyframes fadeInUp {
1442 |   from {
1443 |     opacity: 0;
1444 |     -webkit-transform: translate3d(0, 100%, 0);
1445 |     transform: translate3d(0, 100%, 0);
1446 |   }
1447 | 
1448 |   to {
1449 |     opacity: 1;
1450 |     -webkit-transform: none;
1451 |     transform: none;
1452 |   }
1453 | }
1454 | 
1455 | @keyframes fadeInUp {
1456 |   from {
1457 |     opacity: 0;
1458 |     -webkit-transform: translate3d(0, 100%, 0);
1459 |     transform: translate3d(0, 100%, 0);
1460 |   }
1461 | 
1462 |   to {
1463 |     opacity: 1;
1464 |     -webkit-transform: none;
1465 |     transform: none;
1466 |   }
1467 | }
1468 | 
1469 | .fadeInUp {
1470 |   -webkit-animation-name: fadeInUp;
1471 |   animation-name: fadeInUp;
1472 | }
1473 | 
1474 | @-webkit-keyframes fadeInUpBig {
1475 |   from {
1476 |     opacity: 0;
1477 |     -webkit-transform: translate3d(0, 2000px, 0);
1478 |     transform: translate3d(0, 2000px, 0);
1479 |   }
1480 | 
1481 |   to {
1482 |     opacity: 1;
1483 |     -webkit-transform: none;
1484 |     transform: none;
1485 |   }
1486 | }
1487 | 
1488 | @keyframes fadeInUpBig {
1489 |   from {
1490 |     opacity: 0;
1491 |     -webkit-transform: translate3d(0, 2000px, 0);
1492 |     transform: translate3d(0, 2000px, 0);
1493 |   }
1494 | 
1495 |   to {
1496 |     opacity: 1;
1497 |     -webkit-transform: none;
1498 |     transform: none;
1499 |   }
1500 | }
1501 | 
1502 | .fadeInUpBig {
1503 |   -webkit-animation-name: fadeInUpBig;
1504 |   animation-name: fadeInUpBig;
1505 | }
1506 | 
1507 | @-webkit-keyframes fadeOut {
1508 |   from {
1509 |     opacity: 1;
1510 |   }
1511 | 
1512 |   to {
1513 |     opacity: 0;
1514 |   }
1515 | }
1516 | 
1517 | @keyframes fadeOut {
1518 |   from {
1519 |     opacity: 1;
1520 |   }
1521 | 
1522 |   to {
1523 |     opacity: 0;
1524 |   }
1525 | }
1526 | 
1527 | .fadeOut {
1528 |   -webkit-animation-name: fadeOut;
1529 |   animation-name: fadeOut;
1530 | }
1531 | 
1532 | @-webkit-keyframes fadeOutDown {
1533 |   from {
1534 |     opacity: 1;
1535 |   }
1536 | 
1537 |   to {
1538 |     opacity: 0;
1539 |     -webkit-transform: translate3d(0, 100%, 0);
1540 |     transform: translate3d(0, 100%, 0);
1541 |   }
1542 | }
1543 | 
1544 | @keyframes fadeOutDown {
1545 |   from {
1546 |     opacity: 1;
1547 |   }
1548 | 
1549 |   to {
1550 |     opacity: 0;
1551 |     -webkit-transform: translate3d(0, 100%, 0);
1552 |     transform: translate3d(0, 100%, 0);
1553 |   }
1554 | }
1555 | 
1556 | .fadeOutDown {
1557 |   -webkit-animation-name: fadeOutDown;
1558 |   animation-name: fadeOutDown;
1559 | }
1560 | 
1561 | @-webkit-keyframes fadeOutDownBig {
1562 |   from {
1563 |     opacity: 1;
1564 |   }
1565 | 
1566 |   to {
1567 |     opacity: 0;
1568 |     -webkit-transform: translate3d(0, 2000px, 0);
1569 |     transform: translate3d(0, 2000px, 0);
1570 |   }
1571 | }
1572 | 
1573 | @keyframes fadeOutDownBig {
1574 |   from {
1575 |     opacity: 1;
1576 |   }
1577 | 
1578 |   to {
1579 |     opacity: 0;
1580 |     -webkit-transform: translate3d(0, 2000px, 0);
1581 |     transform: translate3d(0, 2000px, 0);
1582 |   }
1583 | }
1584 | 
1585 | .fadeOutDownBig {
1586 |   -webkit-animation-name: fadeOutDownBig;
1587 |   animation-name: fadeOutDownBig;
1588 | }
1589 | 
1590 | @-webkit-keyframes fadeOutLeft {
1591 |   from {
1592 |     opacity: 1;
1593 |   }
1594 | 
1595 |   to {
1596 |     opacity: 0;
1597 |     -webkit-transform: translate3d(-100%, 0, 0);
1598 |     transform: translate3d(-100%, 0, 0);
1599 |   }
1600 | }
1601 | 
1602 | @keyframes fadeOutLeft {
1603 |   from {
1604 |     opacity: 1;
1605 |   }
1606 | 
1607 |   to {
1608 |     opacity: 0;
1609 |     -webkit-transform: translate3d(-100%, 0, 0);
1610 |     transform: translate3d(-100%, 0, 0);
1611 |   }
1612 | }
1613 | 
1614 | .fadeOutLeft {
1615 |   -webkit-animation-name: fadeOutLeft;
1616 |   animation-name: fadeOutLeft;
1617 | }
1618 | 
1619 | @-webkit-keyframes fadeOutLeftBig {
1620 |   from {
1621 |     opacity: 1;
1622 |   }
1623 | 
1624 |   to {
1625 |     opacity: 0;
1626 |     -webkit-transform: translate3d(-2000px, 0, 0);
1627 |     transform: translate3d(-2000px, 0, 0);
1628 |   }
1629 | }
1630 | 
1631 | @keyframes fadeOutLeftBig {
1632 |   from {
1633 |     opacity: 1;
1634 |   }
1635 | 
1636 |   to {
1637 |     opacity: 0;
1638 |     -webkit-transform: translate3d(-2000px, 0, 0);
1639 |     transform: translate3d(-2000px, 0, 0);
1640 |   }
1641 | }
1642 | 
1643 | .fadeOutLeftBig {
1644 |   -webkit-animation-name: fadeOutLeftBig;
1645 |   animation-name: fadeOutLeftBig;
1646 | }
1647 | 
1648 | @-webkit-keyframes fadeOutRight {
1649 |   from {
1650 |     opacity: 1;
1651 |   }
1652 | 
1653 |   to {
1654 |     opacity: 0;
1655 |     -webkit-transform: translate3d(100%, 0, 0);
1656 |     transform: translate3d(100%, 0, 0);
1657 |   }
1658 | }
1659 | 
1660 | @keyframes fadeOutRight {
1661 |   from {
1662 |     opacity: 1;
1663 |   }
1664 | 
1665 |   to {
1666 |     opacity: 0;
1667 |     -webkit-transform: translate3d(100%, 0, 0);
1668 |     transform: translate3d(100%, 0, 0);
1669 |   }
1670 | }
1671 | 
1672 | .fadeOutRight {
1673 |   -webkit-animation-name: fadeOutRight;
1674 |   animation-name: fadeOutRight;
1675 | }
1676 | 
1677 | @-webkit-keyframes fadeOutRightBig {
1678 |   from {
1679 |     opacity: 1;
1680 |   }
1681 | 
1682 |   to {
1683 |     opacity: 0;
1684 |     -webkit-transform: translate3d(2000px, 0, 0);
1685 |     transform: translate3d(2000px, 0, 0);
1686 |   }
1687 | }
1688 | 
1689 | @keyframes fadeOutRightBig {
1690 |   from {
1691 |     opacity: 1;
1692 |   }
1693 | 
1694 |   to {
1695 |     opacity: 0;
1696 |     -webkit-transform: translate3d(2000px, 0, 0);
1697 |     transform: translate3d(2000px, 0, 0);
1698 |   }
1699 | }
1700 | 
1701 | .fadeOutRightBig {
1702 |   -webkit-animation-name: fadeOutRightBig;
1703 |   animation-name: fadeOutRightBig;
1704 | }
1705 | 
1706 | @-webkit-keyframes fadeOutUp {
1707 |   from {
1708 |     opacity: 1;
1709 |   }
1710 | 
1711 |   to {
1712 |     opacity: 0;
1713 |     -webkit-transform: translate3d(0, -100%, 0);
1714 |     transform: translate3d(0, -100%, 0);
1715 |   }
1716 | }
1717 | 
1718 | @keyframes fadeOutUp {
1719 |   from {
1720 |     opacity: 1;
1721 |   }
1722 | 
1723 |   to {
1724 |     opacity: 0;
1725 |     -webkit-transform: translate3d(0, -100%, 0);
1726 |     transform: translate3d(0, -100%, 0);
1727 |   }
1728 | }
1729 | 
1730 | .fadeOutUp {
1731 |   -webkit-animation-name: fadeOutUp;
1732 |   animation-name: fadeOutUp;
1733 | }
1734 | 
1735 | @-webkit-keyframes fadeOutUpBig {
1736 |   from {
1737 |     opacity: 1;
1738 |   }
1739 | 
1740 |   to {
1741 |     opacity: 0;
1742 |     -webkit-transform: translate3d(0, -2000px, 0);
1743 |     transform: translate3d(0, -2000px, 0);
1744 |   }
1745 | }
1746 | 
1747 | @keyframes fadeOutUpBig {
1748 |   from {
1749 |     opacity: 1;
1750 |   }
1751 | 
1752 |   to {
1753 |     opacity: 0;
1754 |     -webkit-transform: translate3d(0, -2000px, 0);
1755 |     transform: translate3d(0, -2000px, 0);
1756 |   }
1757 | }
1758 | 
1759 | .fadeOutUpBig {
1760 |   -webkit-animation-name: fadeOutUpBig;
1761 |   animation-name: fadeOutUpBig;
1762 | }
1763 | 
1764 | @-webkit-keyframes flip {
1765 |   from {
1766 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1767 |     transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1768 |     -webkit-animation-timing-function: ease-out;
1769 |     animation-timing-function: ease-out;
1770 |   }
1771 | 
1772 |   40% {
1773 |     -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1774 |     transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1775 |     -webkit-animation-timing-function: ease-out;
1776 |     animation-timing-function: ease-out;
1777 |   }
1778 | 
1779 |   50% {
1780 |     -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1781 |     transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1782 |     -webkit-animation-timing-function: ease-in;
1783 |     animation-timing-function: ease-in;
1784 |   }
1785 | 
1786 |   80% {
1787 |     -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
1788 |     transform: perspective(400px) scale3d(.95, .95, .95);
1789 |     -webkit-animation-timing-function: ease-in;
1790 |     animation-timing-function: ease-in;
1791 |   }
1792 | 
1793 |   to {
1794 |     -webkit-transform: perspective(400px);
1795 |     transform: perspective(400px);
1796 |     -webkit-animation-timing-function: ease-in;
1797 |     animation-timing-function: ease-in;
1798 |   }
1799 | }
1800 | 
1801 | @keyframes flip {
1802 |   from {
1803 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1804 |     transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1805 |     -webkit-animation-timing-function: ease-out;
1806 |     animation-timing-function: ease-out;
1807 |   }
1808 | 
1809 |   40% {
1810 |     -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1811 |     transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1812 |     -webkit-animation-timing-function: ease-out;
1813 |     animation-timing-function: ease-out;
1814 |   }
1815 | 
1816 |   50% {
1817 |     -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1818 |     transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1819 |     -webkit-animation-timing-function: ease-in;
1820 |     animation-timing-function: ease-in;
1821 |   }
1822 | 
1823 |   80% {
1824 |     -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
1825 |     transform: perspective(400px) scale3d(.95, .95, .95);
1826 |     -webkit-animation-timing-function: ease-in;
1827 |     animation-timing-function: ease-in;
1828 |   }
1829 | 
1830 |   to {
1831 |     -webkit-transform: perspective(400px);
1832 |     transform: perspective(400px);
1833 |     -webkit-animation-timing-function: ease-in;
1834 |     animation-timing-function: ease-in;
1835 |   }
1836 | }
1837 | 
1838 | .animated.flip {
1839 |   -webkit-backface-visibility: visible;
1840 |   backface-visibility: visible;
1841 |   -webkit-animation-name: flip;
1842 |   animation-name: flip;
1843 | }
1844 | 
1845 | @-webkit-keyframes flipInX {
1846 |   from {
1847 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1848 |     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1849 |     -webkit-animation-timing-function: ease-in;
1850 |     animation-timing-function: ease-in;
1851 |     opacity: 0;
1852 |   }
1853 | 
1854 |   40% {
1855 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1856 |     transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1857 |     -webkit-animation-timing-function: ease-in;
1858 |     animation-timing-function: ease-in;
1859 |   }
1860 | 
1861 |   60% {
1862 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1863 |     transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1864 |     opacity: 1;
1865 |   }
1866 | 
1867 |   80% {
1868 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1869 |     transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1870 |   }
1871 | 
1872 |   to {
1873 |     -webkit-transform: perspective(400px);
1874 |     transform: perspective(400px);
1875 |   }
1876 | }
1877 | 
1878 | @keyframes flipInX {
1879 |   from {
1880 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1881 |     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1882 |     -webkit-animation-timing-function: ease-in;
1883 |     animation-timing-function: ease-in;
1884 |     opacity: 0;
1885 |   }
1886 | 
1887 |   40% {
1888 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1889 |     transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1890 |     -webkit-animation-timing-function: ease-in;
1891 |     animation-timing-function: ease-in;
1892 |   }
1893 | 
1894 |   60% {
1895 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1896 |     transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1897 |     opacity: 1;
1898 |   }
1899 | 
1900 |   80% {
1901 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1902 |     transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1903 |   }
1904 | 
1905 |   to {
1906 |     -webkit-transform: perspective(400px);
1907 |     transform: perspective(400px);
1908 |   }
1909 | }
1910 | 
1911 | .flipInX {
1912 |   -webkit-backface-visibility: visible !important;
1913 |   backface-visibility: visible !important;
1914 |   -webkit-animation-name: flipInX;
1915 |   animation-name: flipInX;
1916 | }
1917 | 
1918 | @-webkit-keyframes flipInY {
1919 |   from {
1920 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1921 |     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1922 |     -webkit-animation-timing-function: ease-in;
1923 |     animation-timing-function: ease-in;
1924 |     opacity: 0;
1925 |   }
1926 | 
1927 |   40% {
1928 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1929 |     transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1930 |     -webkit-animation-timing-function: ease-in;
1931 |     animation-timing-function: ease-in;
1932 |   }
1933 | 
1934 |   60% {
1935 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1936 |     transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1937 |     opacity: 1;
1938 |   }
1939 | 
1940 |   80% {
1941 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1942 |     transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1943 |   }
1944 | 
1945 |   to {
1946 |     -webkit-transform: perspective(400px);
1947 |     transform: perspective(400px);
1948 |   }
1949 | }
1950 | 
1951 | @keyframes flipInY {
1952 |   from {
1953 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1954 |     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
1955 |     -webkit-animation-timing-function: ease-in;
1956 |     animation-timing-function: ease-in;
1957 |     opacity: 0;
1958 |   }
1959 | 
1960 |   40% {
1961 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1962 |     transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
1963 |     -webkit-animation-timing-function: ease-in;
1964 |     animation-timing-function: ease-in;
1965 |   }
1966 | 
1967 |   60% {
1968 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1969 |     transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
1970 |     opacity: 1;
1971 |   }
1972 | 
1973 |   80% {
1974 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1975 |     transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
1976 |   }
1977 | 
1978 |   to {
1979 |     -webkit-transform: perspective(400px);
1980 |     transform: perspective(400px);
1981 |   }
1982 | }
1983 | 
1984 | .flipInY {
1985 |   -webkit-backface-visibility: visible !important;
1986 |   backface-visibility: visible !important;
1987 |   -webkit-animation-name: flipInY;
1988 |   animation-name: flipInY;
1989 | }
1990 | 
1991 | @-webkit-keyframes flipOutX {
1992 |   from {
1993 |     -webkit-transform: perspective(400px);
1994 |     transform: perspective(400px);
1995 |   }
1996 | 
1997 |   30% {
1998 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1999 |     transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2000 |     opacity: 1;
2001 |   }
2002 | 
2003 |   to {
2004 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2005 |     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2006 |     opacity: 0;
2007 |   }
2008 | }
2009 | 
2010 | @keyframes flipOutX {
2011 |   from {
2012 |     -webkit-transform: perspective(400px);
2013 |     transform: perspective(400px);
2014 |   }
2015 | 
2016 |   30% {
2017 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2018 |     transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
2019 |     opacity: 1;
2020 |   }
2021 | 
2022 |   to {
2023 |     -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2024 |     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
2025 |     opacity: 0;
2026 |   }
2027 | }
2028 | 
2029 | .flipOutX {
2030 |   -webkit-animation-name: flipOutX;
2031 |   animation-name: flipOutX;
2032 |   -webkit-backface-visibility: visible !important;
2033 |   backface-visibility: visible !important;
2034 | }
2035 | 
2036 | @-webkit-keyframes flipOutY {
2037 |   from {
2038 |     -webkit-transform: perspective(400px);
2039 |     transform: perspective(400px);
2040 |   }
2041 | 
2042 |   30% {
2043 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2044 |     transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2045 |     opacity: 1;
2046 |   }
2047 | 
2048 |   to {
2049 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2050 |     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2051 |     opacity: 0;
2052 |   }
2053 | }
2054 | 
2055 | @keyframes flipOutY {
2056 |   from {
2057 |     -webkit-transform: perspective(400px);
2058 |     transform: perspective(400px);
2059 |   }
2060 | 
2061 |   30% {
2062 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2063 |     transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
2064 |     opacity: 1;
2065 |   }
2066 | 
2067 |   to {
2068 |     -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2069 |     transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
2070 |     opacity: 0;
2071 |   }
2072 | }
2073 | 
2074 | .flipOutY {
2075 |   -webkit-backface-visibility: visible !important;
2076 |   backface-visibility: visible !important;
2077 |   -webkit-animation-name: flipOutY;
2078 |   animation-name: flipOutY;
2079 | }
2080 | 
2081 | @-webkit-keyframes lightSpeedIn {
2082 |   from {
2083 |     -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
2084 |     transform: translate3d(100%, 0, 0) skewX(-30deg);
2085 |     opacity: 0;
2086 |   }
2087 | 
2088 |   60% {
2089 |     -webkit-transform: skewX(20deg);
2090 |     transform: skewX(20deg);
2091 |     opacity: 1;
2092 |   }
2093 | 
2094 |   80% {
2095 |     -webkit-transform: skewX(-5deg);
2096 |     transform: skewX(-5deg);
2097 |     opacity: 1;
2098 |   }
2099 | 
2100 |   to {
2101 |     -webkit-transform: none;
2102 |     transform: none;
2103 |     opacity: 1;
2104 |   }
2105 | }
2106 | 
2107 | @keyframes lightSpeedIn {
2108 |   from {
2109 |     -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
2110 |     transform: translate3d(100%, 0, 0) skewX(-30deg);
2111 |     opacity: 0;
2112 |   }
2113 | 
2114 |   60% {
2115 |     -webkit-transform: skewX(20deg);
2116 |     transform: skewX(20deg);
2117 |     opacity: 1;
2118 |   }
2119 | 
2120 |   80% {
2121 |     -webkit-transform: skewX(-5deg);
2122 |     transform: skewX(-5deg);
2123 |     opacity: 1;
2124 |   }
2125 | 
2126 |   to {
2127 |     -webkit-transform: none;
2128 |     transform: none;
2129 |     opacity: 1;
2130 |   }
2131 | }
2132 | 
2133 | .lightSpeedIn {
2134 |   -webkit-animation-name: lightSpeedIn;
2135 |   animation-name: lightSpeedIn;
2136 |   -webkit-animation-timing-function: ease-out;
2137 |   animation-timing-function: ease-out;
2138 | }
2139 | 
2140 | @-webkit-keyframes lightSpeedOut {
2141 |   from {
2142 |     opacity: 1;
2143 |   }
2144 | 
2145 |   to {
2146 |     -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
2147 |     transform: translate3d(100%, 0, 0) skewX(30deg);
2148 |     opacity: 0;
2149 |   }
2150 | }
2151 | 
2152 | @keyframes lightSpeedOut {
2153 |   from {
2154 |     opacity: 1;
2155 |   }
2156 | 
2157 |   to {
2158 |     -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
2159 |     transform: translate3d(100%, 0, 0) skewX(30deg);
2160 |     opacity: 0;
2161 |   }
2162 | }
2163 | 
2164 | .lightSpeedOut {
2165 |   -webkit-animation-name: lightSpeedOut;
2166 |   animation-name: lightSpeedOut;
2167 |   -webkit-animation-timing-function: ease-in;
2168 |   animation-timing-function: ease-in;
2169 | }
2170 | 
2171 | @-webkit-keyframes rotateIn {
2172 |   from {
2173 |     -webkit-transform-origin: center;
2174 |     transform-origin: center;
2175 |     -webkit-transform: rotate3d(0, 0, 1, -200deg);
2176 |     transform: rotate3d(0, 0, 1, -200deg);
2177 |     opacity: 0;
2178 |   }
2179 | 
2180 |   to {
2181 |     -webkit-transform-origin: center;
2182 |     transform-origin: center;
2183 |     -webkit-transform: none;
2184 |     transform: none;
2185 |     opacity: 1;
2186 |   }
2187 | }
2188 | 
2189 | @keyframes rotateIn {
2190 |   from {
2191 |     -webkit-transform-origin: center;
2192 |     transform-origin: center;
2193 |     -webkit-transform: rotate3d(0, 0, 1, -200deg);
2194 |     transform: rotate3d(0, 0, 1, -200deg);
2195 |     opacity: 0;
2196 |   }
2197 | 
2198 |   to {
2199 |     -webkit-transform-origin: center;
2200 |     transform-origin: center;
2201 |     -webkit-transform: none;
2202 |     transform: none;
2203 |     opacity: 1;
2204 |   }
2205 | }
2206 | 
2207 | .rotateIn {
2208 |   -webkit-animation-name: rotateIn;
2209 |   animation-name: rotateIn;
2210 | }
2211 | 
2212 | @-webkit-keyframes rotateInDownLeft {
2213 |   from {
2214 |     -webkit-transform-origin: left bottom;
2215 |     transform-origin: left bottom;
2216 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2217 |     transform: rotate3d(0, 0, 1, -45deg);
2218 |     opacity: 0;
2219 |   }
2220 | 
2221 |   to {
2222 |     -webkit-transform-origin: left bottom;
2223 |     transform-origin: left bottom;
2224 |     -webkit-transform: none;
2225 |     transform: none;
2226 |     opacity: 1;
2227 |   }
2228 | }
2229 | 
2230 | @keyframes rotateInDownLeft {
2231 |   from {
2232 |     -webkit-transform-origin: left bottom;
2233 |     transform-origin: left bottom;
2234 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2235 |     transform: rotate3d(0, 0, 1, -45deg);
2236 |     opacity: 0;
2237 |   }
2238 | 
2239 |   to {
2240 |     -webkit-transform-origin: left bottom;
2241 |     transform-origin: left bottom;
2242 |     -webkit-transform: none;
2243 |     transform: none;
2244 |     opacity: 1;
2245 |   }
2246 | }
2247 | 
2248 | .rotateInDownLeft {
2249 |   -webkit-animation-name: rotateInDownLeft;
2250 |   animation-name: rotateInDownLeft;
2251 | }
2252 | 
2253 | @-webkit-keyframes rotateInDownRight {
2254 |   from {
2255 |     -webkit-transform-origin: right bottom;
2256 |     transform-origin: right bottom;
2257 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2258 |     transform: rotate3d(0, 0, 1, 45deg);
2259 |     opacity: 0;
2260 |   }
2261 | 
2262 |   to {
2263 |     -webkit-transform-origin: right bottom;
2264 |     transform-origin: right bottom;
2265 |     -webkit-transform: none;
2266 |     transform: none;
2267 |     opacity: 1;
2268 |   }
2269 | }
2270 | 
2271 | @keyframes rotateInDownRight {
2272 |   from {
2273 |     -webkit-transform-origin: right bottom;
2274 |     transform-origin: right bottom;
2275 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2276 |     transform: rotate3d(0, 0, 1, 45deg);
2277 |     opacity: 0;
2278 |   }
2279 | 
2280 |   to {
2281 |     -webkit-transform-origin: right bottom;
2282 |     transform-origin: right bottom;
2283 |     -webkit-transform: none;
2284 |     transform: none;
2285 |     opacity: 1;
2286 |   }
2287 | }
2288 | 
2289 | .rotateInDownRight {
2290 |   -webkit-animation-name: rotateInDownRight;
2291 |   animation-name: rotateInDownRight;
2292 | }
2293 | 
2294 | @-webkit-keyframes rotateInUpLeft {
2295 |   from {
2296 |     -webkit-transform-origin: left bottom;
2297 |     transform-origin: left bottom;
2298 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2299 |     transform: rotate3d(0, 0, 1, 45deg);
2300 |     opacity: 0;
2301 |   }
2302 | 
2303 |   to {
2304 |     -webkit-transform-origin: left bottom;
2305 |     transform-origin: left bottom;
2306 |     -webkit-transform: none;
2307 |     transform: none;
2308 |     opacity: 1;
2309 |   }
2310 | }
2311 | 
2312 | @keyframes rotateInUpLeft {
2313 |   from {
2314 |     -webkit-transform-origin: left bottom;
2315 |     transform-origin: left bottom;
2316 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2317 |     transform: rotate3d(0, 0, 1, 45deg);
2318 |     opacity: 0;
2319 |   }
2320 | 
2321 |   to {
2322 |     -webkit-transform-origin: left bottom;
2323 |     transform-origin: left bottom;
2324 |     -webkit-transform: none;
2325 |     transform: none;
2326 |     opacity: 1;
2327 |   }
2328 | }
2329 | 
2330 | .rotateInUpLeft {
2331 |   -webkit-animation-name: rotateInUpLeft;
2332 |   animation-name: rotateInUpLeft;
2333 | }
2334 | 
2335 | @-webkit-keyframes rotateInUpRight {
2336 |   from {
2337 |     -webkit-transform-origin: right bottom;
2338 |     transform-origin: right bottom;
2339 |     -webkit-transform: rotate3d(0, 0, 1, -90deg);
2340 |     transform: rotate3d(0, 0, 1, -90deg);
2341 |     opacity: 0;
2342 |   }
2343 | 
2344 |   to {
2345 |     -webkit-transform-origin: right bottom;
2346 |     transform-origin: right bottom;
2347 |     -webkit-transform: none;
2348 |     transform: none;
2349 |     opacity: 1;
2350 |   }
2351 | }
2352 | 
2353 | @keyframes rotateInUpRight {
2354 |   from {
2355 |     -webkit-transform-origin: right bottom;
2356 |     transform-origin: right bottom;
2357 |     -webkit-transform: rotate3d(0, 0, 1, -90deg);
2358 |     transform: rotate3d(0, 0, 1, -90deg);
2359 |     opacity: 0;
2360 |   }
2361 | 
2362 |   to {
2363 |     -webkit-transform-origin: right bottom;
2364 |     transform-origin: right bottom;
2365 |     -webkit-transform: none;
2366 |     transform: none;
2367 |     opacity: 1;
2368 |   }
2369 | }
2370 | 
2371 | .rotateInUpRight {
2372 |   -webkit-animation-name: rotateInUpRight;
2373 |   animation-name: rotateInUpRight;
2374 | }
2375 | 
2376 | @-webkit-keyframes rotateOut {
2377 |   from {
2378 |     -webkit-transform-origin: center;
2379 |     transform-origin: center;
2380 |     opacity: 1;
2381 |   }
2382 | 
2383 |   to {
2384 |     -webkit-transform-origin: center;
2385 |     transform-origin: center;
2386 |     -webkit-transform: rotate3d(0, 0, 1, 200deg);
2387 |     transform: rotate3d(0, 0, 1, 200deg);
2388 |     opacity: 0;
2389 |   }
2390 | }
2391 | 
2392 | @keyframes rotateOut {
2393 |   from {
2394 |     -webkit-transform-origin: center;
2395 |     transform-origin: center;
2396 |     opacity: 1;
2397 |   }
2398 | 
2399 |   to {
2400 |     -webkit-transform-origin: center;
2401 |     transform-origin: center;
2402 |     -webkit-transform: rotate3d(0, 0, 1, 200deg);
2403 |     transform: rotate3d(0, 0, 1, 200deg);
2404 |     opacity: 0;
2405 |   }
2406 | }
2407 | 
2408 | .rotateOut {
2409 |   -webkit-animation-name: rotateOut;
2410 |   animation-name: rotateOut;
2411 | }
2412 | 
2413 | @-webkit-keyframes rotateOutDownLeft {
2414 |   from {
2415 |     -webkit-transform-origin: left bottom;
2416 |     transform-origin: left bottom;
2417 |     opacity: 1;
2418 |   }
2419 | 
2420 |   to {
2421 |     -webkit-transform-origin: left bottom;
2422 |     transform-origin: left bottom;
2423 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2424 |     transform: rotate3d(0, 0, 1, 45deg);
2425 |     opacity: 0;
2426 |   }
2427 | }
2428 | 
2429 | @keyframes rotateOutDownLeft {
2430 |   from {
2431 |     -webkit-transform-origin: left bottom;
2432 |     transform-origin: left bottom;
2433 |     opacity: 1;
2434 |   }
2435 | 
2436 |   to {
2437 |     -webkit-transform-origin: left bottom;
2438 |     transform-origin: left bottom;
2439 |     -webkit-transform: rotate3d(0, 0, 1, 45deg);
2440 |     transform: rotate3d(0, 0, 1, 45deg);
2441 |     opacity: 0;
2442 |   }
2443 | }
2444 | 
2445 | .rotateOutDownLeft {
2446 |   -webkit-animation-name: rotateOutDownLeft;
2447 |   animation-name: rotateOutDownLeft;
2448 | }
2449 | 
2450 | @-webkit-keyframes rotateOutDownRight {
2451 |   from {
2452 |     -webkit-transform-origin: right bottom;
2453 |     transform-origin: right bottom;
2454 |     opacity: 1;
2455 |   }
2456 | 
2457 |   to {
2458 |     -webkit-transform-origin: right bottom;
2459 |     transform-origin: right bottom;
2460 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2461 |     transform: rotate3d(0, 0, 1, -45deg);
2462 |     opacity: 0;
2463 |   }
2464 | }
2465 | 
2466 | @keyframes rotateOutDownRight {
2467 |   from {
2468 |     -webkit-transform-origin: right bottom;
2469 |     transform-origin: right bottom;
2470 |     opacity: 1;
2471 |   }
2472 | 
2473 |   to {
2474 |     -webkit-transform-origin: right bottom;
2475 |     transform-origin: right bottom;
2476 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2477 |     transform: rotate3d(0, 0, 1, -45deg);
2478 |     opacity: 0;
2479 |   }
2480 | }
2481 | 
2482 | .rotateOutDownRight {
2483 |   -webkit-animation-name: rotateOutDownRight;
2484 |   animation-name: rotateOutDownRight;
2485 | }
2486 | 
2487 | @-webkit-keyframes rotateOutUpLeft {
2488 |   from {
2489 |     -webkit-transform-origin: left bottom;
2490 |     transform-origin: left bottom;
2491 |     opacity: 1;
2492 |   }
2493 | 
2494 |   to {
2495 |     -webkit-transform-origin: left bottom;
2496 |     transform-origin: left bottom;
2497 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2498 |     transform: rotate3d(0, 0, 1, -45deg);
2499 |     opacity: 0;
2500 |   }
2501 | }
2502 | 
2503 | @keyframes rotateOutUpLeft {
2504 |   from {
2505 |     -webkit-transform-origin: left bottom;
2506 |     transform-origin: left bottom;
2507 |     opacity: 1;
2508 |   }
2509 | 
2510 |   to {
2511 |     -webkit-transform-origin: left bottom;
2512 |     transform-origin: left bottom;
2513 |     -webkit-transform: rotate3d(0, 0, 1, -45deg);
2514 |     transform: rotate3d(0, 0, 1, -45deg);
2515 |     opacity: 0;
2516 |   }
2517 | }
2518 | 
2519 | .rotateOutUpLeft {
2520 |   -webkit-animation-name: rotateOutUpLeft;
2521 |   animation-name: rotateOutUpLeft;
2522 | }
2523 | 
2524 | @-webkit-keyframes rotateOutUpRight {
2525 |   from {
2526 |     -webkit-transform-origin: right bottom;
2527 |     transform-origin: right bottom;
2528 |     opacity: 1;
2529 |   }
2530 | 
2531 |   to {
2532 |     -webkit-transform-origin: right bottom;
2533 |     transform-origin: right bottom;
2534 |     -webkit-transform: rotate3d(0, 0, 1, 90deg);
2535 |     transform: rotate3d(0, 0, 1, 90deg);
2536 |     opacity: 0;
2537 |   }
2538 | }
2539 | 
2540 | @keyframes rotateOutUpRight {
2541 |   from {
2542 |     -webkit-transform-origin: right bottom;
2543 |     transform-origin: right bottom;
2544 |     opacity: 1;
2545 |   }
2546 | 
2547 |   to {
2548 |     -webkit-transform-origin: right bottom;
2549 |     transform-origin: right bottom;
2550 |     -webkit-transform: rotate3d(0, 0, 1, 90deg);
2551 |     transform: rotate3d(0, 0, 1, 90deg);
2552 |     opacity: 0;
2553 |   }
2554 | }
2555 | 
2556 | .rotateOutUpRight {
2557 |   -webkit-animation-name: rotateOutUpRight;
2558 |   animation-name: rotateOutUpRight;
2559 | }
2560 | 
2561 | @-webkit-keyframes hinge {
2562 |   0% {
2563 |     -webkit-transform-origin: top left;
2564 |     transform-origin: top left;
2565 |     -webkit-animation-timing-function: ease-in-out;
2566 |     animation-timing-function: ease-in-out;
2567 |   }
2568 | 
2569 |   20%, 60% {
2570 |     -webkit-transform: rotate3d(0, 0, 1, 80deg);
2571 |     transform: rotate3d(0, 0, 1, 80deg);
2572 |     -webkit-transform-origin: top left;
2573 |     transform-origin: top left;
2574 |     -webkit-animation-timing-function: ease-in-out;
2575 |     animation-timing-function: ease-in-out;
2576 |   }
2577 | 
2578 |   40%, 80% {
2579 |     -webkit-transform: rotate3d(0, 0, 1, 60deg);
2580 |     transform: rotate3d(0, 0, 1, 60deg);
2581 |     -webkit-transform-origin: top left;
2582 |     transform-origin: top left;
2583 |     -webkit-animation-timing-function: ease-in-out;
2584 |     animation-timing-function: ease-in-out;
2585 |     opacity: 1;
2586 |   }
2587 | 
2588 |   to {
2589 |     -webkit-transform: translate3d(0, 700px, 0);
2590 |     transform: translate3d(0, 700px, 0);
2591 |     opacity: 0;
2592 |   }
2593 | }
2594 | 
2595 | @keyframes hinge {
2596 |   0% {
2597 |     -webkit-transform-origin: top left;
2598 |     transform-origin: top left;
2599 |     -webkit-animation-timing-function: ease-in-out;
2600 |     animation-timing-function: ease-in-out;
2601 |   }
2602 | 
2603 |   20%, 60% {
2604 |     -webkit-transform: rotate3d(0, 0, 1, 80deg);
2605 |     transform: rotate3d(0, 0, 1, 80deg);
2606 |     -webkit-transform-origin: top left;
2607 |     transform-origin: top left;
2608 |     -webkit-animation-timing-function: ease-in-out;
2609 |     animation-timing-function: ease-in-out;
2610 |   }
2611 | 
2612 |   40%, 80% {
2613 |     -webkit-transform: rotate3d(0, 0, 1, 60deg);
2614 |     transform: rotate3d(0, 0, 1, 60deg);
2615 |     -webkit-transform-origin: top left;
2616 |     transform-origin: top left;
2617 |     -webkit-animation-timing-function: ease-in-out;
2618 |     animation-timing-function: ease-in-out;
2619 |     opacity: 1;
2620 |   }
2621 | 
2622 |   to {
2623 |     -webkit-transform: translate3d(0, 700px, 0);
2624 |     transform: translate3d(0, 700px, 0);
2625 |     opacity: 0;
2626 |   }
2627 | }
2628 | 
2629 | .hinge {
2630 |   -webkit-animation-name: hinge;
2631 |   animation-name: hinge;
2632 | }
2633 | 
2634 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2635 | 
2636 | @-webkit-keyframes rollIn {
2637 |   from {
2638 |     opacity: 0;
2639 |     -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2640 |     transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2641 |   }
2642 | 
2643 |   to {
2644 |     opacity: 1;
2645 |     -webkit-transform: none;
2646 |     transform: none;
2647 |   }
2648 | }
2649 | 
2650 | @keyframes rollIn {
2651 |   from {
2652 |     opacity: 0;
2653 |     -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2654 |     transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
2655 |   }
2656 | 
2657 |   to {
2658 |     opacity: 1;
2659 |     -webkit-transform: none;
2660 |     transform: none;
2661 |   }
2662 | }
2663 | 
2664 | .rollIn {
2665 |   -webkit-animation-name: rollIn;
2666 |   animation-name: rollIn;
2667 | }
2668 | 
2669 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2670 | 
2671 | @-webkit-keyframes rollOut {
2672 |   from {
2673 |     opacity: 1;
2674 |   }
2675 | 
2676 |   to {
2677 |     opacity: 0;
2678 |     -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2679 |     transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2680 |   }
2681 | }
2682 | 
2683 | @keyframes rollOut {
2684 |   from {
2685 |     opacity: 1;
2686 |   }
2687 | 
2688 |   to {
2689 |     opacity: 0;
2690 |     -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2691 |     transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
2692 |   }
2693 | }
2694 | 
2695 | .rollOut {
2696 |   -webkit-animation-name: rollOut;
2697 |   animation-name: rollOut;
2698 | }
2699 | 
2700 | @-webkit-keyframes zoomIn {
2701 |   from {
2702 |     opacity: 0;
2703 |     -webkit-transform: scale3d(.3, .3, .3);
2704 |     transform: scale3d(.3, .3, .3);
2705 |   }
2706 | 
2707 |   50% {
2708 |     opacity: 1;
2709 |   }
2710 | }
2711 | 
2712 | @keyframes zoomIn {
2713 |   from {
2714 |     opacity: 0;
2715 |     -webkit-transform: scale3d(.3, .3, .3);
2716 |     transform: scale3d(.3, .3, .3);
2717 |   }
2718 | 
2719 |   50% {
2720 |     opacity: 1;
2721 |   }
2722 | }
2723 | 
2724 | .zoomIn {
2725 |   -webkit-animation-name: zoomIn;
2726 |   animation-name: zoomIn;
2727 | }
2728 | 
2729 | @-webkit-keyframes zoomInDown {
2730 |   from {
2731 |     opacity: 0;
2732 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2733 |     transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2734 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2735 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2736 |   }
2737 | 
2738 |   60% {
2739 |     opacity: 1;
2740 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2741 |     transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2742 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2743 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2744 |   }
2745 | }
2746 | 
2747 | @keyframes zoomInDown {
2748 |   from {
2749 |     opacity: 0;
2750 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2751 |     transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
2752 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2753 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2754 |   }
2755 | 
2756 |   60% {
2757 |     opacity: 1;
2758 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2759 |     transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
2760 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2761 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2762 |   }
2763 | }
2764 | 
2765 | .zoomInDown {
2766 |   -webkit-animation-name: zoomInDown;
2767 |   animation-name: zoomInDown;
2768 | }
2769 | 
2770 | @-webkit-keyframes zoomInLeft {
2771 |   from {
2772 |     opacity: 0;
2773 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2774 |     transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2775 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2776 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2777 |   }
2778 | 
2779 |   60% {
2780 |     opacity: 1;
2781 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2782 |     transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2783 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2784 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2785 |   }
2786 | }
2787 | 
2788 | @keyframes zoomInLeft {
2789 |   from {
2790 |     opacity: 0;
2791 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2792 |     transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
2793 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2794 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2795 |   }
2796 | 
2797 |   60% {
2798 |     opacity: 1;
2799 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2800 |     transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
2801 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2802 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2803 |   }
2804 | }
2805 | 
2806 | .zoomInLeft {
2807 |   -webkit-animation-name: zoomInLeft;
2808 |   animation-name: zoomInLeft;
2809 | }
2810 | 
2811 | @-webkit-keyframes zoomInRight {
2812 |   from {
2813 |     opacity: 0;
2814 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2815 |     transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2816 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2817 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2818 |   }
2819 | 
2820 |   60% {
2821 |     opacity: 1;
2822 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2823 |     transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2824 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2825 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2826 |   }
2827 | }
2828 | 
2829 | @keyframes zoomInRight {
2830 |   from {
2831 |     opacity: 0;
2832 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2833 |     transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
2834 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2835 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2836 |   }
2837 | 
2838 |   60% {
2839 |     opacity: 1;
2840 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2841 |     transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
2842 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2843 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2844 |   }
2845 | }
2846 | 
2847 | .zoomInRight {
2848 |   -webkit-animation-name: zoomInRight;
2849 |   animation-name: zoomInRight;
2850 | }
2851 | 
2852 | @-webkit-keyframes zoomInUp {
2853 |   from {
2854 |     opacity: 0;
2855 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2856 |     transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2857 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2858 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2859 |   }
2860 | 
2861 |   60% {
2862 |     opacity: 1;
2863 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2864 |     transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2865 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2866 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2867 |   }
2868 | }
2869 | 
2870 | @keyframes zoomInUp {
2871 |   from {
2872 |     opacity: 0;
2873 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2874 |     transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
2875 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2876 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2877 |   }
2878 | 
2879 |   60% {
2880 |     opacity: 1;
2881 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2882 |     transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2883 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2884 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2885 |   }
2886 | }
2887 | 
2888 | .zoomInUp {
2889 |   -webkit-animation-name: zoomInUp;
2890 |   animation-name: zoomInUp;
2891 | }
2892 | 
2893 | @-webkit-keyframes zoomOut {
2894 |   from {
2895 |     opacity: 1;
2896 |   }
2897 | 
2898 |   50% {
2899 |     opacity: 0;
2900 |     -webkit-transform: scale3d(.3, .3, .3);
2901 |     transform: scale3d(.3, .3, .3);
2902 |   }
2903 | 
2904 |   to {
2905 |     opacity: 0;
2906 |   }
2907 | }
2908 | 
2909 | @keyframes zoomOut {
2910 |   from {
2911 |     opacity: 1;
2912 |   }
2913 | 
2914 |   50% {
2915 |     opacity: 0;
2916 |     -webkit-transform: scale3d(.3, .3, .3);
2917 |     transform: scale3d(.3, .3, .3);
2918 |   }
2919 | 
2920 |   to {
2921 |     opacity: 0;
2922 |   }
2923 | }
2924 | 
2925 | .zoomOut {
2926 |   -webkit-animation-name: zoomOut;
2927 |   animation-name: zoomOut;
2928 | }
2929 | 
2930 | @-webkit-keyframes zoomOutDown {
2931 |   40% {
2932 |     opacity: 1;
2933 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2934 |     transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2935 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2936 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2937 |   }
2938 | 
2939 |   to {
2940 |     opacity: 0;
2941 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2942 |     transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2943 |     -webkit-transform-origin: center bottom;
2944 |     transform-origin: center bottom;
2945 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2946 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2947 |   }
2948 | }
2949 | 
2950 | @keyframes zoomOutDown {
2951 |   40% {
2952 |     opacity: 1;
2953 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2954 |     transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
2955 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2956 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
2957 |   }
2958 | 
2959 |   to {
2960 |     opacity: 0;
2961 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2962 |     transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
2963 |     -webkit-transform-origin: center bottom;
2964 |     transform-origin: center bottom;
2965 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2966 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
2967 |   }
2968 | }
2969 | 
2970 | .zoomOutDown {
2971 |   -webkit-animation-name: zoomOutDown;
2972 |   animation-name: zoomOutDown;
2973 | }
2974 | 
2975 | @-webkit-keyframes zoomOutLeft {
2976 |   40% {
2977 |     opacity: 1;
2978 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2979 |     transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2980 |   }
2981 | 
2982 |   to {
2983 |     opacity: 0;
2984 |     -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
2985 |     transform: scale(.1) translate3d(-2000px, 0, 0);
2986 |     -webkit-transform-origin: left center;
2987 |     transform-origin: left center;
2988 |   }
2989 | }
2990 | 
2991 | @keyframes zoomOutLeft {
2992 |   40% {
2993 |     opacity: 1;
2994 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2995 |     transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
2996 |   }
2997 | 
2998 |   to {
2999 |     opacity: 0;
3000 |     -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
3001 |     transform: scale(.1) translate3d(-2000px, 0, 0);
3002 |     -webkit-transform-origin: left center;
3003 |     transform-origin: left center;
3004 |   }
3005 | }
3006 | 
3007 | .zoomOutLeft {
3008 |   -webkit-animation-name: zoomOutLeft;
3009 |   animation-name: zoomOutLeft;
3010 | }
3011 | 
3012 | @-webkit-keyframes zoomOutRight {
3013 |   40% {
3014 |     opacity: 1;
3015 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
3016 |     transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
3017 |   }
3018 | 
3019 |   to {
3020 |     opacity: 0;
3021 |     -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
3022 |     transform: scale(.1) translate3d(2000px, 0, 0);
3023 |     -webkit-transform-origin: right center;
3024 |     transform-origin: right center;
3025 |   }
3026 | }
3027 | 
3028 | @keyframes zoomOutRight {
3029 |   40% {
3030 |     opacity: 1;
3031 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
3032 |     transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
3033 |   }
3034 | 
3035 |   to {
3036 |     opacity: 0;
3037 |     -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
3038 |     transform: scale(.1) translate3d(2000px, 0, 0);
3039 |     -webkit-transform-origin: right center;
3040 |     transform-origin: right center;
3041 |   }
3042 | }
3043 | 
3044 | .zoomOutRight {
3045 |   -webkit-animation-name: zoomOutRight;
3046 |   animation-name: zoomOutRight;
3047 | }
3048 | 
3049 | @-webkit-keyframes zoomOutUp {
3050 |   40% {
3051 |     opacity: 1;
3052 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
3053 |     transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
3054 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
3055 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
3056 |   }
3057 | 
3058 |   to {
3059 |     opacity: 0;
3060 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
3061 |     transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
3062 |     -webkit-transform-origin: center bottom;
3063 |     transform-origin: center bottom;
3064 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
3065 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
3066 |   }
3067 | }
3068 | 
3069 | @keyframes zoomOutUp {
3070 |   40% {
3071 |     opacity: 1;
3072 |     -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
3073 |     transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
3074 |     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
3075 |     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
3076 |   }
3077 | 
3078 |   to {
3079 |     opacity: 0;
3080 |     -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
3081 |     transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
3082 |     -webkit-transform-origin: center bottom;
3083 |     transform-origin: center bottom;
3084 |     -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
3085 |     animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
3086 |   }
3087 | }
3088 | 
3089 | .zoomOutUp {
3090 |   -webkit-animation-name: zoomOutUp;
3091 |   animation-name: zoomOutUp;
3092 | }
3093 | 
3094 | @-webkit-keyframes slideInDown {
3095 |   from {
3096 |     -webkit-transform: translate3d(0, -100%, 0);
3097 |     transform: translate3d(0, -100%, 0);
3098 |     visibility: visible;
3099 |   }
3100 | 
3101 |   to {
3102 |     -webkit-transform: translate3d(0, 0, 0);
3103 |     transform: translate3d(0, 0, 0);
3104 |   }
3105 | }
3106 | 
3107 | @keyframes slideInDown {
3108 |   from {
3109 |     -webkit-transform: translate3d(0, -100%, 0);
3110 |     transform: translate3d(0, -100%, 0);
3111 |     visibility: visible;
3112 |   }
3113 | 
3114 |   to {
3115 |     -webkit-transform: translate3d(0, 0, 0);
3116 |     transform: translate3d(0, 0, 0);
3117 |   }
3118 | }
3119 | 
3120 | .slideInDown {
3121 |   -webkit-animation-name: slideInDown;
3122 |   animation-name: slideInDown;
3123 | }
3124 | 
3125 | @-webkit-keyframes slideInLeft {
3126 |   from {
3127 |     -webkit-transform: translate3d(-100%, 0, 0);
3128 |     transform: translate3d(-100%, 0, 0);
3129 |     visibility: visible;
3130 |   }
3131 | 
3132 |   to {
3133 |     -webkit-transform: translate3d(0, 0, 0);
3134 |     transform: translate3d(0, 0, 0);
3135 |   }
3136 | }
3137 | 
3138 | @keyframes slideInLeft {
3139 |   from {
3140 |     -webkit-transform: translate3d(-100%, 0, 0);
3141 |     transform: translate3d(-100%, 0, 0);
3142 |     visibility: visible;
3143 |   }
3144 | 
3145 |   to {
3146 |     -webkit-transform: translate3d(0, 0, 0);
3147 |     transform: translate3d(0, 0, 0);
3148 |   }
3149 | }
3150 | 
3151 | .slideInLeft {
3152 |   -webkit-animation-name: slideInLeft;
3153 |   animation-name: slideInLeft;
3154 | }
3155 | 
3156 | @-webkit-keyframes slideInRight {
3157 |   from {
3158 |     -webkit-transform: translate3d(100%, 0, 0);
3159 |     transform: translate3d(100%, 0, 0);
3160 |     visibility: visible;
3161 |   }
3162 | 
3163 |   to {
3164 |     -webkit-transform: translate3d(0, 0, 0);
3165 |     transform: translate3d(0, 0, 0);
3166 |   }
3167 | }
3168 | 
3169 | @keyframes slideInRight {
3170 |   from {
3171 |     -webkit-transform: translate3d(100%, 0, 0);
3172 |     transform: translate3d(100%, 0, 0);
3173 |     visibility: visible;
3174 |   }
3175 | 
3176 |   to {
3177 |     -webkit-transform: translate3d(0, 0, 0);
3178 |     transform: translate3d(0, 0, 0);
3179 |   }
3180 | }
3181 | 
3182 | .slideInRight {
3183 |   -webkit-animation-name: slideInRight;
3184 |   animation-name: slideInRight;
3185 | }
3186 | 
3187 | @-webkit-keyframes slideInUp {
3188 |   from {
3189 |     -webkit-transform: translate3d(0, 100%, 0);
3190 |     transform: translate3d(0, 100%, 0);
3191 |     visibility: visible;
3192 |   }
3193 | 
3194 |   to {
3195 |     -webkit-transform: translate3d(0, 0, 0);
3196 |     transform: translate3d(0, 0, 0);
3197 |   }
3198 | }
3199 | 
3200 | @keyframes slideInUp {
3201 |   from {
3202 |     -webkit-transform: translate3d(0, 100%, 0);
3203 |     transform: translate3d(0, 100%, 0);
3204 |     visibility: visible;
3205 |   }
3206 | 
3207 |   to {
3208 |     -webkit-transform: translate3d(0, 0, 0);
3209 |     transform: translate3d(0, 0, 0);
3210 |   }
3211 | }
3212 | 
3213 | .slideInUp {
3214 |   -webkit-animation-name: slideInUp;
3215 |   animation-name: slideInUp;
3216 | }
3217 | 
3218 | @-webkit-keyframes slideOutDown {
3219 |   from {
3220 |     -webkit-transform: translate3d(0, 0, 0);
3221 |     transform: translate3d(0, 0, 0);
3222 |   }
3223 | 
3224 |   to {
3225 |     visibility: hidden;
3226 |     -webkit-transform: translate3d(0, 100%, 0);
3227 |     transform: translate3d(0, 100%, 0);
3228 |   }
3229 | }
3230 | 
3231 | @keyframes slideOutDown {
3232 |   from {
3233 |     -webkit-transform: translate3d(0, 0, 0);
3234 |     transform: translate3d(0, 0, 0);
3235 |   }
3236 | 
3237 |   to {
3238 |     visibility: hidden;
3239 |     -webkit-transform: translate3d(0, 100%, 0);
3240 |     transform: translate3d(0, 100%, 0);
3241 |   }
3242 | }
3243 | 
3244 | .slideOutDown {
3245 |   -webkit-animation-name: slideOutDown;
3246 |   animation-name: slideOutDown;
3247 | }
3248 | 
3249 | @-webkit-keyframes slideOutLeft {
3250 |   from {
3251 |     -webkit-transform: translate3d(0, 0, 0);
3252 |     transform: translate3d(0, 0, 0);
3253 |   }
3254 | 
3255 |   to {
3256 |     visibility: hidden;
3257 |     -webkit-transform: translate3d(-100%, 0, 0);
3258 |     transform: translate3d(-100%, 0, 0);
3259 |   }
3260 | }
3261 | 
3262 | @keyframes slideOutLeft {
3263 |   from {
3264 |     -webkit-transform: translate3d(0, 0, 0);
3265 |     transform: translate3d(0, 0, 0);
3266 |   }
3267 | 
3268 |   to {
3269 |     visibility: hidden;
3270 |     -webkit-transform: translate3d(-100%, 0, 0);
3271 |     transform: translate3d(-100%, 0, 0);
3272 |   }
3273 | }
3274 | 
3275 | .slideOutLeft {
3276 |   -webkit-animation-name: slideOutLeft;
3277 |   animation-name: slideOutLeft;
3278 | }
3279 | 
3280 | @-webkit-keyframes slideOutRight {
3281 |   from {
3282 |     -webkit-transform: translate3d(0, 0, 0);
3283 |     transform: translate3d(0, 0, 0);
3284 |   }
3285 | 
3286 |   to {
3287 |     visibility: hidden;
3288 |     -webkit-transform: translate3d(100%, 0, 0);
3289 |     transform: translate3d(100%, 0, 0);
3290 |   }
3291 | }
3292 | 
3293 | @keyframes slideOutRight {
3294 |   from {
3295 |     -webkit-transform: translate3d(0, 0, 0);
3296 |     transform: translate3d(0, 0, 0);
3297 |   }
3298 | 
3299 |   to {
3300 |     visibility: hidden;
3301 |     -webkit-transform: translate3d(100%, 0, 0);
3302 |     transform: translate3d(100%, 0, 0);
3303 |   }
3304 | }
3305 | 
3306 | .slideOutRight {
3307 |   -webkit-animation-name: slideOutRight;
3308 |   animation-name: slideOutRight;
3309 | }
3310 | 
3311 | @-webkit-keyframes slideOutUp {
3312 |   from {
3313 |     -webkit-transform: translate3d(0, 0, 0);
3314 |     transform: translate3d(0, 0, 0);
3315 |   }
3316 | 
3317 |   to {
3318 |     visibility: hidden;
3319 |     -webkit-transform: translate3d(0, -100%, 0);
3320 |     transform: translate3d(0, -100%, 0);
3321 |   }
3322 | }
3323 | 
3324 | @keyframes slideOutUp {
3325 |   from {
3326 |     -webkit-transform: translate3d(0, 0, 0);
3327 |     transform: translate3d(0, 0, 0);
3328 |   }
3329 | 
3330 |   to {
3331 |     visibility: hidden;
3332 |     -webkit-transform: translate3d(0, -100%, 0);
3333 |     transform: translate3d(0, -100%, 0);
3334 |   }
3335 | }
3336 | 
3337 | .slideOutUp {
3338 |   -webkit-animation-name: slideOutUp;
3339 |   animation-name: slideOutUp;
3340 | }
3341 | 


--------------------------------------------------------------------------------
/src/assets/mountains.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abhazelton/animate-on-scroll/da59f7a8385561a8283fb11ae348028a26c46506/src/assets/mountains.jpg


--------------------------------------------------------------------------------
/src/assets/sunset.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abhazelton/animate-on-scroll/da59f7a8385561a8283fb11ae348028a26c46506/src/assets/sunset.jpg


--------------------------------------------------------------------------------
/src/assets/tiger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abhazelton/animate-on-scroll/da59f7a8385561a8283fb11ae348028a26c46506/src/assets/tiger.jpg


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true,
3 | };
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false,
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abhazelton/animate-on-scroll/da59f7a8385561a8283fb11ae348028a26c46506/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>AnimateOnScrollSampleProject</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 |   <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
14 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
15 |   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/main.server.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from "@angular/core";
 2 | 
 3 | import { environment } from "./environments/environment";
 4 | 
 5 | if (environment.production) {
 6 |   enableProdMode();
 7 | }
 8 | 
 9 | export { AppServerModule } from "./app/app.server.module";
10 | export { renderModule, renderModuleFactory } from "@angular/platform-server";
11 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from "@angular/core";
 2 | import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 3 | 
 4 | import { AppModule } from "./app/app.module";
 5 | import { environment } from "./environments/environment";
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | document.addEventListener("DOMContentLoaded", () => {
12 |   platformBrowserDynamic()
13 |     .bootstrapModule(AppModule)
14 |     .catch((err) => console.error(err));
15 | });
16 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
23 | 
24 | /**
25 |  * Web Animations `@angular/platform-browser/animations`
26 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 |  */
29 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 | 
31 | /**
32 |  * By default, zone.js will patch all possible macroTask and DomEvents
33 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
34 |  * because those flags need to be set before `zone.js` being loaded, and webpack
35 |  * will put import in the top of bundle, so user need to create a separate file
36 |  * in this directory (for example: zone-flags.ts), and put the following flags
37 |  * into that file, and then add the following code before importing zone.js.
38 |  * import './zone-flags';
39 |  *
40 |  * The flags allowed in zone-flags.ts are listed here.
41 |  *
42 |  * The following flags will work for all browsers.
43 |  *
44 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 |  *
48 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 |  *
51 |  *  (window as any).__Zone_enable_cross_context_check = true;
52 |  *
53 |  */
54 | 
55 | /***************************************************************************************************
56 |  * Zone JS is required by default for Angular itself.
57 |  */
58 | import "zone.js"; // Included with Angular CLI.
59 | 
60 | /***************************************************************************************************
61 |  * APPLICATION IMPORTS
62 |  */
63 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
 1 | @import './assets/animate.css';
 2 | 
 3 | .animated-delay-1 {
 4 |     animation-delay: 1s;
 5 |     -webkit-animation-delay: 1s;
 6 |     -moz-animation-delay: 1s;
 7 |     -o-animation-delay: 1s;
 8 | }
 9 | 
10 | .animated-delay-2 {
11 |     animation-delay: 2s;
12 |     -webkit-animation-delay: 2s;
13 |     -moz-animation-delay: 2s;
14 |     -o-animation-delay: 2s;
15 | }
16 | 
17 | .animated {
18 |     visibility: visible !important;
19 | }
20 | .hide-on-init {
21 |     visibility: hidden;
22 | }
23 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import "zone.js/testing";
 4 | import { getTestBed } from "@angular/core/testing";
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting,
 8 | } from "@angular/platform-browser-dynamic/testing";
 9 | 
10 | declare const require: {
11 |   context(
12 |     path: string,
13 |     deep?: boolean,
14 |     filter?: RegExp
15 |   ): {
16 |     keys(): string[];
17 |     <T>(id: string): T;
18 |   };
19 | };
20 | 
21 | // First, initialize the Angular testing environment.
22 | getTestBed().initTestEnvironment(
23 |   BrowserDynamicTestingModule,
24 |   platformBrowserDynamicTesting()
25 | );
26 | // Then we find all the tests.
27 | const context = require.context("./", true, /\.spec\.ts$/);
28 | // And load the modules.
29 | context.keys().map(context);
30 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "files": [
 8 |     "src/main.ts",
 9 |     "src/polyfills.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "downlevelIteration": true,
 9 |     "experimentalDecorators": true,
10 |     "module": "es2020",
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2015",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2018",
19 |       "dom"
20 |     ],
21 |     "paths": {
22 |       "ng2-animate-on-scroll": [
23 |         "dist/ng2-animate-on-scroll"
24 |       ]
25 |     }
26 |   },
27 |   "angularCompilerOptions": {
28 |     "fullTemplateTypeCheck": true,
29 |     "strictInjectionParameters": true
30 |   }
31 | }


--------------------------------------------------------------------------------
/tsconfig.server.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.app.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/app-server",
 5 |     "target": "es2016",
 6 |     "types": [
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/main.server.ts",
12 |     "server.ts"
13 |   ],
14 |   "angularCompilerOptions": {
15 |     "entryModule": "./src/app/app.server.module#AppServerModule"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "./out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------