├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .travis.yml ├── .wordpress ├── banner-1544x500.png ├── banner-772x250.png ├── icon-128x128.png ├── icon-256x256.png └── icon.svg ├── README.md ├── animate-blocks.php ├── assets └── github │ └── animate-blocks-demo.gif ├── composer.json ├── composer.lock ├── dist ├── aos-3.0.0-beta.6 │ ├── aos.css │ └── aos.js ├── aos-init.js └── blocks.build.js ├── languages └── animate-blocks.pot ├── package-lock.json ├── package.json ├── phpcs.xml ├── readme.txt ├── screenshot-1.png ├── scripts ├── deploy-wp-plugin.sh └── phpcodesniffer.sh └── src ├── animate ├── anchor-placement-options.js ├── animation-options.js ├── block.js └── easing-options.js ├── blocks.js ├── class-animate-blocks.php └── common.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | # WordPress Coding Standards 5 | # https://make.wordpress.org/core/handbook/coding-standards/ 6 | 7 | root = true 8 | 9 | [*] 10 | charset = utf-8 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | indent_style = tab 15 | indent_size = 4 16 | 17 | [*.{yml,json}] 18 | indent_style = space 19 | indent_size = 2 20 | 21 | [*.md] 22 | indent_style = space 23 | trim_trailing_whitespace = false 24 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/*.min.js 2 | **/*.build.js 3 | **/node_modules/** 4 | **/vendor/** 5 | build 6 | coverage 7 | cypress 8 | node_modules 9 | vendor 10 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "babel-eslint", 4 | "extends": [ 5 | "wordpress", 6 | "plugin:react/recommended", 7 | "plugin:jsx-a11y/recommended", 8 | "plugin:jest/recommended" 9 | ], 10 | "env": { 11 | "browser": false, 12 | "es6": true, 13 | "node": true, 14 | "mocha": true, 15 | "jest/globals": true 16 | }, 17 | "parserOptions": { 18 | "sourceType": "module", 19 | "ecmaFeatures": { 20 | "jsx": true 21 | } 22 | }, 23 | "globals": { 24 | "wp": true, 25 | "wpApiSettings": true, 26 | "window": true, 27 | "document": true 28 | }, 29 | "plugins": ["react", "jsx-a11y", "jest"], 30 | "settings": { 31 | "react": { 32 | "pragma": "wp" 33 | } 34 | }, 35 | "rules": { 36 | "array-bracket-spacing": ["error", "always"], 37 | "brace-style": ["error", "1tbs"], 38 | "camelcase": ["error", { "properties": "never" }], 39 | "comma-dangle": ["error", "always-multiline"], 40 | "comma-spacing": "error", 41 | "comma-style": "error", 42 | "computed-property-spacing": ["error", "always"], 43 | "constructor-super": "error", 44 | "dot-notation": "error", 45 | "eol-last": "error", 46 | "eqeqeq": "error", 47 | "func-call-spacing": "error", 48 | "indent": ["error", "tab", { "SwitchCase": 1 }], 49 | "jsx-a11y/label-has-for": [ 50 | "error", 51 | { 52 | "required": "id" 53 | } 54 | ], 55 | "jsx-a11y/media-has-caption": "off", 56 | "jsx-a11y/no-noninteractive-tabindex": "off", 57 | "jsx-a11y/role-has-required-aria-props": "off", 58 | "jsx-quotes": "error", 59 | "key-spacing": "error", 60 | "keyword-spacing": "error", 61 | "lines-around-comment": "off", 62 | "no-alert": "error", 63 | "no-bitwise": "error", 64 | "no-caller": "error", 65 | "no-console": "error", 66 | "no-const-assign": "error", 67 | "no-debugger": "error", 68 | "no-dupe-args": "error", 69 | "no-dupe-class-members": "error", 70 | "no-dupe-keys": "error", 71 | "no-duplicate-case": "error", 72 | "no-duplicate-imports": "error", 73 | "no-else-return": "error", 74 | "no-eval": "error", 75 | "no-extra-semi": "error", 76 | "no-fallthrough": "error", 77 | "no-lonely-if": "error", 78 | "no-mixed-operators": "error", 79 | "no-mixed-spaces-and-tabs": "error", 80 | "no-multiple-empty-lines": ["error", { "max": 1 }], 81 | "no-multi-spaces": "error", 82 | "no-multi-str": "off", 83 | "no-negated-in-lhs": "error", 84 | "no-nested-ternary": "error", 85 | "no-redeclare": "error", 86 | "no-restricted-syntax": [ 87 | "error", 88 | { 89 | "selector": 90 | "ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]", 91 | "message": "Path access on WordPress dependencies is not allowed." 92 | }, 93 | { 94 | "selector": "ImportDeclaration[source.value=/^blocks$/]", 95 | "message": "Use @wordpress/blocks as import path instead." 96 | }, 97 | { 98 | "selector": "ImportDeclaration[source.value=/^components$/]", 99 | "message": "Use @wordpress/components as import path instead." 100 | }, 101 | { 102 | "selector": "ImportDeclaration[source.value=/^date$/]", 103 | "message": "Use @wordpress/date as import path instead." 104 | }, 105 | { 106 | "selector": "ImportDeclaration[source.value=/^editor$/]", 107 | "message": "Use @wordpress/editor as import path instead." 108 | }, 109 | { 110 | "selector": "ImportDeclaration[source.value=/^element$/]", 111 | "message": "Use @wordpress/element as import path instead." 112 | }, 113 | { 114 | "selector": "ImportDeclaration[source.value=/^i18n$/]", 115 | "message": "Use @wordpress/i18n as import path instead." 116 | }, 117 | { 118 | "selector": "ImportDeclaration[source.value=/^data$/]", 119 | "message": "Use @wordpress/data as import path instead." 120 | }, 121 | { 122 | "selector": "ImportDeclaration[source.value=/^utils$/]", 123 | "message": "Use @wordpress/utils as import path instead." 124 | }, 125 | { 126 | "selector": 127 | "CallExpression[callee.name=/^__|_n|_x$/]:not([arguments.0.type=/^Literal|BinaryExpression$/])", 128 | "message": "Translate function arguments must be string literals." 129 | }, 130 | { 131 | "selector": 132 | "CallExpression[callee.name=/^_n|_x$/]:not([arguments.1.type=/^Literal|BinaryExpression$/])", 133 | "message": "Translate function arguments must be string literals." 134 | }, 135 | { 136 | "selector": 137 | "CallExpression[callee.name=_nx]:not([arguments.2.type=/^Literal|BinaryExpression$/])", 138 | "message": "Translate function arguments must be string literals." 139 | } 140 | ], 141 | "no-shadow": "error", 142 | "no-undef": "error", 143 | "no-undef-init": "error", 144 | "no-unreachable": "error", 145 | "no-unsafe-negation": "error", 146 | "no-unused-expressions": "error", 147 | "no-unused-vars": "error", 148 | "no-useless-computed-key": "error", 149 | "no-useless-constructor": "error", 150 | "no-useless-return": "error", 151 | "no-var": "error", 152 | "no-whitespace-before-property": "error", 153 | "object-curly-spacing": ["error", "always"], 154 | "padded-blocks": ["error", "never"], 155 | "prefer-const": "error", 156 | "quote-props": ["error", "as-needed"], 157 | "react/display-name": "off", 158 | "react/jsx-curly-spacing": [ 159 | "error", 160 | { 161 | "when": "always", 162 | "children": true 163 | } 164 | ], 165 | "react/jsx-equals-spacing": "error", 166 | "react/jsx-indent": ["error", "tab"], 167 | "react/jsx-indent-props": ["error", "tab"], 168 | "react/jsx-key": "error", 169 | "react/jsx-tag-spacing": "error", 170 | "react/no-children-prop": "off", 171 | "react/no-find-dom-node": "warn", 172 | "react/prop-types": "off", 173 | "semi": "error", 174 | "semi-spacing": "error", 175 | "space-before-blocks": ["error", "always"], 176 | "space-before-function-paren": ["error", "never"], 177 | "space-in-parens": ["error", "always"], 178 | "space-infix-ops": ["error", { "int32Hint": false }], 179 | "space-unary-ops": [ 180 | "error", 181 | { 182 | "overrides": { 183 | "!": true 184 | } 185 | } 186 | ], 187 | "template-curly-spacing": ["error", "always"], 188 | "valid-jsdoc": ["error", { "requireReturn": false }], 189 | "valid-typeof": "error", 190 | "yoda": "off" 191 | } 192 | } 193 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | vendor 3 | build/ 4 | wp-cli.phar 5 | composer.phar 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: php 2 | 3 | php: 4 | - 7.0 5 | - 7.1 6 | - 7.2 7 | - 7.3 8 | 9 | before_install: 10 | - nvm install 10 11 | 12 | install: 13 | - composer install 14 | - vendor/bin/phpcs --config-set installed_paths vendor/wp-coding-standards/wpcs 15 | - npm install 16 | 17 | script: 18 | - scripts/phpcodesniffer.sh 19 | - npm run lint 20 | 21 | deploy: 22 | provider: script 23 | script: scripts/deploy-wp-plugin.sh 24 | on: 25 | php: 7.2 26 | tags: true 27 | all_branches: true 28 | 29 | env: 30 | global: 31 | secure: xUWw/5RB8vS0Gq1hbWeUsNCsitWyoK2l24bMMVqCvRlHZIrf4pywVOmh5e3IU5UKdRaBQzKLwRwf8kHYusp2n35EEE6a3Fe+z9nNEM38bkPybtpH7RYv2DN9Mj6t2u+TE0KpzdglwFi+z5Eq+NMSeoucCanZdJM0nb6atkxcZMwmGd7LlihdihHaken+1gUEYv8paq7SkUYNJKGByJvKmADgBRqjQ5VW737YMV1V3fi79KAhoKWSQPlKAfcytNDFRUF2MzJ3Ba4kUm84aWHwncgph53jACciogvCbqmWBpQZUmiuQ2J2F3zXUJfurHHdxgLaztkmCoTGehnU4ZUIQvS/nq0N2LXu0LTl9efcb247gXi0v50D3AEoVUiJA8UdUmO3Fbd2EULWoJOmBNQcSHZKH2oNPm7IsQM4ZFUL7PH4c8j4yrDKlqBBF/Hf5sHrN3iX/4qtiBTUAvC4LuJideyJBBBjeuknncqckfq4Dp0jqe8TgMGxbVpX3rzfIOVyhA5vci9hHXzl9khX74NKTIlKpn44EVghpoU9N/rFiSlJWsc3DrS6SZ+VIgGVIx2I/0Tr3sTY3ak/fnygNkwgyAa0y5uQ3C5KFfTY8kegybSdLsvpbBDugHEhc5o8PalR6k2oDCMS+9celOWO8SqK1ul5qVlXXYcGL33WlVsk0CQ= 32 | -------------------------------------------------------------------------------- /.wordpress/banner-1544x500.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liip/animate-blocks-wordpress-plugin/5a839664a84c56d28ff21badfe5c4451844abe76/.wordpress/banner-1544x500.png -------------------------------------------------------------------------------- /.wordpress/banner-772x250.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liip/animate-blocks-wordpress-plugin/5a839664a84c56d28ff21badfe5c4451844abe76/.wordpress/banner-772x250.png -------------------------------------------------------------------------------- /.wordpress/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liip/animate-blocks-wordpress-plugin/5a839664a84c56d28ff21badfe5c4451844abe76/.wordpress/icon-128x128.png -------------------------------------------------------------------------------- /.wordpress/icon-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liip/animate-blocks-wordpress-plugin/5a839664a84c56d28ff21badfe5c4451844abe76/.wordpress/icon-256x256.png -------------------------------------------------------------------------------- /.wordpress/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animate Blocks - Animate Gutenberg blocks plugin for WordPress 2 | 3 | [![Build Status](https://travis-ci.org/liip/animate-blocks-wordpress-plugin.svg?branch=master)](https://travis-ci.org/liip/animate-blocks-wordpress-plugin) 4 | 5 | Animate Gutenberg blocks when they scroll into view. 6 | 7 | * Works with all existing Gutenberg blocks 8 | * Choose from 27 different animations 9 | * Configure animation with custom delays, offsets and durations 10 | * Based on [AOS Animate On Scroll Library](http://michalsnik.github.io/aos/) 11 | 12 | ![Animate Blocks Demo](https://raw.githubusercontent.com/liip/animate-blocks-wordpress-plugin/master/assets/github/animate-blocks-demo.gif) 13 | 14 | ## JavaScript Filters 15 | 16 | ### animateBlocks.defaultOptions 17 | 18 | Change default options. 19 | 20 | #### Usage: 21 | 22 | ```javascript 23 | function myDefaultOptions( defaultOptions ) { 24 | // Change default animation to 'flip-up' 25 | defaultOptions.animation = 'flip-up'; 26 | 27 | return defaultOptions; 28 | } 29 | wp.hooks.addFilter( 'animateBlocks.defaultOptions', 'myplugin/animate-blocks/defaultOptions', myDefaultOptions ); 30 | ``` 31 | 32 | #### Parameters: 33 | 34 | * `defaultOptions` (object) Object with the following attributes 35 | * `animation` (string) 36 | * `offset` (number) 37 | * `delay` (number) 38 | * `duration` (number) 39 | * `easing` (string) 40 | * `once` (boolean) 41 | * `mirror` (boolean) 42 | * `anchorPlacement` (string) 43 | 44 | ### animateBlocks.anchorPlacementOptions 45 | 46 | Modify anchor placement options. 47 | 48 | #### Usage: 49 | 50 | ```javascript 51 | function myAnchorPlacementOptions( anchorPlacementOptions ) { 52 | // Modify anchorPlacementOptions here 53 | 54 | return anchorPlacementOptions; 55 | } 56 | wp.hooks.addFilter( 'animateBlocks.anchorPlacementOptions', 'myplugin/animate-blocks/anchorPlacementOptions', myAnchorPlacementOptions ); 57 | ``` 58 | 59 | #### Parameters: 60 | 61 | * `anchorPlacementOptions` (array) Array with anchor placement options 62 | 63 | ### animateBlocks.animationOptions 64 | 65 | Modify animation options. 66 | 67 | #### Usage: 68 | 69 | ```javascript 70 | function myAnimationOptions( animationOptions ) { 71 | // Modify animationOptions here 72 | 73 | return animationOptions; 74 | } 75 | wp.hooks.addFilter( 'animateBlocks.animationOptions', 'myplugin/animate-blocks/animationOptions', myAnimationOptions ); 76 | ``` 77 | 78 | #### Parameters: 79 | 80 | * `animationOptions` (array) Array with animation options 81 | 82 | ### animateBlocks.easingOptions 83 | 84 | Modify easing options. 85 | 86 | #### Usage: 87 | 88 | ```javascript 89 | function myEasingOptions( easingOptions ) { 90 | // Modify easingOptions here 91 | 92 | return easingOptions; 93 | } 94 | wp.hooks.addFilter( 'animateBlocks.easingOptions', 'myplugin/animate-blocks/easingOptions', myEasingOptions ); 95 | ``` 96 | 97 | #### Parameters: 98 | 99 | * `easingOptions` (array) Array with easing options 100 | 101 | 102 | ## PHP Filters 103 | 104 | ### animate_blocks_load_aos 105 | 106 | Enable or disable loading of AOS library. 107 | 108 | #### Usage: 109 | 110 | ```php 111 | function my_plugin_disable_load_aos( $load_aos ) { 112 | $load_aos = false; 113 | return $load_aos; 114 | } 115 | add_filter( 'animate_blocks_load_aos', 'my_plugin_disable_load_aos' ); 116 | ``` 117 | 118 | #### Parameters: 119 | 120 | * `$enable_aos` (boolean) If true AOS will be loaded by the plugin. 121 | 122 | ## Developer information 123 | 124 | ### Installation 125 | 126 | 1. Clone this repo 127 | 128 | 1. Install composer dependencies 129 | 130 | ``` 131 | $ curl -s https://getcomposer.org/installer | php 132 | $ php composer.phar install 133 | $ vendor/bin/phpcs --config-set installed_paths vendor/wp-coding-standards/wpcs 134 | ``` 135 | 136 | 1. Install Node dependencies 137 | 138 | ``` 139 | $ npm install 140 | ``` 141 | 142 | ### Compile assets 143 | 144 | This project was bootstrapped with [Create Guten Block](https://github.com/ahmadawais/create-guten-block). 145 | 146 | #### `npm start` 147 | - Use to compile and run the block in development mode. 148 | - Watches for any changes and reports back any errors in your code. 149 | 150 | #### `npm run build` 151 | - Use to build production code for your block inside `dist` folder. 152 | - Runs once and reports back the gzip file sizes of the produced code. 153 | 154 | #### `npm run eject` 155 | - Use to eject your plugin out of `create-guten-block`. 156 | - Provides all the configurations so you can customize the project as you want. 157 | - It's a one-way street, `eject` and you have to maintain everything yourself. 158 | - You don't normally have to `eject` a project because by ejecting you lose the connection with `create-guten-block` and from there onwards you have to update and maintain all the dependencies on your own. 159 | 160 | ### Extract labels 161 | 162 | To extract the labels and generate the `languages/animate-blocks.pot` file run the following command: 163 | 164 | ``` 165 | $ curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar 166 | $ php wp-cli.phar i18n make-pot . languages/animate-blocks.pot 167 | ``` 168 | -------------------------------------------------------------------------------- /animate-blocks.php: -------------------------------------------------------------------------------- 1 | =5.4.0" 29 | }, 30 | "require-dev": { 31 | "phpunit/phpunit": "^4.0 || ^5.0 || ^6.0 || ^7.0" 32 | }, 33 | "bin": [ 34 | "bin/phpcs", 35 | "bin/phpcbf" 36 | ], 37 | "type": "library", 38 | "extra": { 39 | "branch-alias": { 40 | "dev-master": "3.x-dev" 41 | } 42 | }, 43 | "notification-url": "https://packagist.org/downloads/", 44 | "license": [ 45 | "BSD-3-Clause" 46 | ], 47 | "authors": [ 48 | { 49 | "name": "Greg Sherwood", 50 | "role": "lead" 51 | } 52 | ], 53 | "description": "PHP_CodeSniffer tokenizes PHP, JavaScript and CSS files and detects violations of a defined set of coding standards.", 54 | "homepage": "https://github.com/squizlabs/PHP_CodeSniffer", 55 | "keywords": [ 56 | "phpcs", 57 | "standards" 58 | ], 59 | "time": "2019-03-19T03:22:27+00:00" 60 | }, 61 | { 62 | "name": "wp-coding-standards/wpcs", 63 | "version": "2.0.0", 64 | "source": { 65 | "type": "git", 66 | "url": "https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git", 67 | "reference": "c9eaadaafefce36b3cb7e06eb15305b8c4cae9ce" 68 | }, 69 | "dist": { 70 | "type": "zip", 71 | "url": "https://api.github.com/repos/WordPress-Coding-Standards/WordPress-Coding-Standards/zipball/c9eaadaafefce36b3cb7e06eb15305b8c4cae9ce", 72 | "reference": "c9eaadaafefce36b3cb7e06eb15305b8c4cae9ce", 73 | "shasum": "" 74 | }, 75 | "require": { 76 | "php": ">=5.4", 77 | "squizlabs/php_codesniffer": "^3.3.1" 78 | }, 79 | "require-dev": { 80 | "dealerdirect/phpcodesniffer-composer-installer": "^0.5.0", 81 | "phpcompatibility/php-compatibility": "^9.0", 82 | "phpunit/phpunit": "^4.0 || ^5.0 || ^6.0 || ^7.0" 83 | }, 84 | "suggest": { 85 | "dealerdirect/phpcodesniffer-composer-installer": "^0.4.3 || This Composer plugin will sort out the PHPCS 'installed_paths' automatically." 86 | }, 87 | "type": "phpcodesniffer-standard", 88 | "notification-url": "https://packagist.org/downloads/", 89 | "license": [ 90 | "MIT" 91 | ], 92 | "authors": [ 93 | { 94 | "name": "Contributors", 95 | "homepage": "https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/graphs/contributors" 96 | } 97 | ], 98 | "description": "PHP_CodeSniffer rules (sniffs) to enforce WordPress coding conventions", 99 | "keywords": [ 100 | "phpcs", 101 | "standards", 102 | "wordpress" 103 | ], 104 | "time": "2019-01-16T10:13:16+00:00" 105 | } 106 | ], 107 | "aliases": [], 108 | "minimum-stability": "stable", 109 | "stability-flags": [], 110 | "prefer-stable": false, 111 | "prefer-lowest": false, 112 | "platform": [], 113 | "platform-dev": [] 114 | } 115 | -------------------------------------------------------------------------------- /dist/aos-3.0.0-beta.6/aos.css: -------------------------------------------------------------------------------- 1 | [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0s}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos]{pointer-events:none}[data-aos].aos-animate{pointer-events:auto}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}@media screen{html:not(.no-js) [data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;-webkit-transform:none;transform:none}html:not(.no-js) [data-aos=fade-up]{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}html:not(.no-js) [data-aos=fade-down]{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}html:not(.no-js) [data-aos=fade-right]{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0)}html:not(.no-js) [data-aos=fade-left]{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0)}html:not(.no-js) [data-aos=fade-up-right]{-webkit-transform:translate3d(-100px,100px,0);transform:translate3d(-100px,100px,0)}html:not(.no-js) [data-aos=fade-up-left]{-webkit-transform:translate3d(100px,100px,0);transform:translate3d(100px,100px,0)}html:not(.no-js) [data-aos=fade-down-right]{-webkit-transform:translate3d(-100px,-100px,0);transform:translate3d(-100px,-100px,0)}html:not(.no-js) [data-aos=fade-down-left]{-webkit-transform:translate3d(100px,-100px,0);transform:translate3d(100px,-100px,0)}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;-webkit-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}html:not(.no-js) [data-aos=zoom-in]{-webkit-transform:scale(.6);transform:scale(.6)}html:not(.no-js) [data-aos=zoom-in-up]{-webkit-transform:translate3d(0,100px,0) scale(.6);transform:translate3d(0,100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-down]{-webkit-transform:translate3d(0,-100px,0) scale(.6);transform:translate3d(0,-100px,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-right]{-webkit-transform:translate3d(-100px,0,0) scale(.6);transform:translate3d(-100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-in-left]{-webkit-transform:translate3d(100px,0,0) scale(.6);transform:translate3d(100px,0,0) scale(.6)}html:not(.no-js) [data-aos=zoom-out]{-webkit-transform:scale(1.2);transform:scale(1.2)}html:not(.no-js) [data-aos=zoom-out-up]{-webkit-transform:translate3d(0,100px,0) scale(1.2);transform:translate3d(0,100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-down]{-webkit-transform:translate3d(0,-100px,0) scale(1.2);transform:translate3d(0,-100px,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-right]{-webkit-transform:translate3d(-100px,0,0) scale(1.2);transform:translate3d(-100px,0,0) scale(1.2)}html:not(.no-js) [data-aos=zoom-out-left]{-webkit-transform:translate3d(100px,0,0) scale(1.2);transform:translate3d(100px,0,0) scale(1.2)}html:not(.no-js) [data-aos^=slide][data-aos^=slide]{transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;visibility:hidden}html:not(.no-js) [data-aos^=slide][data-aos^=slide].aos-animate{visibility:visible;-webkit-transform:translateZ(0);transform:translateZ(0)}html:not(.no-js) [data-aos=slide-up]{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}html:not(.no-js) [data-aos=slide-down]{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}html:not(.no-js) [data-aos=slide-right]{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}html:not(.no-js) [data-aos=slide-left]{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}html:not(.no-js) [data-aos^=flip][data-aos^=flip]{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}html:not(.no-js) [data-aos=flip-left]{-webkit-transform:perspective(2500px) rotateY(-100deg);transform:perspective(2500px) rotateY(-100deg)}html:not(.no-js) [data-aos=flip-left].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-right]{-webkit-transform:perspective(2500px) rotateY(100deg);transform:perspective(2500px) rotateY(100deg)}html:not(.no-js) [data-aos=flip-right].aos-animate{-webkit-transform:perspective(2500px) rotateY(0);transform:perspective(2500px) rotateY(0)}html:not(.no-js) [data-aos=flip-up]{-webkit-transform:perspective(2500px) rotateX(-100deg);transform:perspective(2500px) rotateX(-100deg)}html:not(.no-js) [data-aos=flip-up].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}html:not(.no-js) [data-aos=flip-down]{-webkit-transform:perspective(2500px) rotateX(100deg);transform:perspective(2500px) rotateX(100deg)}html:not(.no-js) [data-aos=flip-down].aos-animate{-webkit-transform:perspective(2500px) rotateX(0);transform:perspective(2500px) rotateX(0)}} -------------------------------------------------------------------------------- /dist/aos-3.0.0-beta.6/aos.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.AOS=t()}(this,function(){"use strict";var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},t="Expected a function",n=NaN,o="[object Symbol]",i=/^\s+|\s+$/g,a=/^[-+]0x[0-9a-f]+$/i,r=/^0b[01]+$/i,c=/^0o[0-7]+$/i,s=parseInt,u="object"==typeof e&&e&&e.Object===Object&&e,d="object"==typeof self&&self&&self.Object===Object&&self,l=u||d||Function("return this")(),f=Object.prototype.toString,m=Math.max,p=Math.min,b=function(){return l.Date.now()};function v(e,n,o){var i,a,r,c,s,u,d=0,l=!1,f=!1,v=!0;if("function"!=typeof e)throw new TypeError(t);function y(t){var n=i,o=a;return i=a=void 0,d=t,c=e.apply(o,n)}function h(e){var t=e-u;return void 0===u||t>=n||t<0||f&&e-d>=r}function k(){var e=b();if(h(e))return x(e);s=setTimeout(k,function(e){var t=n-(e-u);return f?p(t,r-(e-d)):t}(e))}function x(e){return s=void 0,v&&i?y(e):(i=a=void 0,c)}function O(){var e=b(),t=h(e);if(i=arguments,a=this,u=e,t){if(void 0===s)return function(e){return d=e,s=setTimeout(k,n),l?y(e):c}(u);if(f)return s=setTimeout(k,n),y(u)}return void 0===s&&(s=setTimeout(k,n)),c}return n=w(n)||0,g(o)&&(l=!!o.leading,r=(f="maxWait"in o)?m(w(o.maxWait)||0,n):r,v="trailing"in o?!!o.trailing:v),O.cancel=function(){void 0!==s&&clearTimeout(s),d=0,i=u=a=s=void 0},O.flush=function(){return void 0===s?c:x(b())},O}function g(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function w(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&f.call(e)==o}(e))return n;if(g(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=g(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(i,"");var u=r.test(e);return u||c.test(e)?s(e.slice(2),u?2:8):a.test(e)?n:+e}var y=function(e,n,o){var i=!0,a=!0;if("function"!=typeof e)throw new TypeError(t);return g(o)&&(i="leading"in o?!!o.leading:i,a="trailing"in o?!!o.trailing:a),v(e,n,{leading:i,maxWait:n,trailing:a})},h="Expected a function",k=NaN,x="[object Symbol]",O=/^\s+|\s+$/g,j=/^[-+]0x[0-9a-f]+$/i,E=/^0b[01]+$/i,N=/^0o[0-7]+$/i,z=parseInt,C="object"==typeof e&&e&&e.Object===Object&&e,A="object"==typeof self&&self&&self.Object===Object&&self,q=C||A||Function("return this")(),L=Object.prototype.toString,T=Math.max,M=Math.min,S=function(){return q.Date.now()};function D(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function H(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&L.call(e)==x}(e))return k;if(D(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=D(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(O,"");var n=E.test(e);return n||N.test(e)?z(e.slice(2),n?2:8):j.test(e)?k:+e}var $=function(e,t,n){var o,i,a,r,c,s,u=0,d=!1,l=!1,f=!0;if("function"!=typeof e)throw new TypeError(h);function m(t){var n=o,a=i;return o=i=void 0,u=t,r=e.apply(a,n)}function p(e){var n=e-s;return void 0===s||n>=t||n<0||l&&e-u>=a}function b(){var e=S();if(p(e))return v(e);c=setTimeout(b,function(e){var n=t-(e-s);return l?M(n,a-(e-u)):n}(e))}function v(e){return c=void 0,f&&o?m(e):(o=i=void 0,r)}function g(){var e=S(),n=p(e);if(o=arguments,i=this,s=e,n){if(void 0===c)return function(e){return u=e,c=setTimeout(b,t),d?m(e):r}(s);if(l)return c=setTimeout(b,t),m(s)}return void 0===c&&(c=setTimeout(b,t)),r}return t=H(t)||0,D(n)&&(d=!!n.leading,a=(l="maxWait"in n)?T(H(n.maxWait)||0,t):a,f="trailing"in n?!!n.trailing:f),g.cancel=function(){void 0!==c&&clearTimeout(c),u=0,o=s=i=c=void 0},g.flush=function(){return void 0===c?r:v(S())},g},W=function(){};function P(e){e&&e.forEach(function(e){var t=Array.prototype.slice.call(e.addedNodes),n=Array.prototype.slice.call(e.removedNodes);if(function e(t){var n=void 0,o=void 0;for(n=0;n=o.out&&!n.once?a():t>=o.in?e.animated||(function(e,t){t&&t.forEach(function(t){return e.classList.add(t)})}(i,n.animatedClassNames),V("aos:in",i),e.options.id&&V("aos:in:"+e.options.id,i),e.animated=!0):e.animated&&!n.once&&a()}(e,window.pageYOffset)})},Z=function(e){for(var t=0,n=0;e&&!isNaN(e.offsetLeft)&&!isNaN(e.offsetTop);)t+=e.offsetLeft-("BODY"!=e.tagName?e.scrollLeft:0),n+=e.offsetTop-("BODY"!=e.tagName?e.scrollTop:0),e=e.offsetParent;return{top:n,left:t}},ee=function(e,t,n){var o=e.getAttribute("data-aos-"+t);if(void 0!==o){if("true"===o)return!0;if("false"===o)return!1}return o||n},te=function(e,t){return e.forEach(function(e,n){var o=ee(e.node,"mirror",t.mirror),i=ee(e.node,"once",t.once),a=ee(e.node,"id"),r=t.useClassNames&&e.node.getAttribute("data-aos"),c=[t.animatedClassName].concat(r?r.split(" "):[]).filter(function(e){return"string"==typeof e});t.initClassName&&e.node.classList.add(t.initClassName),e.position={in:function(e,t,n){var o=window.innerHeight,i=ee(e,"anchor"),a=ee(e,"anchor-placement"),r=Number(ee(e,"offset",a?0:t)),c=a||n,s=e;i&&document.querySelectorAll(i)&&(s=document.querySelectorAll(i)[0]);var u=Z(s).top-o;switch(c){case"top-bottom":break;case"center-bottom":u+=s.offsetHeight/2;break;case"bottom-bottom":u+=s.offsetHeight;break;case"top-center":u+=o/2;break;case"center-center":u+=o/2+s.offsetHeight/2;break;case"bottom-center":u+=o/2+s.offsetHeight;break;case"top-top":u+=o;break;case"bottom-top":u+=o+s.offsetHeight;break;case"center-top":u+=o+s.offsetHeight/2}return u+r}(e.node,t.offset,t.anchorPlacement),out:o&&function(e,t){window.innerHeight;var n=ee(e,"anchor"),o=ee(e,"offset",t),i=e;return n&&document.querySelectorAll(n)&&(i=document.querySelectorAll(n)[0]),Z(i).top+i.offsetHeight-o}(e.node,t.offset)},e.options={once:i,mirror:o,animatedClassNames:c,id:a}}),e},ne=function(){var e=document.querySelectorAll("[data-aos]");return Array.prototype.map.call(e,function(e){return{node:e}})},oe=[],ie=!1,ae={offset:120,delay:0,easing:"ease",duration:400,disable:!1,once:!1,mirror:!1,anchorPlacement:"top-bottom",startEvent:"DOMContentLoaded",animatedClassName:"aos-animate",initClassName:"aos-init",useClassNames:!1,disableMutationObserver:!1,throttleDelay:99,debounceDelay:50},re=function(){return document.all&&!window.atob},ce=function(){arguments.length>0&&void 0!==arguments[0]&&arguments[0]&&(ie=!0),ie&&(oe=te(oe,ae),X(oe),window.addEventListener("scroll",y(function(){X(oe,ae.once)},ae.throttleDelay)))},se=function(){if(oe=ne(),de(ae.disable)||re())return ue();ce()},ue=function(){oe.forEach(function(e,t){e.node.removeAttribute("data-aos"),e.node.removeAttribute("data-aos-easing"),e.node.removeAttribute("data-aos-duration"),e.node.removeAttribute("data-aos-delay"),ae.initClassName&&e.node.classList.remove(ae.initClassName),ae.animatedClassName&&e.node.classList.remove(ae.animatedClassName)})},de=function(e){return!0===e||"mobile"===e&&U.mobile()||"phone"===e&&U.phone()||"tablet"===e&&U.tablet()||"function"==typeof e&&!0===e()};return{init:function(e){return ae=I(ae,e),oe=ne(),ae.disableMutationObserver||_.isSupported()||(console.info('\n aos: MutationObserver is not supported on this browser,\n code mutations observing has been disabled.\n You may have to call "refreshHard()" by yourself.\n '),ae.disableMutationObserver=!0),ae.disableMutationObserver||_.ready("[data-aos]",se),de(ae.disable)||re()?ue():(document.querySelector("body").setAttribute("data-aos-easing",ae.easing),document.querySelector("body").setAttribute("data-aos-duration",ae.duration),document.querySelector("body").setAttribute("data-aos-delay",ae.delay),-1===["DOMContentLoaded","load"].indexOf(ae.startEvent)?document.addEventListener(ae.startEvent,function(){ce(!0)}):window.addEventListener("load",function(){ce(!0)}),"DOMContentLoaded"===ae.startEvent&&["complete","interactive"].indexOf(document.readyState)>-1&&ce(!0),window.addEventListener("resize",$(ce,ae.debounceDelay,!0)),window.addEventListener("orientationchange",$(ce,ae.debounceDelay,!0)),oe)},refresh:ce,refreshHard:se}}); 2 | -------------------------------------------------------------------------------- /dist/aos-init.js: -------------------------------------------------------------------------------- 1 | AOS.init( { 2 | once: true, // whether animation should happen only once - while scrolling down 3 | } ); 4 | -------------------------------------------------------------------------------- /dist/blocks.build.js: -------------------------------------------------------------------------------- 1 | !function(e){function a(l){if(t[l])return t[l].exports;var n=t[l]={i:l,l:!1,exports:{}};return e[l].call(n.exports,n,n.exports,a),n.l=!0,n.exports}var t={};a.m=e,a.c=t,a.d=function(e,t,l){a.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:l})},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},a.p="",a(a.s=0)}([function(e,a,t){"use strict";Object.defineProperty(a,"__esModule",{value:!0});t(1)},function(e,a,t){"use strict";var l=t(2),n=t(3),o=t(4),i=Object.assign||function(e){for(var a=1;a0?n.a[0].value:"fade",offset:120,delay:0,duration:400,easing:o.a&&o.a.length>0?o.a[0].value:"ease",once:!0,mirror:!1,anchorPlacement:l.a&&l.a.length>0?l.a[0].value:"top-bottom"};y=g("animateBlocks.defaultOptions",y),r("animate-blocks/animate",{title:s("Animate Block","animate-blocks"),icon:"controls-forward",category:"layout",description:s("Animate blocks inside this container.","animate-blocks"),attributes:{animation:{type:"string",default:y.animation},offset:{type:"number",default:y.offset},delay:{type:"number",default:y.delay},duration:{type:"number",default:y.duration},easing:{type:"string",default:y.easing},once:{type:"boolean",default:y.once},mirror:{type:"boolean",default:y.mirror},anchorPlacement:{type:"string",default:y.anchorPlacement}},edit:function(e){var a=e.attributes,t=e.setAttributes,i=e.className,r=a.animation,c=void 0===r?"":r,p=a.offset,g=a.delay,w=a.duration,y=a.easing,E=a.once,C=a.mirror,F=a.anchorPlacement;return wp.element.createElement(u,null,wp.element.createElement(b,null,wp.element.createElement(d,{title:s("Animation options","animate-blocks"),initialOpen:!0},wp.element.createElement(k,{label:s("Animation","animate-blocks"),value:c,options:n.a,onChange:function(e){return t({animation:e})}}),wp.element.createElement(h,{label:s("Delay (ms)"),value:g,onChange:function(e){return t({delay:e})},min:0,max:3e3,step:50}),wp.element.createElement(h,{label:s("Duration (ms)"),value:w,onChange:function(e){return t({duration:e})},min:0,max:3e3,step:50}),wp.element.createElement(f,{label:s("Offset (px)","animate-blocks"),help:s("offset (in px) from the original trigger point","animate-blocks"),type:"number",value:p,onChange:function(e){return t({offset:e})}}),wp.element.createElement(k,{label:s("Easing","animate-blocks"),help:s("easing function for animations","animate-blocks"),value:y,options:o.a,onChange:function(e){return t({easing:e})}}),wp.element.createElement(v,{label:s("Once","animate-blocks"),help:"whether animation should happen only once - while scrolling down",checked:E,onChange:function(e){return t({once:e})}}),wp.element.createElement(v,{label:s("Mirror","animate-blocks"),help:"whether elements should animate out while scrolling past them",checked:C,onChange:function(e){return t({mirror:e})}}),wp.element.createElement(k,{label:s("Anchor placement","animate-blocks"),help:s("defines which position of the element regarding to window should trigger the animation","animate-blocks"),value:F,options:l.a,onChange:function(e){return t({anchorPlacement:e})}}))),wp.element.createElement("div",{className:i},wp.element.createElement(m,null)))},save:function(e){var a=e.attributes,t=e.className,l=a.animation,n=void 0===l?"":l,o=a.offset,s=a.delay,r=a.duration,u=a.easing,c=a.once,b=a.mirror,p=a.anchorPlacement;return wp.element.createElement("div",i({className:t,"data-aos":n},s!==w.delay&&{"data-aos-delay":s},r!==w.duration&&{"data-aos-duration":r},o!==w.offset&&{"data-aos-offset":o},u!==w.easing&&{"data-aos-easing":u},c!==w.once&&{"data-aos-once":c},b!==w.mirror&&{"data-aos-mirror":b},p!==w.anchorPlacement&&{"data-aos-anchor-placement":p}),wp.element.createElement(m.Content,null))}})},function(e,a,t){"use strict";var l=wp.hooks.applyFilters,n=wp.i18n.__,o=[{label:n("Top Bottom","animate-blocks"),value:"top-bottom"},{label:n("Top Center","animate-blocks"),value:"top-center"},{label:n("Top Top","animate-blocks"),value:"top-top"},{label:n("Center Bottom","animate-blocks"),value:"center-bottom"},{label:n("Center Center","animate-blocks"),value:"center-center"},{label:n("Center Top","animate-blocks"),value:"center-top"},{label:n("Bottom Bottom","animate-blocks"),value:"bottom-bottom"},{label:n("Bottom Center","animate-blocks"),value:"bottom-center"},{label:n("Bottom Top","animate-blocks"),value:"bottom-top"}];o=l("animateBlocks.anchorPlacementOptions",o),a.a=o},function(e,a,t){"use strict";var l=wp.hooks.applyFilters,n=wp.i18n.__,o=[{label:n("Fade","animate-blocks"),value:"fade"},{label:n("Fade up","animate-blocks"),value:"fade-up"},{label:n("Fade down","animate-blocks"),value:"fade-down"},{label:n("Fade left","animate-blocks"),value:"fade-left"},{label:n("Fade right","animate-blocks"),value:"fade-right"},{label:n("Fade up right","animate-blocks"),value:"fade-up-right"},{label:n("Fade up left","animate-blocks"),value:"fade-up-left"},{label:n("Fade down right","animate-blocks"),value:"fade-down-right"},{label:n("Fade down left","animate-blocks"),value:"fade-down-left"},{label:n("Flip up","animate-blocks"),value:"flip-up"},{label:n("Flip down","animate-blocks"),value:"flip-down"},{label:n("Flip left","animate-blocks"),value:"flip-left"},{label:n("Flip right","animate-blocks"),value:"flip-right"},{label:n("Slide up","animate-blocks"),value:"slide-up"},{label:n("Slide down","animate-blocks"),value:"slide-down"},{label:n("Slide left","animate-blocks"),value:"slide-left"},{label:n("Slide right","animate-blocks"),value:"slide-right"},{label:n("Zoom in","animate-blocks"),value:"zoom-in"},{label:n("Zoom in up","animate-blocks"),value:"zoom-in-up"},{label:n("Zoom in down","animate-blocks"),value:"zoom-in-down"},{label:n("Zoom in left","animate-blocks"),value:"zoom-in-left"},{label:n("Zoom in right","animate-blocks"),value:"zoom-in-right"},{label:n("Zoom out","animate-blocks"),value:"zoom-out"},{label:n("Zoom out up","animate-blocks"),value:"zoom-out-up"},{label:n("Zoom out down","animate-blocks"),value:"zoom-out-down"},{label:n("Zoom out left","animate-blocks"),value:"zoom-out-left"},{label:n("Zoom out right","animate-blocks"),value:"zoom-out-right"}],i={label:n("No Animation","animate-blocks"),value:""};o=l("animateBlocks.animationOptions",o),o=[i].concat(function(e){if(Array.isArray(e)){for(var a=0,t=Array(e.length);a\n" 8 | "Language-Team: LANGUAGE \n" 9 | "MIME-Version: 1.0\n" 10 | "Content-Type: text/plain; charset=UTF-8\n" 11 | "Content-Transfer-Encoding: 8bit\n" 12 | "POT-Creation-Date: 2019-03-29T19:47:48+00:00\n" 13 | "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" 14 | "X-Generator: WP-CLI 2.1.0\n" 15 | "X-Domain: animate-blocks\n" 16 | 17 | #. Plugin Name of the plugin 18 | msgid "Animate Blocks" 19 | msgstr "" 20 | 21 | #. Plugin URI of the plugin 22 | msgid "https://github.com/liip/animate-blocks-wordpress-plugin" 23 | msgstr "" 24 | 25 | #. Description of the plugin 26 | msgid "Animate your Gutenberg blocks." 27 | msgstr "" 28 | 29 | #. Author of the plugin 30 | msgid "Liip AG" 31 | msgstr "" 32 | 33 | #. Author URI of the plugin 34 | msgid "https://liip.ch" 35 | msgstr "" 36 | 37 | #: src/class-animate-blocks.php:170 38 | #: src/class-animate-blocks.php:177 39 | msgid "Cheatin’ huh?" 40 | msgstr "" 41 | 42 | #: src/animate/easing-options.js:6 43 | msgid "Ease" 44 | msgstr "" 45 | 46 | #: src/animate/easing-options.js:10 47 | msgid "Ease in" 48 | msgstr "" 49 | 50 | #: src/animate/easing-options.js:14 51 | msgid "Ease out" 52 | msgstr "" 53 | 54 | #: src/animate/easing-options.js:18 55 | msgid "Ease in out" 56 | msgstr "" 57 | 58 | #: src/animate/easing-options.js:22 59 | msgid "Ease in back" 60 | msgstr "" 61 | 62 | #: src/animate/easing-options.js:26 63 | msgid "Ease out back" 64 | msgstr "" 65 | 66 | #: src/animate/easing-options.js:30 67 | msgid "Ease in out back" 68 | msgstr "" 69 | 70 | #: src/animate/easing-options.js:34 71 | msgid "Ease in sine" 72 | msgstr "" 73 | 74 | #: src/animate/easing-options.js:38 75 | msgid "Ease out sine" 76 | msgstr "" 77 | 78 | #: src/animate/easing-options.js:42 79 | msgid "Ease in out sine" 80 | msgstr "" 81 | 82 | #: src/animate/easing-options.js:46 83 | msgid "Ease in quad" 84 | msgstr "" 85 | 86 | #: src/animate/easing-options.js:50 87 | msgid "Ease out quad" 88 | msgstr "" 89 | 90 | #: src/animate/easing-options.js:54 91 | msgid "Ease in out quad" 92 | msgstr "" 93 | 94 | #: src/animate/easing-options.js:58 95 | msgid "Ease in cubic" 96 | msgstr "" 97 | 98 | #: src/animate/easing-options.js:62 99 | msgid "Ease out cubic" 100 | msgstr "" 101 | 102 | #: src/animate/easing-options.js:66 103 | msgid "Ease in out cubic" 104 | msgstr "" 105 | 106 | #: src/animate/easing-options.js:70 107 | msgid "Ease in quart" 108 | msgstr "" 109 | 110 | #: src/animate/easing-options.js:74 111 | msgid "Ease out quart" 112 | msgstr "" 113 | 114 | #: src/animate/easing-options.js:78 115 | msgid "Ease in out quart" 116 | msgstr "" 117 | 118 | #: src/animate/easing-options.js:82 119 | msgid "Linear" 120 | msgstr "" 121 | 122 | #: src/animate/anchor-placement-options.js:6 123 | msgid "Top Bottom" 124 | msgstr "" 125 | 126 | #: src/animate/anchor-placement-options.js:10 127 | msgid "Top Center" 128 | msgstr "" 129 | 130 | #: src/animate/anchor-placement-options.js:14 131 | msgid "Top Top" 132 | msgstr "" 133 | 134 | #: src/animate/anchor-placement-options.js:18 135 | msgid "Center Bottom" 136 | msgstr "" 137 | 138 | #: src/animate/anchor-placement-options.js:22 139 | msgid "Center Center" 140 | msgstr "" 141 | 142 | #: src/animate/anchor-placement-options.js:26 143 | msgid "Center Top" 144 | msgstr "" 145 | 146 | #: src/animate/anchor-placement-options.js:30 147 | msgid "Bottom Bottom" 148 | msgstr "" 149 | 150 | #: src/animate/anchor-placement-options.js:34 151 | msgid "Bottom Center" 152 | msgstr "" 153 | 154 | #: src/animate/anchor-placement-options.js:38 155 | msgid "Bottom Top" 156 | msgstr "" 157 | 158 | #: src/animate/animation-options.js:6 159 | msgid "Fade" 160 | msgstr "" 161 | 162 | #: src/animate/animation-options.js:10 163 | msgid "Fade up" 164 | msgstr "" 165 | 166 | #: src/animate/animation-options.js:14 167 | msgid "Fade down" 168 | msgstr "" 169 | 170 | #: src/animate/animation-options.js:18 171 | msgid "Fade left" 172 | msgstr "" 173 | 174 | #: src/animate/animation-options.js:22 175 | msgid "Fade right" 176 | msgstr "" 177 | 178 | #: src/animate/animation-options.js:26 179 | msgid "Fade up right" 180 | msgstr "" 181 | 182 | #: src/animate/animation-options.js:30 183 | msgid "Fade up left" 184 | msgstr "" 185 | 186 | #: src/animate/animation-options.js:34 187 | msgid "Fade down right" 188 | msgstr "" 189 | 190 | #: src/animate/animation-options.js:38 191 | msgid "Fade down left" 192 | msgstr "" 193 | 194 | #: src/animate/animation-options.js:42 195 | msgid "Flip up" 196 | msgstr "" 197 | 198 | #: src/animate/animation-options.js:46 199 | msgid "Flip down" 200 | msgstr "" 201 | 202 | #: src/animate/animation-options.js:50 203 | msgid "Flip left" 204 | msgstr "" 205 | 206 | #: src/animate/animation-options.js:54 207 | msgid "Flip right" 208 | msgstr "" 209 | 210 | #: src/animate/animation-options.js:58 211 | msgid "Slide up" 212 | msgstr "" 213 | 214 | #: src/animate/animation-options.js:62 215 | msgid "Slide down" 216 | msgstr "" 217 | 218 | #: src/animate/animation-options.js:66 219 | msgid "Slide left" 220 | msgstr "" 221 | 222 | #: src/animate/animation-options.js:70 223 | msgid "Slide right" 224 | msgstr "" 225 | 226 | #: src/animate/animation-options.js:74 227 | msgid "Zoom in" 228 | msgstr "" 229 | 230 | #: src/animate/animation-options.js:78 231 | msgid "Zoom in up" 232 | msgstr "" 233 | 234 | #: src/animate/animation-options.js:82 235 | msgid "Zoom in down" 236 | msgstr "" 237 | 238 | #: src/animate/animation-options.js:86 239 | msgid "Zoom in left" 240 | msgstr "" 241 | 242 | #: src/animate/animation-options.js:90 243 | msgid "Zoom in right" 244 | msgstr "" 245 | 246 | #: src/animate/animation-options.js:94 247 | msgid "Zoom out" 248 | msgstr "" 249 | 250 | #: src/animate/animation-options.js:98 251 | msgid "Zoom out up" 252 | msgstr "" 253 | 254 | #: src/animate/animation-options.js:102 255 | msgid "Zoom out down" 256 | msgstr "" 257 | 258 | #: src/animate/animation-options.js:106 259 | msgid "Zoom out left" 260 | msgstr "" 261 | 262 | #: src/animate/animation-options.js:110 263 | msgid "Zoom out right" 264 | msgstr "" 265 | 266 | #: src/animate/animation-options.js:115 267 | msgid "No Animation" 268 | msgstr "" 269 | 270 | #: src/animate/block.js:50 271 | msgid "Animate Block" 272 | msgstr "" 273 | 274 | #: src/animate/block.js:53 275 | msgid "Animate blocks inside this container." 276 | msgstr "" 277 | 278 | #: src/animate/block.js:106 279 | msgid "Animation options" 280 | msgstr "" 281 | 282 | #: src/animate/block.js:110 283 | msgid "Animation" 284 | msgstr "" 285 | 286 | #: src/animate/block.js:132 287 | msgid "Offset (px)" 288 | msgstr "" 289 | 290 | #: src/animate/block.js:133 291 | msgid "offset (in px) from the original trigger point" 292 | msgstr "" 293 | 294 | #: src/animate/block.js:139 295 | msgid "Easing" 296 | msgstr "" 297 | 298 | #: src/animate/block.js:140 299 | msgid "easing function for animations" 300 | msgstr "" 301 | 302 | #: src/animate/block.js:146 303 | msgid "Once" 304 | msgstr "" 305 | 306 | #: src/animate/block.js:152 307 | msgid "Mirror" 308 | msgstr "" 309 | 310 | #: src/animate/block.js:158 311 | msgid "Anchor placement" 312 | msgstr "" 313 | 314 | #: src/animate/block.js:159 315 | msgid "defines which position of the element regarding to window should trigger the animation" 316 | msgstr "" 317 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "animate-blocks", 3 | "version": "1.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "cgb-scripts start", 7 | "build": "cgb-scripts build", 8 | "eject": "cgb-scripts eject", 9 | "lint": "eslint src/" 10 | }, 11 | "dependencies": { 12 | "aos": "^3.0.0-beta.6", 13 | "cgb-scripts": "1.15.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /phpcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Coding standards for animate-blocks 4 | 5 | */vendor/* 6 | */node_modules/* 7 | assets/* 8 | dist/* 9 | tests/* 10 | src/*\.(inc|css|js)$ 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- 1 | === Animate Blocks === 2 | Contributors: liip, tschortsch 3 | Donate link: https://liip.ch/ 4 | Tags: gutenberg, blocks, animations 5 | Requires at least: 5.0 6 | Tested up to: 5.1.1 7 | Requires PHP: 5.6 8 | Stable tag: 1.0.1 9 | License: GPLv2 10 | License URI: https://www.gnu.org/licenses/gpl-2.0.html 11 | 12 | Animate Gutenberg blocks plugin for WordPress. 13 | 14 | == Description == 15 | Animate Gutenberg blocks when they scroll into view. 16 | 17 | * Works with all existing Gutenberg blocks 18 | * Choose from 27 different animations 19 | * Configure animation with custom delays, offsets and durations 20 | * Based on [AOS Animate On Scroll Library](http://michalsnik.github.io/aos/) 21 | 22 | = Requirements = 23 | * WordPress >= 5.0 24 | * PHP >= 5.6 25 | 26 | = Further Information = 27 | 28 | * Documentation: [https://github.com/liip/animate-blocks-wordpress-plugin/blob/master/README.md](https://github.com/liip/animate-blocks-wordpress-plugin/blob/master/README.md) 29 | * WordPress Plugin: [https://wordpress.org/plugins/animate-blocks/](https://wordpress.org/plugins/animate-blocks/) 30 | * GitHub Repository: [https://github.com/liip/animate-blocks-wordpress-plugin](https://github.com/liip/animate-blocks-wordpress-plugin) 31 | * Changelog: [https://github.com/liip/animate-blocks-wordpress-plugin/releases](https://github.com/liip/animate-blocks-wordpress-plugin/releases) 32 | * Issue tracker: [https://github.com/liip/animate-blocks-wordpress-plugin/issues](https://github.com/liip/animate-blocks-wordpress-plugin/issues) 33 | 34 | == Installation == 35 | 36 | 1. Upload the `animate-blocks` directory into the `/wp-content/plugins/` directory 37 | 1. Activate the plugin through the `Plugins` menu in WordPress 38 | 1. Add `Animate Blocks` block around other block in Gutenberg editor 39 | 40 | == Frequently Asked Questions == 41 | 42 | = How does it work? = 43 | 44 | Animate blocks is based on the `InnerBlocks` feature of Gutenberg. It wraps the blocks which should be animated. You can add as many blocks inside this wrapper block as you want. 45 | 46 | = Have you found a bug or do you have a feature request? = 47 | 48 | Please create a new GitHub issue and let us know: [https://github.com/liip/animate-blocks-wordpress-plugin/issues](https://github.com/liip/animate-blocks-wordpress-plugin/issues) 49 | 50 | == Screenshots == 51 | 52 | 1. Animate Blocks in Gutenberg editor 53 | 54 | == Changelog == 55 | 56 | = 1.0.1 = 57 | 58 | * [BUGFIX] Fix rendering of data-attributes when default options are changed. 59 | 60 | = 1.0.0 = 61 | 62 | * Initial release of this plugin 63 | -------------------------------------------------------------------------------- /screenshot-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liip/animate-blocks-wordpress-plugin/5a839664a84c56d28ff21badfe5c4451844abe76/screenshot-1.png -------------------------------------------------------------------------------- /scripts/deploy-wp-plugin.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | # Author: Juerg Hunziker 3 | # 4 | # This script has been created based on the wordpress-plugin-git-flow-svn-deploy script from Gary Jones (Thx!). 5 | # See https://github.com/GaryJones/wordpress-plugin-git-flow-svn-deploy for instructions and credits. 6 | 7 | echo 8 | echo "WordPress Plugin Git to SVN release script - v1.0.0" 9 | echo 10 | 11 | HERE="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )" 12 | 13 | # All paths have to be absolute! 14 | # Set SVNPASSWORD environment variable to not promt password during deployment 15 | PLUGINSLUG="animate-blocks" 16 | SVNURL="https://plugins.svn.wordpress.org/$PLUGINSLUG" 17 | SVNUSER=liip 18 | SOURCEPATH="$HERE/.." # this file should be in the base of your git repository 19 | BUILDPATH="$SOURCEPATH/build" 20 | MAINFILE="$PLUGINSLUG.php" 21 | 22 | echo "Deploy with following configuration" 23 | echo 24 | echo "Slug: $PLUGINSLUG" 25 | echo "Build path: $BUILDPATH" 26 | echo "Remote SVN repo: $SVNURL" 27 | echo "SVN username: $SVNUSER" 28 | echo "Source path: $SOURCEPATH" 29 | echo "Main file: $MAINFILE" 30 | echo 31 | 32 | # Let's begin... 33 | echo ".........................................." 34 | echo 35 | echo "Preparing to deploy WordPress plugin" 36 | echo 37 | echo ".........................................." 38 | echo 39 | 40 | # Check version in readme.txt is the same as plugin file after translating both to unix line breaks to work around grep's failure to identify mac line breaks 41 | PLUGINVERSION=`grep "Version:" $SOURCEPATH/$MAINFILE | awk -F' ' '{print $NF}' | tr -d '\r'` 42 | echo "$MAINFILE version: $PLUGINVERSION" 43 | READMEVERSION=`grep "^Stable tag:" $SOURCEPATH/readme.txt | awk -F' ' '{print $NF}' | tr -d '\r'` 44 | echo "readme.txt version: $READMEVERSION" 45 | 46 | if [ "$READMEVERSION" = "trunk" ]; then 47 | echo "Version in readme.txt & $MAINFILE don't match, but Stable tag is trunk. Let's proceed..." 48 | elif [ "$PLUGINVERSION" != "$READMEVERSION" ]; then 49 | echo "Version in readme.txt & $MAINFILE don't match. Exiting...." 50 | exit 1; 51 | elif [ "$PLUGINVERSION" = "$READMEVERSION" ]; then 52 | echo "Versions match in readme.txt and $MAINFILE. Let's proceed..." 53 | fi 54 | 55 | echo 56 | echo "Creating local copy of SVN repo trunk ..." 57 | svn checkout $SVNURL $BUILDPATH --depth immediates 58 | svn update --quiet $BUILDPATH/trunk --set-depth infinity 59 | echo "Clearing SVN repo trunk so we can overwrite it" 60 | rm -rf $BUILDPATH/trunk/* 61 | 62 | echo "Ignoring os specific files" 63 | svn propset svn:ignore ".DS_Store 64 | Thumbs.db" "$BUILDPATH/trunk/" 65 | 66 | echo "Copying required plugin files to SVN trunk" 67 | cp $SOURCEPATH/readme.txt $BUILDPATH/trunk/ 68 | cp $SOURCEPATH/animate-blocks.php $BUILDPATH/trunk/ 69 | cp $SOURCEPATH/screenshot* $BUILDPATH/trunk/ 70 | cp -R $SOURCEPATH/dist $BUILDPATH/trunk/ 71 | cp -R $SOURCEPATH/languages $BUILDPATH/trunk/ 72 | cp -R $SOURCEPATH/src $BUILDPATH/trunk/ 73 | 74 | echo "Changing directory to SVN and committing to trunk" 75 | cd $BUILDPATH/trunk/ 76 | 77 | # Delete all files that should not now be added. 78 | svn status | grep -v "^.[ \t]*\..*" | grep "^\!" | awk '{print $2"@"}' | xargs svn del 79 | # Add all new files that are not set to be ignored 80 | svn status | grep -v "^.[ \t]*\..*" | grep "^?" | awk '{print $2"@"}' | xargs svn add 81 | # Fix image mime-types (see: https://developer.wordpress.org/plugins/wordpress-org/plugin-assets/) 82 | svn propset svn:mime-type image/png *.png 83 | 84 | # Commit all changes 85 | # If password is set as environment variable ($SVNPASSWORD) use it otherwise promt password 86 | if [ ! -z "$SVNPASSWORD" ]; then 87 | svn commit --username=$SVNUSER --password=$SVNPASSWORD -m "Preparing for $PLUGINVERSION release" --no-auth-cache 88 | else 89 | svn commit --username=$SVNUSER -m "Preparing for $PLUGINVERSION release" --no-auth-cache 90 | fi 91 | 92 | # Update WordPress plugin assets 93 | # Make the directory if it doesn't already exist 94 | mkdir -p $BUILDPATH/assets/ 95 | svn update --quiet $BUILDPATH/assets --set-depth infinity 96 | echo "Clearing SVN repo assets so we can overwrite it" 97 | rm -rf $BUILDPATH/assets/* 98 | echo "Copying assets fiels to SVN assets" 99 | cp -R $SOURCEPATH/.wordpress/* $BUILDPATH/assets/ 100 | 101 | echo "Updating WordPress plugin assets and committing" 102 | cd $BUILDPATH/assets/ 103 | # Delete all new files that are not set to be ignored 104 | svn status | grep -v "^.[ \t]*\..*" | grep "^\!" | awk '{print $2"@"}' | xargs svn del 105 | # Add all new files that are not set to be ignored 106 | svn status | grep -v "^.[ \t]*\..*" | grep "^?" | awk '{print $2"@"}' | xargs svn add 107 | #svn update --accept mine-full $BUILDPATH/assets/* 108 | # Fix image mime-types (see: https://developer.wordpress.org/plugins/wordpress-org/plugin-assets/) 109 | svn propset svn:mime-type image/png *.png 110 | 111 | # Commit all changes 112 | # If password is set as environment variable ($SVNPASSWORD) use it otherwise promt password 113 | if [ ! -z "$SVNPASSWORD" ]; then 114 | svn commit --username=$SVNUSER --password=$SVNPASSWORD -m "Updating assets" --no-auth-cache 115 | else 116 | svn commit --username=$SVNUSER -m "Updating assets" --no-auth-cache 117 | fi 118 | 119 | echo "Creating new SVN tag and committing it" 120 | cd $BUILDPATH 121 | svn update --quiet $BUILDPATH/tags/$PLUGINVERSION 122 | 123 | # if tag already exists update sources otherwise create new 124 | if [ -d "$BUILDPATH/tags/$PLUGINVERSION/" ]; then 125 | cd $BUILDPATH/tags/$PLUGINVERSION 126 | cp -R $BUILDPATH/trunk/* $BUILDPATH/tags/$PLUGINVERSION/ 127 | # Delete all files that should not now be added. 128 | svn status | grep -v "^.[ \t]*\..*" | grep "^\!" | awk '{print $2"@"}' | xargs svn del 129 | # Add all new files that are not set to be ignored 130 | svn status | grep -v "^.[ \t]*\..*" | grep "^?" | awk '{print $2"@"}' | xargs svn add 131 | # Fix image mime-types (see: https://developer.wordpress.org/plugins/wordpress-org/plugin-assets/) 132 | svn propset svn:mime-type image/png *.png 133 | else 134 | svn copy --quiet $BUILDPATH/trunk/ $BUILDPATH/tags/$PLUGINVERSION/ 135 | cd $BUILDPATH/tags/$PLUGINVERSION 136 | fi 137 | 138 | # Commit plugin version 139 | # If password is set as environment variable ($SVNPASSWORD) use it otherwise promt password 140 | if [ ! -z "$SVNPASSWORD" ]; then 141 | svn commit --username=$SVNUSER --password=$SVNPASSWORD -m "Tagging version $PLUGINVERSION" --no-auth-cache 142 | else 143 | svn commit --username=$SVNUSER -m "Tagging version $PLUGINVERSION" --no-auth-cache 144 | fi 145 | 146 | echo "Successfully released v$PLUGINVERSION of the $PLUGINSLUG plugin!" 147 | echo 148 | echo "*** FIN ***" 149 | -------------------------------------------------------------------------------- /scripts/phpcodesniffer.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | HERE=`dirname $0` 4 | ROOT="$HERE/.." 5 | 6 | files_to_check=$1 7 | if [ -z "$1" ]; then 8 | files_to_check="${ROOT}" 9 | fi 10 | 11 | $ROOT/vendor/bin/phpcs -p --extensions=php --report-width=100 "$files_to_check" 12 | exit $? 13 | -------------------------------------------------------------------------------- /src/animate/anchor-placement-options.js: -------------------------------------------------------------------------------- 1 | const { applyFilters } = wp.hooks; 2 | const { __ } = wp.i18n; 3 | 4 | let anchorPlacementOptions = [ 5 | { 6 | label: __( 'Top Bottom', 'animate-blocks' ), 7 | value: 'top-bottom', 8 | }, 9 | { 10 | label: __( 'Top Center', 'animate-blocks' ), 11 | value: 'top-center', 12 | }, 13 | { 14 | label: __( 'Top Top', 'animate-blocks' ), 15 | value: 'top-top', 16 | }, 17 | { 18 | label: __( 'Center Bottom', 'animate-blocks' ), 19 | value: 'center-bottom', 20 | }, 21 | { 22 | label: __( 'Center Center', 'animate-blocks' ), 23 | value: 'center-center', 24 | }, 25 | { 26 | label: __( 'Center Top', 'animate-blocks' ), 27 | value: 'center-top', 28 | }, 29 | { 30 | label: __( 'Bottom Bottom', 'animate-blocks' ), 31 | value: 'bottom-bottom', 32 | }, 33 | { 34 | label: __( 'Bottom Center', 'animate-blocks' ), 35 | value: 'bottom-center', 36 | }, 37 | { 38 | label: __( 'Bottom Top', 'animate-blocks' ), 39 | value: 'bottom-top', 40 | }, 41 | ]; 42 | anchorPlacementOptions = applyFilters( 'animateBlocks.anchorPlacementOptions', anchorPlacementOptions ); 43 | 44 | export default anchorPlacementOptions; 45 | -------------------------------------------------------------------------------- /src/animate/animation-options.js: -------------------------------------------------------------------------------- 1 | const { applyFilters } = wp.hooks; 2 | const { __ } = wp.i18n; 3 | 4 | let animationOptions = [ 5 | { 6 | label: __( 'Fade', 'animate-blocks' ), 7 | value: 'fade', 8 | }, 9 | { 10 | label: __( 'Fade up', 'animate-blocks' ), 11 | value: 'fade-up', 12 | }, 13 | { 14 | label: __( 'Fade down', 'animate-blocks' ), 15 | value: 'fade-down', 16 | }, 17 | { 18 | label: __( 'Fade left', 'animate-blocks' ), 19 | value: 'fade-left', 20 | }, 21 | { 22 | label: __( 'Fade right', 'animate-blocks' ), 23 | value: 'fade-right', 24 | }, 25 | { 26 | label: __( 'Fade up right', 'animate-blocks' ), 27 | value: 'fade-up-right', 28 | }, 29 | { 30 | label: __( 'Fade up left', 'animate-blocks' ), 31 | value: 'fade-up-left', 32 | }, 33 | { 34 | label: __( 'Fade down right', 'animate-blocks' ), 35 | value: 'fade-down-right', 36 | }, 37 | { 38 | label: __( 'Fade down left', 'animate-blocks' ), 39 | value: 'fade-down-left', 40 | }, 41 | { 42 | label: __( 'Flip up', 'animate-blocks' ), 43 | value: 'flip-up', 44 | }, 45 | { 46 | label: __( 'Flip down', 'animate-blocks' ), 47 | value: 'flip-down', 48 | }, 49 | { 50 | label: __( 'Flip left', 'animate-blocks' ), 51 | value: 'flip-left', 52 | }, 53 | { 54 | label: __( 'Flip right', 'animate-blocks' ), 55 | value: 'flip-right', 56 | }, 57 | { 58 | label: __( 'Slide up', 'animate-blocks' ), 59 | value: 'slide-up', 60 | }, 61 | { 62 | label: __( 'Slide down', 'animate-blocks' ), 63 | value: 'slide-down', 64 | }, 65 | { 66 | label: __( 'Slide left', 'animate-blocks' ), 67 | value: 'slide-left', 68 | }, 69 | { 70 | label: __( 'Slide right', 'animate-blocks' ), 71 | value: 'slide-right', 72 | }, 73 | { 74 | label: __( 'Zoom in', 'animate-blocks' ), 75 | value: 'zoom-in', 76 | }, 77 | { 78 | label: __( 'Zoom in up', 'animate-blocks' ), 79 | value: 'zoom-in-up', 80 | }, 81 | { 82 | label: __( 'Zoom in down', 'animate-blocks' ), 83 | value: 'zoom-in-down', 84 | }, 85 | { 86 | label: __( 'Zoom in left', 'animate-blocks' ), 87 | value: 'zoom-in-left', 88 | }, 89 | { 90 | label: __( 'Zoom in right', 'animate-blocks' ), 91 | value: 'zoom-in-right', 92 | }, 93 | { 94 | label: __( 'Zoom out', 'animate-blocks' ), 95 | value: 'zoom-out', 96 | }, 97 | { 98 | label: __( 'Zoom out up', 'animate-blocks' ), 99 | value: 'zoom-out-up', 100 | }, 101 | { 102 | label: __( 'Zoom out down', 'animate-blocks' ), 103 | value: 'zoom-out-down', 104 | }, 105 | { 106 | label: __( 'Zoom out left', 'animate-blocks' ), 107 | value: 'zoom-out-left', 108 | }, 109 | { 110 | label: __( 'Zoom out right', 'animate-blocks' ), 111 | value: 'zoom-out-right', 112 | }, 113 | ]; 114 | const animationEmptyOption = { 115 | label: __( 'No Animation', 'animate-blocks' ), 116 | value: '', 117 | }; 118 | 119 | animationOptions = applyFilters( 'animateBlocks.animationOptions', animationOptions ); 120 | animationOptions = [ animationEmptyOption, ...animationOptions ]; 121 | 122 | export default animationOptions; 123 | -------------------------------------------------------------------------------- /src/animate/block.js: -------------------------------------------------------------------------------- 1 | /** 2 | * BLOCK: animate-blocks/animate 3 | */ 4 | 5 | // Import block dependencies 6 | import anchorPlacementOptions from './anchor-placement-options'; 7 | import animationOptions from './animation-options'; 8 | import easingOptions from './easing-options'; 9 | 10 | const { __ } = wp.i18n; 11 | const { registerBlockType } = wp.blocks; 12 | const { Fragment } = wp.element; 13 | const { 14 | InnerBlocks, 15 | InspectorControls, 16 | } = wp.editor; 17 | const { 18 | PanelBody, 19 | TextControl, 20 | SelectControl, 21 | ToggleControl, 22 | RangeControl, 23 | } = wp.components; 24 | const { applyFilters } = wp.hooks; 25 | 26 | const aosDefaultOptions = { 27 | animation: 'fade', 28 | offset: 120, 29 | delay: 0, 30 | duration: 400, 31 | easing: 'ease', 32 | once: true, 33 | mirror: false, 34 | anchorPlacement: 'top-bottom', 35 | }; 36 | 37 | let defaultOptions = { 38 | animation: animationOptions && animationOptions.length > 0 ? animationOptions[ 0 ].value : 'fade', 39 | offset: 120, 40 | delay: 0, 41 | duration: 400, 42 | easing: easingOptions && easingOptions.length > 0 ? easingOptions[ 0 ].value : 'ease', 43 | once: true, 44 | mirror: false, 45 | anchorPlacement: anchorPlacementOptions && anchorPlacementOptions.length > 0 ? anchorPlacementOptions[ 0 ].value : 'top-bottom', 46 | }; 47 | defaultOptions = applyFilters( 'animateBlocks.defaultOptions', defaultOptions ); 48 | 49 | registerBlockType( 'animate-blocks/animate', { 50 | title: __( 'Animate Block', 'animate-blocks' ), 51 | icon: 'controls-forward', 52 | category: 'layout', 53 | description: __( 'Animate blocks inside this container.', 'animate-blocks' ), 54 | 55 | attributes: { 56 | animation: { 57 | type: 'string', 58 | default: defaultOptions.animation, 59 | }, 60 | offset: { 61 | type: 'number', 62 | default: defaultOptions.offset, 63 | }, 64 | delay: { 65 | type: 'number', 66 | default: defaultOptions.delay, 67 | }, 68 | duration: { 69 | type: 'number', 70 | default: defaultOptions.duration, 71 | }, 72 | easing: { 73 | type: 'string', 74 | default: defaultOptions.easing, 75 | }, 76 | once: { 77 | type: 'boolean', 78 | default: defaultOptions.once, 79 | }, 80 | mirror: { 81 | type: 'boolean', 82 | default: defaultOptions.mirror, 83 | }, 84 | anchorPlacement: { 85 | type: 'string', 86 | default: defaultOptions.anchorPlacement, 87 | }, 88 | }, 89 | 90 | edit( { attributes, setAttributes, className } ) { 91 | const { 92 | animation = '', 93 | offset, 94 | delay, 95 | duration, 96 | easing, 97 | once, 98 | mirror, 99 | anchorPlacement, 100 | } = attributes; 101 | 102 | return ( 103 | 104 | 105 | 109 | setAttributes( { animation: selectedOption } ) } 114 | /> 115 | setAttributes( { delay: value } ) } 119 | min={ 0 } 120 | max={ 3000 } 121 | step={ 50 } 122 | /> 123 | setAttributes( { duration: value } ) } 127 | min={ 0 } 128 | max={ 3000 } 129 | step={ 50 } 130 | /> 131 | setAttributes( { offset: value } ) } 137 | /> 138 | setAttributes( { easing: selectedOption } ) } 144 | /> 145 | setAttributes( { once: checked } ) } 150 | /> 151 | setAttributes( { mirror: checked } ) } 156 | /> 157 | setAttributes( { anchorPlacement: selectedOption } ) } 163 | /> 164 | 165 | 166 |
167 | 168 |
169 | 170 | ); 171 | }, 172 | 173 | save( { attributes, className } ) { 174 | const { 175 | animation = '', 176 | offset, 177 | delay, 178 | duration, 179 | easing, 180 | once, 181 | mirror, 182 | anchorPlacement, 183 | } = attributes; 184 | 185 | return ( 186 |
197 | 198 |
199 | ); 200 | }, 201 | } ); 202 | -------------------------------------------------------------------------------- /src/animate/easing-options.js: -------------------------------------------------------------------------------- 1 | const { applyFilters } = wp.hooks; 2 | const { __ } = wp.i18n; 3 | 4 | let easingOptions = [ 5 | { 6 | label: __( 'Ease', 'animate-blocks' ), 7 | value: 'ease', 8 | }, 9 | { 10 | label: __( 'Ease in', 'animate-blocks' ), 11 | value: 'ease-in', 12 | }, 13 | { 14 | label: __( 'Ease out', 'animate-blocks' ), 15 | value: 'ease-out', 16 | }, 17 | { 18 | label: __( 'Ease in out', 'animate-blocks' ), 19 | value: 'ease-in-out', 20 | }, 21 | { 22 | label: __( 'Ease in back', 'animate-blocks' ), 23 | value: 'ease-in-back', 24 | }, 25 | { 26 | label: __( 'Ease out back', 'animate-blocks' ), 27 | value: 'ease-out-back', 28 | }, 29 | { 30 | label: __( 'Ease in out back', 'animate-blocks' ), 31 | value: 'ease-in-out-back', 32 | }, 33 | { 34 | label: __( 'Ease in sine', 'animate-blocks' ), 35 | value: 'ease-in-sine', 36 | }, 37 | { 38 | label: __( 'Ease out sine', 'animate-blocks' ), 39 | value: 'ease-out-sine', 40 | }, 41 | { 42 | label: __( 'Ease in out sine', 'animate-blocks' ), 43 | value: 'ease-in-out-sine', 44 | }, 45 | { 46 | label: __( 'Ease in quad', 'animate-blocks' ), 47 | value: 'ease-in-quad', 48 | }, 49 | { 50 | label: __( 'Ease out quad', 'animate-blocks' ), 51 | value: 'ease-out-quad', 52 | }, 53 | { 54 | label: __( 'Ease in out quad', 'animate-blocks' ), 55 | value: 'ease-in-out-quad', 56 | }, 57 | { 58 | label: __( 'Ease in cubic', 'animate-blocks' ), 59 | value: 'ease-in-cubic', 60 | }, 61 | { 62 | label: __( 'Ease out cubic', 'animate-blocks' ), 63 | value: 'ease-out-cubic', 64 | }, 65 | { 66 | label: __( 'Ease in out cubic', 'animate-blocks' ), 67 | value: 'ease-in-out-cubic', 68 | }, 69 | { 70 | label: __( 'Ease in quart', 'animate-blocks' ), 71 | value: 'ease-in-quart', 72 | }, 73 | { 74 | label: __( 'Ease out quart', 'animate-blocks' ), 75 | value: 'ease-out-quart', 76 | }, 77 | { 78 | label: __( 'Ease in out quart', 'animate-blocks' ), 79 | value: 'ease-in-out-quart', 80 | }, 81 | { 82 | label: __( 'Linear', 'animate-blocks' ), 83 | value: 'linear', 84 | }, 85 | ]; 86 | 87 | easingOptions = applyFilters( 'animateBlocks.easingOptions', easingOptions ); 88 | 89 | export default easingOptions; 90 | -------------------------------------------------------------------------------- /src/blocks.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Gutenberg Blocks 3 | * 4 | * All blocks related JavaScript files should be imported here. 5 | * You can create a new block folder in this dir and include code 6 | * for that block here as well. 7 | * 8 | * All blocks should be included here since this is the file that 9 | * Webpack is compiling as the input file. 10 | */ 11 | 12 | import './animate/block.js'; 13 | -------------------------------------------------------------------------------- /src/class-animate-blocks.php: -------------------------------------------------------------------------------- 1 | define_constants(); 59 | $this->init_plugin_environment(); 60 | $this->init_hooks(); 61 | } 62 | 63 | /** 64 | * Define plugin constants. 65 | */ 66 | protected function define_constants() { 67 | if ( ! defined( 'ANIMATE_BLOCKS_ABSPATH' ) ) { 68 | define( 'ANIMATE_BLOCKS_ABSPATH', trailingslashit( dirname( ANIMATE_BLOCKS_PLUGIN_FILE ) ) ); 69 | } 70 | } 71 | 72 | /** 73 | * Initializes plugin environment variables 74 | */ 75 | protected function init_plugin_environment() { 76 | // Load plugin environment variables 77 | $this->assets_dir = ANIMATE_BLOCKS_ABSPATH . 'dist'; 78 | $this->assets_url = esc_url( trailingslashit( plugins_url( '/dist/', ANIMATE_BLOCKS_PLUGIN_FILE ) ) ); 79 | } 80 | 81 | /** 82 | * Initializes hooks. 83 | */ 84 | protected function init_hooks() { 85 | // Editor assets 86 | add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) ); 87 | 88 | // Frontend assets 89 | add_action( 'wp_enqueue_scripts', array( $this, 'wp_enqueue_scripts' ) ); 90 | 91 | // Load textdomain 92 | add_action( 'plugins_loaded', array( $this, 'load_plugin_textdomain' ) ); 93 | 94 | // check version number on each request 95 | add_action( 'init', array( $this, 'check_version' ) ); 96 | } 97 | 98 | /** 99 | * Load editor block assets. 100 | */ 101 | public function enqueue_block_editor_assets() { 102 | // Scripts 103 | wp_enqueue_script( 104 | $this->token . '-js', // Handle. 105 | esc_url( $this->assets_url ) . 'blocks.build.js', // block.build.js: We register the block here. Built with Webpack. 106 | array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), // Dependencies, defined above. 107 | $this->version, 108 | true // Enqueue the script in the footer. 109 | ); 110 | } 111 | 112 | /** 113 | * Load frontend assets. 114 | */ 115 | public function wp_enqueue_scripts() { 116 | $load_aos = apply_filters( 'animate_blocks_load_aos', true ); 117 | if ( $load_aos ) { 118 | // Styles 119 | wp_enqueue_style( 120 | $this->token . '-aos-styles', // Handle. 121 | esc_url( $this->assets_url ) . 'aos-3.0.0-beta.6/aos.css', 122 | array(), 123 | '3.0.0-beta.6' 124 | ); 125 | 126 | // Scripts 127 | wp_enqueue_script( 128 | $this->token . '-aos-js', // Handle. 129 | esc_url( $this->assets_url ) . 'aos-3.0.0-beta.6/aos.js', 130 | array(), // Dependencies, defined above. 131 | '3.0.0-beta.6', 132 | true // Enqueue the script in the footer. 133 | ); 134 | wp_enqueue_script( 135 | $this->token . '-aos-init-js', // Handle. 136 | esc_url( $this->assets_url ) . 'aos-init.js', 137 | array( $this->token . '-aos-js' ), // Dependencies, defined above. 138 | $this->version, 139 | true // Enqueue the script in the footer. 140 | ); 141 | } 142 | } 143 | 144 | /** 145 | * Load plugin textdomain 146 | */ 147 | public function load_plugin_textdomain() { 148 | $domain = 'animate-blocks'; // textdomain can't be stored in class variable since it must be a single string literal 149 | load_plugin_textdomain( $domain, false, dirname( plugin_basename( ANIMATE_BLOCKS_PLUGIN_FILE ) ) . '/languages/' ); 150 | } 151 | 152 | /** 153 | * Main Animate_Blocks Instance 154 | * Ensures only one instance of Animate_Blocks is loaded or can be loaded. 155 | * 156 | * @return Animate_Blocks Plugin instance 157 | */ 158 | public static function instance() { 159 | if ( is_null( self::$instance ) ) { 160 | self::$instance = new self(); 161 | } 162 | 163 | return self::$instance; 164 | } 165 | 166 | /** 167 | * Cloning is forbidden. 168 | */ 169 | public function __clone() { 170 | _doing_it_wrong( __FUNCTION__, esc_html__( 'Cheatin’ huh?', 'animate-blocks' ), esc_attr( $this->version ) ); 171 | } 172 | 173 | /** 174 | * Unserializing instances of this class is forbidden. 175 | */ 176 | public function __wakeup() { 177 | _doing_it_wrong( __FUNCTION__, esc_html__( 'Cheatin’ huh?', 'animate-blocks' ), esc_attr( $this->version ) ); 178 | } 179 | 180 | /** 181 | * Checks plugin version. 182 | * 183 | * This check is done on all requests and runs if the versions do not match. 184 | */ 185 | public function check_version() { 186 | if ( ! defined( 'IFRAME_REQUEST' ) && get_option( $this->token . '_version' ) !== $this->version ) { 187 | $this->log_version_number(); 188 | do_action( $this->token . '_updated' ); 189 | } 190 | } 191 | 192 | /** 193 | * Log the plugin version number in database. 194 | */ 195 | protected function log_version_number() { 196 | delete_option( $this->token . '_version' ); 197 | update_option( $this->token . '_version', $this->version ); 198 | } 199 | 200 | } 201 | -------------------------------------------------------------------------------- /src/common.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * #.# Common SCSS 3 | * 4 | * Can include things like variables and mixins 5 | * that are used across the project. 6 | */ 7 | --------------------------------------------------------------------------------