Socket
Socket
Sign inDemoInstall

web-animation-club

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

web-animation-club - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

.npmignore
demo/assets/wac-video.gif
demo/general.css
demo/index.html

12

.babelrc.json
{
"presets": ["es2015", "stage-0", "react"],
"env": {
"production": {
"plugins": [
[ "css-modules-transform", {
"generateScopedName": "[hash:base64:5]",
"extensions": [".css", ".scss"],
} ]
],
}
}
"presets": ["es2015", "stage-0"]
}

6

.eslintrc.json

@@ -11,3 +11,2 @@ {

"plugins": [
"react",
"jsx-a11y"

@@ -26,9 +25,6 @@ ],

"no-underscore-dangle": 0,
"react/jsx-filename-extension": 0,
"react/forbid-prop-types": 0,
"jsx-a11y/anchor-is-valid": 0,
"jsx-a11y/label-has-for": 0,
"no-param-reassign": 0,
"react/sort-comp": 0
"no-param-reassign": 0
}
}

25

dist/web-animation-club.js

@@ -49,7 +49,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }

@@ -60,5 +56,24 @@ /******/ };

/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules

@@ -65,0 +80,0 @@ /******/ __webpack_require__.n = function(module) {

2

dist/web-animation-club.min.js

@@ -1,1 +0,1 @@

!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.wac=n():e.wac=n()}(window,function(){return function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){"use strict";function r(e,n,{tolerance:t=0,propertyName:r}={}){return new Promise(o=>{if(!e)return void o(!1);let i=null;const u=n.charAt(0).toUpperCase()+n.slice(1);let c=0;void 0!==e.style[`Webkit${u}`]&&(i=`webkit${u}End`),void 0!==e.style.OTransition&&(i=`o${n}End`),void 0!==e.style[n]&&(i=`${n}end`),e.addEventListener(i,function n(u){if((u.srcElement||u.target)===e){if(c>=t){if(r&&r!==u.propertyName)return;e.removeEventListener(i,n),o(u)}c+=1}})})}function o(e){window.requestAnimationFrame(e)}function i(e){window.requestAnimationFrame(()=>{window.requestAnimationFrame(e)})}function u(e,n){!function e(n,t){n&&Number.isInteger(n)&&n>0?window.requestAnimationFrame(()=>{e(n-1,t)}):t()}(e+1,n)}function c(){return new Promise(e=>{i(e)})}function f(e,n={}){return new Promise(t=>{r(e,"transition",n).then(t)})}function s(e,n={}){return new Promise(t=>{r(e,"animation",n).then(t)})}t.r(n),t.d(n,"setCssEndEvent",function(){return r}),t.d(n,"beforeCssLayout",function(){return o}),t.d(n,"beforeNextCssLayout",function(){return i}),t.d(n,"beforeFutureCssLayout",function(){return u}),t.d(n,"onceNextCssLayout",function(){return c}),t.d(n,"onceTransitionEnd",function(){return f}),t.d(n,"onceAnimationEnd",function(){return s})}])});
!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.wac=n():e.wac=n()}(window,function(){return function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){"use strict";function r(e,n,{tolerance:t=0,propertyName:r}={}){return new Promise(o=>{if(!e)return void o(!1);let i=null;const u=n.charAt(0).toUpperCase()+n.slice(1);let f=0;void 0!==e.style[`Webkit${u}`]&&(i=`webkit${u}End`),void 0!==e.style.OTransition&&(i=`o${n}End`),void 0!==e.style[n]&&(i=`${n}end`),e.addEventListener(i,function n(u){if((u.srcElement||u.target)===e){if(f>=t){if(r&&r!==u.propertyName)return;e.removeEventListener(i,n),o(u)}f+=1}})})}function o(e){window.requestAnimationFrame(e)}function i(e){window.requestAnimationFrame(()=>{window.requestAnimationFrame(e)})}function u(e,n){!function e(n,t){n&&Number.isInteger(n)&&n>0?window.requestAnimationFrame(()=>{e(n-1,t)}):t()}(e+1,n)}function f(){return new Promise(e=>{i(e)})}function c(e,n={}){return new Promise(t=>{r(e,"transition",n).then(t)})}function s(e,n={}){return new Promise(t=>{r(e,"animation",n).then(t)})}t.r(n),t.d(n,"setCssEndEvent",function(){return r}),t.d(n,"beforeCssLayout",function(){return o}),t.d(n,"beforeNextCssLayout",function(){return i}),t.d(n,"beforeFutureCssLayout",function(){return u}),t.d(n,"onceNextCssLayout",function(){return f}),t.d(n,"onceTransitionEnd",function(){return c}),t.d(n,"onceAnimationEnd",function(){return s})}])});

45

package.json
{
"name": "web-animation-club",
"version": "0.1.2",
"version": "0.2.0",
"description": "Web Animation Club",

@@ -14,4 +14,10 @@ "repository": "rcaferati/web-animation-club",

],
"scripts": {
"build": "webpack --mode development",
"build-min": "NODE_ENV=production webpack --mode production --optimize-minimize",
"build-watch": "webpack --mode development --watch",
"test": "echo true",
"prepublish": "npm run build && npm run build-min"
},
"devDependencies": {
"autoprefixer": "^8.5.1",
"babel-cli": "^6.26.0",

@@ -21,10 +27,6 @@ "babel-core": "^6.26.0",

"babel-loader": "^7.1.4",
"babel-plugin-css-modules-transform": "^1.6.1",
"babel-plugin-transform-es2015-modules-umd": "^6.24.1",
"babel-plugin-transform-postcss": "^0.3.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",

@@ -34,38 +36,7 @@ "eslint-config-airbnb": "^16.1.0",

"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.9.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.0",
"postcss-cssnext": "^3.1.0",
"postcss-loader": "^2.1.5",
"postcss-nested": "^3.0.0",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^1.0.1",
"webpack": "^4.9.1",
"webpack-cli": "^2.1.4",
"webpack-dev-server": "^3.1.4"
},
"scripts": {
"build": "webpack --mode development",
"start": "webpack-dev-server -d --config webpack.demo.config.js",
"build-min": "NODE_ENV=production webpack --mode production --optimize-minimize",
"build-watch": "webpack --mode development --watch",
"test": "echo true",
"prepublish": "npm run build && npm run build-min"
},
"dependencies": {
"prop-types": "^15.6.1",
"react": "^16.4.0",
"react-awesome-button": "^4.2.1",
"react-dom": "^16.4.0",
"react-helmet": "^5.2.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"redux": "^4.0.0",
"redux-saga": "^0.16.0"
}
}

48

README.md
# web-animation-club
Tiny `~0.8kb` javascript library with cross-browser methods to handle CSS `ontransitionend` and `onanimationend` events. AKA css animation and transition callbacks.
#### Dist file
## Live Demo
Access the demo at [https://webanimation.club](https://webanimation.club)
[<img width="600" alt="react-awesome-slider demo" src="https://github.com/rcaferati/web-animation-club/blob/master/demo/assets/wac-video.gif?raw=true">](https://webanimation.club)
## Installation
#### From the `dist` file
Just load directly in your `HTML` the `web-animation-club.min.js` javascript file located on the `dist` folder.
```html
...
<script src="/path/to/web-animation-club.min.js"></script>
<script src="https://webanimation.club/library/0.1.2/web-animation-club.min.js"></script>
...
```
### Installation
#### NPM Registry
From the `NPM registry` using npm or yarn just install the `web-animation-club` package.

@@ -21,3 +28,3 @@ ```

### Basic Usage
## Basic Usage
For all the following examples please consider the following HTML markup.

@@ -47,3 +54,3 @@ ```html

onceTransitionEnd(box).then(function() {
onceTransitionEnd(box).then(function(event) {
// ... do something

@@ -68,1 +75,32 @@ });

```
## WAC methods
#### onceTransitionEnd(element, options)
- `element` <[HTML element]> html element on which the transition is happening
- `options` <[object]>
- `tolerance` <[integer]> used in case of pseudo-element animations
- `property` <[string]> animated property to check before calling the callback
#### onceAnimationEnd(element, options)
- `element` <[HTML element]> html element on which the transition is happening
- `options` <[object]>
- `tolerance` <[integer]> used in case of pseudo-element animations
- `property` <[string]> animated property to check before calling the callback
#### beforeFutureCssLayout(frames, callback)
- `frames` <[integer]> Number of frames to skip
- `callback` <[function]> function called after the skipped frames
#### beforeNextCssLayout(callback)
- `callback` <[function]> function called after the skipped frame
## Author
#### Rafael Caferati
+ Checkout my <a href="https://caferati.me" title="Full-Stack Web Developer, UI/UX Javascript Specialist" target="_blank">Full-Stack Web Developer Website</a>
+ Other open source projects @ <a title="Web Software Developer Code Laboratory" target="_blank" href="https://caferati.me/labs">Code Laboratory</a>
+ A scope of my work @ <a title="Web Software Developer Portfolio" target="_blank" href="https://caferati.me/portfolio">Web Portfolio</a>
## License
MIT. Copyright (c) 2018 Rafael Caferati.

1

webpack.config.js

@@ -5,3 +5,2 @@ const path = require('path');

const production = process.env.NODE_ENV === 'production' || false;
const minimizer = [];

@@ -8,0 +7,0 @@ 

demo/public/about.html
demo/public/assets/share.png
demo/public/assets/web-animation-club.png
demo/public/assets/web-animation-club.svg
demo/public/css-animation-helpers.js
demo/public/index.dev.html
demo/public/index.html
demo/src/actions/actions.js
demo/src/components/box-double.js
demo/src/components/box-double.scss
demo/src/components/box-single.js
demo/src/components/box-single.scss
demo/src/components/navigation.js
demo/src/components/navigation.scss
demo/src/components/page.js
demo/src/components/page.scss
demo/src/components/rule-navigation.js
demo/src/components/rule-navigation.scss
demo/src/components/rule.js
demo/src/components/rule.scss
demo/src/constants.js
demo/src/containers/about/about.js
demo/src/containers/about/about.scss
demo/src/containers/home/home.js
demo/src/containers/home/home.scss
demo/src/containers/member/member.js
demo/src/containers/member/member.scss
demo/src/containers/members/members.js
demo/src/containers/members/members.scss
demo/src/containers/root.js
demo/src/containers/root.scss
demo/src/features/example-a.js
demo/src/features/example-a.scss
demo/src/helpers/simulations.js
demo/src/index.js
demo/src/reducers/reducers.js
webpack.demo.config.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc