2 |
3 | ## Packages
4 |
5 | * [Popmotion](https://github.com/Popmotion/popmotion/tree/master/packages/popmotion)
6 | * [Popmotion Pose](https://github.com/Popmotion/popmotion/tree/master/packages/popmotion-pose)
7 | * [React Pose](https://github.com/Popmotion/popmotion/tree/master/packages/react-pose)
8 | * [React Native Pose](https://github.com/Popmotion/popmotion/tree/master/packages/react-native-pose)
9 |
--------------------------------------------------------------------------------
/packages/popmotion/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "commonjs",
4 | "noImplicitAny": true,
5 | "removeComments": true,
6 | "preserveConstEnums": true,
7 | "sourceMap": true,
8 | "noUnusedLocals": true,
9 | "target": "es5",
10 | "rootDir": "src",
11 | "outDir": "./",
12 | "watch": false,
13 | "baseUrl": "src/",
14 | "alwaysStrict": true,
15 | "declaration": true,
16 | "forceConsistentCasingInFileNames": true
17 | },
18 | "include": [
19 | "src/**/*"
20 | ],
21 | "exclude": [
22 | "**/*.test.ts"
23 | ]
24 | }
--------------------------------------------------------------------------------
/site/templates/Popmotion/USPs/Example.js:
--------------------------------------------------------------------------------
1 | import {
2 | ExampleContainer,
3 | ExampleHeader,
4 | Description,
5 | CenteredContent
6 | } from './styled';
7 | import Link from 'next/link';
8 |
9 | export default ({ title, children, link, description }) => (
10 |
24 | {children}
25 |
26 | );
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/packages/popmotion/src/compositors/stagger.ts:
--------------------------------------------------------------------------------
1 | import { Action } from '../action';
2 | import chain from './chain';
3 | import delay from './delay';
4 | import parallel from './parallel';
5 |
6 | type IntervalCalc = (i: number) => number;
7 | type Interval = number | IntervalCalc;
8 |
9 | const stagger = (actions: Action[], interval: Interval): Action => {
10 | const intervalIsNumber = typeof interval === 'number';
11 |
12 | const actionsWithDelay = actions.map((a, i) => {
13 | const timeToDelay: number = intervalIsNumber ? interval as number * i : (interval as IntervalCalc)(i);
14 |
15 | return chain(delay(timeToDelay), a);
16 | });
17 |
18 | return parallel(...actionsWithDelay);
19 | };
20 |
21 | export default stagger;
22 |
--------------------------------------------------------------------------------
/packages/react-pose/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "commonjs",
4 | "noImplicitAny": false,
5 | "removeComments": true,
6 | "preserveConstEnums": true,
7 | "sourceMap": true,
8 | "noUnusedLocals": true,
9 | "target": "es5",
10 | "rootDir": "src",
11 | "outDir": "lib",
12 | "watch": false,
13 | "baseUrl": "src/",
14 | "alwaysStrict": true,
15 | "declaration": true,
16 | "forceConsistentCasingInFileNames": true,
17 | "allowSyntheticDefaultImports": true,
18 | "lib": ["es6", "dom"],
19 | "jsx": "react",
20 | "typeRoots": ["node_modules/@types", "module-types"]
21 | },
22 | "include": [
23 | "src/**/*"
24 | ],
25 | "exclude": [
26 | "**/*.test.ts"
27 | ]
28 | }
--------------------------------------------------------------------------------
/playground/plugins/react.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Box } from '../inc';
3 | import pointer from '../../packages/popmotion/lib/input/pointer';
4 | import { MotionValue } from '../../packages/popmotion-react/lib';
5 |
6 | const stateChangeHandlers = {
7 | isDragging: ({ value }) => pointer(value.get()).start(value),
8 | rest: ({ value }) => value.stop()
9 | };
10 |
11 | export const PopmotionReact = () => (
12 | 
2 |
3 | ## Pose animation system in React 360 flavour
4 |
5 | [](https://www.npmjs.com/package/react-360-pose)
6 | [](https://www.npmjs.com/package/react-360-pose)
7 | [](http://twitter.com/popmotionjs)
8 | [](https://spectrum.chat/popmotion)
9 |
10 | Waiting on React 360 to support `createContext`.
11 |
--------------------------------------------------------------------------------
/site/styles/nprogress.js:
--------------------------------------------------------------------------------
1 | import { BRAND } from '~/styles/vars';
2 |
3 | export default `
4 | /* Make clicks pass-through */
5 | #nprogress {
6 | pointer-events: none;
7 | }
8 |
9 | #nprogress .bar {
10 | background: ${BRAND};
11 | position: fixed;
12 | z-index: 9999;
13 | top: 0;
14 | left: 0;
15 | width: 100%;
16 | height: 2px;
17 | }
18 |
19 | /* Fancy blur effect */
20 | #nprogress .peg {
21 | display: block;
22 | position: absolute;
23 | right: 0px;
24 | width: 100px;
25 | height: 100%;
26 | box-shadow: 0 0 10px ${BRAND}, 0 0 5px ${BRAND};
27 | opacity: 1.0;
28 |
29 | -webkit-transform: rotate(3deg) translate(0px, -4px);
30 | -ms-transform: rotate(3deg) translate(0px, -4px);
31 | transform: rotate(3deg) translate(0px, -4px);
32 | }
33 |
34 |
35 | .nprogress-custom-parent #nprogress .bar {
36 | position: absolute;
37 | }
38 | `;
39 |
--------------------------------------------------------------------------------
/packages/popmotion/src/observer/types.ts:
--------------------------------------------------------------------------------
1 | export type Update = Function;
2 | export type Complete = () => any;
3 | export type Error = (err?: any) => any;
4 | export type ObserverEvent = (type?: string, v?: any) => any;
5 | export type Middleware = (update: Update, complete?: Complete) => (v: any) => any;
6 |
7 | export interface IObserver {
8 | update: Update;
9 | complete: Complete;
10 | error: Error;
11 | }
12 |
13 | export interface PartialObserver {
14 | update?: Update;
15 | complete?: Complete;
16 | error?: Error;
17 | registerParent?: Function;
18 | }
19 |
20 | export type ObserverProps = PartialObserver & {
21 | middleware?: Middleware[];
22 | onComplete?: Function;
23 | };
24 |
25 | export type ObserverFactory = (observerCandidate: ObserverCandidate, props: ObserverProps) => IObserver;
26 |
27 | export type ObserverCandidate = Update | IObserver | PartialObserver;
28 |
--------------------------------------------------------------------------------
/site/components/examples/Ball.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { ActionButton } from '~/templates/global/styled';
3 | import { verticalGradient, PINK, PINK_BURN, cols } from '~/styles/vars';
4 |
5 | const Container = styled.div`
6 | height: 100%;
7 | width: 100%;
8 | display: flex;
9 | flex-direction: column;
10 | justify-content: space-around;
11 | align-content: space-around;
12 | padding: ${cols(1)}
13 | `;
14 |
15 | const Box = styled.span`
16 | width: 50px;
17 | height: 50px;
18 | background: ${verticalGradient(PINK, PINK_BURN)};
19 | border-radius: 50px;
20 | `;
21 |
22 | export default ({ autostart, start, id }) => (
23 | 
2 |
3 | ## React components for the Pose animation system
4 |
5 | [](https://www.npmjs.com/package/react-pose)
6 | [](https://www.npmjs.com/package/react-pose)
7 | [](http://twitter.com/popmotionjs)
8 | [](https://spectrum.chat/popmotion)
9 |
10 | - [Homepage](https://popmotion.io/pose)
11 | - [API](https://popmotion.io/pose/api)
12 | - [Get started](https://popmotion.io/pose/learn/get-started)
13 |
--------------------------------------------------------------------------------
/packages/popmotion/src/animations/decay/_tests/decay.test.ts:
--------------------------------------------------------------------------------
1 | import inertia from '../';
2 |
3 | describe('inertia', () => {
4 | it('should progress to calculated target', () => {
5 | return new Promise((resolve, reject) => {
6 | let i = 0;
7 | let target = 0;
8 | inertia({
9 | velocity: 100,
10 | modifyTarget: (v) => target = v
11 | }).start({
12 | complete: () => (i === target) ? resolve() : reject(),
13 | update: (v) => i = v
14 | });
15 | });
16 | });
17 |
18 | it('should progress to modified target', () => {
19 | return new Promise((resolve, reject) => {
20 | let i = 0;
21 | let target = 0;
22 | inertia({
23 | velocity: 100,
24 | modifyTarget: (v) => target = 100
25 | }).start({
26 | complete: () => (i === 100) ? resolve() : reject(),
27 | update: (v) => i = v
28 | });
29 | });
30 | });
31 | });
--------------------------------------------------------------------------------
/playground/decay.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseAnimation } from './inc';
3 | import decay from '../packages/popmotion/lib/animations/decay';
4 |
5 | export class Decay extends BaseAnimation {
6 | getAnimation = (styler) => decay({
7 | velocity: 1000
8 | }).start((v) => styler.set('x', v));
9 | }
10 |
11 | export class DecayModifyTarget extends BaseAnimation {
12 | getAnimation = (styler) => decay({
13 | velocity: 1000,
14 | modifyTarget: (v) => Math.ceil(v / 100) * 100
15 | }).start((v) => styler.set('x', v));
16 | }
17 |
18 | export class DecayTimeConstant extends BaseAnimation {
19 | getAnimation = (styler) => decay({
20 | velocity: 1000,
21 | timeConstant: 1000
22 | }).start((v) => styler.set('x', v));
23 | }
24 |
25 | export class DecayPower extends BaseAnimation {
26 | getAnimation = (styler) => decay({
27 | velocity: 1000,
28 | power: 2
29 | }).start((v) => styler.set('x', v));
30 | }
--------------------------------------------------------------------------------
/packages/popmotion/docs/api/compositors/delay.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Delay
3 | description: Fires complete after the defined interval.
4 | category: compositors
5 | ---
6 |
7 | # Delay
8 |
9 | Fires `complete` after the defined interval.
10 |
11 | ## Import
12 |
13 | ```javascript
14 | import { delay } from 'popmotion';
15 | // or stand-alone:
16 | import delay from 'popmotion/compositors/delay';
17 | ```
18 |
19 | ## Usage
20 |
21 | ```javascript
22 | delay(100).start({
23 | complete: () => console.log('complete!')
24 | });
25 | ```
26 |
27 | Useful for delaying actions in a `chain`.
28 |
29 | ```javascript
30 | chain(
31 | delay(100),
32 | tween({ to: 400, duration: 500 })
33 | );
34 | ```
35 |
36 | ### Action methods
37 |
38 | `delay()` returns:
39 |
40 | - `start(update | { update, complete })`: Starts the action and returns a subscription.
41 |
42 | ### Subscription methods
43 |
44 | `delay().start()` returns:
45 |
46 | - `stop(): void`
47 |
--------------------------------------------------------------------------------
/site/templates/Popmotion/Masthead/index.js:
--------------------------------------------------------------------------------
1 | import { withTheme } from "styled-components";
2 | import SiteLink from "~/components/layout/SiteLink";
3 | import {
4 | Container,
5 | MastheadContainer,
6 | Title,
7 | Logo,
8 | LogoContainer,
9 | LogoText,
10 | Blurb,
11 | CTA
12 | } from "./styled";
13 | import Link from "next/link";
14 |
15 | const Masthead = ({ children, theme }) => (
16 | You were probably looking for the Popmotion 7 docs.
14 |Or, if you're ready to upgrade, check out our Popmotion 8 upgrade guide!
15 |
2 |
3 | ### A **functional**, **reactive** motion library.
4 |
5 | [](https://www.npmjs.com/package/popmotion)
6 | [](https://www.npmjs.com/package/popmotion)
7 | [](http://twitter.com/popmotionjs)
8 | [](https://spectrum.chat/popmotion)
9 |
10 | ## [Visit the website](https://popmotion.io/)
11 | ### [Quick Start](https://popmotion.io/learn/get-started)
12 | ### [Installation options](https://popmotion.io/learn/install)
13 | ### [Full API documentation](https://popmotion.io/api)
14 |
--------------------------------------------------------------------------------
/packages/popmotion/src/input/pointer/index.ts:
--------------------------------------------------------------------------------
1 | import { Action } from '../../action';
2 | import { applyOffset } from '../../transformers';
3 | import multitouch, { getIsTouchDevice } from '../multitouch';
4 | import mouse from './mouse';
5 | import { Point2D, PointerProps } from './types';
6 |
7 | const getFirstTouch = ([firstTouch]: Point2D[]): Point2D => firstTouch;
8 |
9 | const pointer = (props: PointerProps = {}): Action => getIsTouchDevice()
10 | ? multitouch(props).pipe(({ touches }: any) => touches, getFirstTouch)
11 | : mouse(props);
12 |
13 | export default ({ x, y, ...props }: PointerProps = {}): Action => {
14 | if (x !== undefined || y !== undefined) {
15 | const applyXOffset = applyOffset(x || 0);
16 | const applyYOffset = applyOffset(y || 0);
17 | const delta = { x: 0, y: 0 };
18 |
19 | return pointer(props).pipe((point: Point2D) => {
20 | delta.x = applyXOffset(point.x);
21 | delta.y = applyYOffset(point.y);
22 | return delta;
23 | });
24 | } else {
25 | return pointer(props);
26 | }
27 | };
28 |
--------------------------------------------------------------------------------
/packages/pose-core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "pose-core",
3 | "version": "0.3.0",
4 | "description": "Factory for Pose animation state machines",
5 | "main": "lib/index.js",
6 | "types": "./lib/index.d.ts",
7 | "scripts": {
8 | "build": "tsc",
9 | "watch": "tsc -w",
10 | "test": "echo \"Error: no test specified\" && exit 1",
11 | "measure": "gzip -c dist/popmotion-pose.js | wc -c",
12 | "prettier": "prettier ./src/*",
13 | "prepublishOnly": "npm run prettier && npm run build"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "https://github.com/popmotion"
18 | },
19 | "keywords": [
20 | "animation",
21 | "dom",
22 | "declarative",
23 | "popmotion"
24 | ],
25 | "author": "Matt Perry",
26 | "license": "MIT",
27 | "presets": [
28 | "env"
29 | ],
30 | "devDependencies": {
31 | "typescript": "^2.7.2",
32 | "prettier": "1.11.1",
33 | "webpack": "^3.11.0"
34 | },
35 | "prettier": {
36 | "parser": "typescript",
37 | "singleQuote": true
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/packages/react-pose/src/components/PoseElement.types.ts:
--------------------------------------------------------------------------------
1 | import { Poser, PoserProps } from 'popmotion-pose';
2 |
3 | export type ChildRegistration = {
4 | element: Element;
5 | poserProps: PoserProps;
6 | onRegistered: (poser: Poser) => void;
7 | };
8 |
9 | export type CurrentPose = string | string[];
10 |
11 | export type PoseContextProps = {
12 | registerChild?: (props: ChildRegistration) => void;
13 | onUnmount?: (child: Poser) => any;
14 | getInitialPoseFromParent?: () => CurrentPose;
15 | getParentPoseProps?: () => PoserProps;
16 | };
17 |
18 | export type PoseElementProps = {
19 | children?: any;
20 | elementType: any;
21 | poseProps: PoserProps;
22 | pose?: CurrentPose;
23 | initialPose?: CurrentPose;
24 | withParent?: boolean;
25 | onValueChange?: { [key: string]: (v: any) => any };
26 | innerRef?: (el: Element) => any;
27 | [key: string]: any;
28 | } & PoseContextProps;
29 |
30 | export type PopStyle = {
31 | position: 'absolute';
32 | top: number;
33 | left: number;
34 | width: number;
35 | height: number;
36 | };
37 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | Copyright (c) 2017 Popmotion
3 |
4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
5 |
6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
7 |
8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/site/components/icons/Twitter.js:
--------------------------------------------------------------------------------
1 | import { ACTION, ACTION_BURN } from '~/styles/vars';
2 |
3 | export default ({ className }) => (
4 |
13 | );
14 |
--------------------------------------------------------------------------------
/packages/popmotion-pose/src/dom/draggable.ts:
--------------------------------------------------------------------------------
1 | import listen from 'popmotion/input/listen';
2 | import { ColdSubscription } from 'popmotion/action/types';
3 | import { PoseSetter, ActiveActions, DragProps } from '../types';
4 |
5 | export default (
6 | element: Element,
7 | set: PoseSetter,
8 | activeActions: ActiveActions,
9 | { onDragStart, onDragEnd }: DragProps
10 | ) =>
11 | activeActions.set(
12 | 'dragStartListener',
13 | listen(element, 'mousedown touchstart').start(
14 | (startEvent: MouseEvent | TouchEvent) => {
15 | startEvent.preventDefault();
16 | set('dragging');
17 | if (onDragStart) onDragStart(startEvent);
18 |
19 | activeActions.set(
20 | 'dragEndListener',
21 | listen(document, 'mouseup touchend').start(
22 | (endEvent: MouseEvent | TouchEvent) => {
23 | activeActions.get('dragEndListener').stop();
24 | set('dragEnd');
25 | if (onDragEnd) onDragEnd(endEvent);
26 | }
27 | )
28 | );
29 | }
30 | )
31 | );
32 |
33 | export { ColdSubscription };
34 |
--------------------------------------------------------------------------------
/site/components/icons/GitHub.js:
--------------------------------------------------------------------------------
1 | import { ACTION, ACTION_BURN } from '~/styles/vars';
2 |
3 | export default ({ className }) => (
4 |
13 | );
14 |
--------------------------------------------------------------------------------
/packages/react-pose-core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-pose-core",
3 | "version": "0.1.0",
4 | "description": "Factory for creating flavours of React Pose",
5 | "main": "lib/index.js",
6 | "types": "./lib/index.d.ts",
7 | "scripts": {
8 | "build": "tsc",
9 | "watch": "tsc -w",
10 | "test": "echo \"Error: no test specified\" && exit 1",
11 | "prettier": "prettier ./src/*",
12 | "prepublishOnly": "npm run prettier && npm run build"
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "https://github.com/popmotion"
17 | },
18 | "keywords": [
19 | "animation",
20 | "dom",
21 | "declarative",
22 | "popmotion"
23 | ],
24 | "author": "Matt Perry",
25 | "license": "MIT",
26 | "presets": [
27 | "env"
28 | ],
29 | "devDependencies": {
30 | "typescript": "^2.7.2",
31 | "prettier": "1.11.1",
32 | "webpack": "^3.11.0"
33 | },
34 | "prettier": {
35 | "parser": "typescript",
36 | "singleQuote": true
37 | },
38 | "dependencies": {
39 | "@types/react": "^16.3.12",
40 | "@types/react-native": "^0.55.4",
41 | "animated-pose": "^0.2.0"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/site/templates/Popmotion/LiveExamples/Template.js:
--------------------------------------------------------------------------------
1 | import {
2 | Container,
3 | LiveExampleContainer,
4 | CodeContainer,
5 | ExampleContainer,
6 | CodePenLink
7 | } from './styled';
8 | import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/dist/light';
9 | import js from 'react-syntax-highlighter/dist/languages/javascript';
10 | import { codeThemeLarge } from '~/styles/syntax-highlighting';
11 |
12 | registerLanguage('javascript', js);
13 |
14 | export default ({ children, code, hideOverflow, codepen }) => (
15 |
16 |
17 |
18 |
19 | {children}
20 |
21 |
22 |
23 | {code}
24 |
25 |
26 |
27 | {codepen && (
28 |
29 | Fork on CodePen
30 |
31 | )}
32 |
33 |
34 | );
--------------------------------------------------------------------------------
/packages/popmotion/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var path = require('path');
3 | var isProd = (process.env.NODE_ENV === 'production');
4 | var devTool = isProd ? false : 'inline-source-map';
5 |
6 | module.exports = {
7 | entry: {
8 | global: './src/global.ts',
9 | xl: './src/global-xl.ts'
10 | },
11 | output: {
12 | path: __dirname + '/dist',
13 | filename: 'popmotion.[name].min.js'
14 | },
15 | module: {
16 | rules: [
17 | {
18 | test: (modulePath) => modulePath.endsWith('.ts') && !modulePath.endsWith('test.ts'),
19 | loader: 'ts-loader'
20 | }
21 | ],
22 | },
23 | resolve: {
24 | alias: {
25 | popmotion: path.resolve(__dirname, 'src/index.ts')
26 | },
27 | extensions: ['.ts', '.tsx', '.js'],
28 | modules: [
29 | path.resolve('./node_modules'),
30 | path.resolve('./src')
31 | ]
32 | },
33 | plugins: isProd ? [
34 | new webpack.optimize.ModuleConcatenationPlugin(),
35 | new webpack.optimize.UglifyJsPlugin({
36 | mangle: true,
37 | minimize: true
38 | })
39 | ] : [
40 |
41 | ],
42 | devtool: devTool
43 | };
--------------------------------------------------------------------------------
/packages/react-native-pose/README.md:
--------------------------------------------------------------------------------
1 | # 
2 |
3 | ## Pose animation system in React Native flavour
4 |
5 | [](https://www.npmjs.com/package/react-native-pose)
6 | [](https://www.npmjs.com/package/react-native-pose)
7 | [](http://twitter.com/popmotionjs)
8 | [](https://spectrum.chat/popmotion)
9 |
10 | - [Homepage](https://popmotion.io/pose)
11 | - [API](https://popmotion.io/pose/api)
12 | - [Get started](https://popmotion.io/pose/learn/native-get-started)
13 |
14 | ## Supported by
15 | 
16 |
--------------------------------------------------------------------------------
/packages/popmotion/src/reactions/_tests/multicast.test.ts:
--------------------------------------------------------------------------------
1 | import multicast from '../multicast';
2 | import action from '../../action';
3 |
4 | describe('multicast', () => {
5 | const one = action(({ update }) => update(1));
6 |
7 | it('should accept subscribers', () => {
8 | const r = multicast();
9 | r.subscribe({
10 | update: (v) => expect(v).toBe(1),
11 | complete: () => expect(true).toBe(true)
12 | });
13 | r.update(1);
14 | r.complete();
15 | });
16 |
17 | it('should work with actions', () => {
18 | const r = multicast();
19 | r.subscribe((v) => expect(v).toBe(1));
20 | const a = one.start(r);
21 | });
22 |
23 | it('should accept multiple subscribers', () => {
24 | const r = multicast();
25 | r.subscribe((v) => expect(v).toBe(1));
26 | r.subscribe((v) => expect(v).toBe(1));
27 | const a = one.start(r);
28 | });
29 |
30 | it('should create a new instance when chained', () => {
31 | const r = multicast();
32 | const s = r.pipe((v) => v * 2);
33 | r.subscribe((v) => expect(v).toBe(1));
34 | s.subscribe((v) => expect(v).toBe(2));
35 | one.start(r);
36 | one.start(s);
37 | });
38 | })
39 |
--------------------------------------------------------------------------------
/packages/popmotion-pose/README.md:
--------------------------------------------------------------------------------
1 | # 
2 |
3 | ## A declarative animation system for HTML, SVG & React
4 |
5 | [](https://www.npmjs.com/package/popmotion-pose)
6 | [](https://www.npmjs.com/package/popmotion-pose)
7 | [](http://twitter.com/popmotionjs)
8 | [](https://spectrum.chat/popmotion)
9 |
10 | Pose is a declarative DOM animation library for HTML, SVG & React. It removes all the plumbing typically associated with JavaScript animation and reduces it to code like this:
11 |
12 | ```javascript
13 | sidePanel.set('open')
14 | ```
15 |
16 | - [Homepage](https://popmotion.io/pose)
17 | - [API](https://popmotion.io/pose/api)
18 | - [Get started](https://popmotion.io/pose/learn/get-started)
19 |
--------------------------------------------------------------------------------
/playground/spring.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseAnimation } from './inc';
3 | import spring from '../packages/popmotion/lib/animations/spring';
4 |
5 | export class Spring extends BaseAnimation {
6 | getAnimation = (styler) => spring({
7 | to: 300
8 | }).start((v) => styler.set('x', v));
9 | }
10 |
11 | export class SpringVelocity extends BaseAnimation {
12 | getAnimation = (styler) => spring({
13 | from: 0,
14 | to: 500,
15 | velocity: -10000
16 | }).start((v) => styler.set('x', v));
17 | }
18 |
19 | export class SpringHeavier extends BaseAnimation {
20 | getAnimation = (styler) => spring({
21 | to: 300,
22 | velocity: 10000,
23 | mass: 3
24 | }).start((v) => styler.set('x', v));
25 | }
26 |
27 | export class SpringStiffer extends BaseAnimation {
28 | getAnimation = (styler) => spring({
29 | to: 300,
30 | velocity: 10000,
31 | stiffness: 500
32 | }).start((v) => styler.set('x', v));
33 | }
34 |
35 | export class SpringStifferDamping extends BaseAnimation {
36 | getAnimation = (styler) => spring({
37 | to: 300,
38 | velocity: 10000,
39 | stiffness: 500,
40 | damping: 100
41 | }).start((v) => styler.set('x', v));
42 | }
--------------------------------------------------------------------------------
/packages/popmotion/src/chainable/index.ts:
--------------------------------------------------------------------------------
1 | import { Middleware, Update } from '../observer/types';
2 | import { pipe } from '../transformers';
3 | import { Predicate, Props } from './types';
4 |
5 | export default abstract class Chainable
39 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/site/templates/global/grid.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { cols, media, LIGHT_GREY } from '~/styles/vars';
3 |
4 | export const Content = styled.article`
5 | min-height: 700px;
6 | `;
7 |
8 | export const Centered = styled.div`
9 | max-width: ${cols(42)};
10 | margin: 0 auto;
11 |
12 | ${media.medium`
13 | margin-left: ${cols(2)};
14 | margin-right: ${cols(2)};
15 | `} ${media.small`
16 | margin-left: ${cols(2)};
17 | margin-right: ${cols(2)};
18 | `};
19 | `;
20 |
21 | export const MajorCentered = styled(Centered)`
22 | margin-left: calc((100vw - ${cols(42)}) / 2);
23 | max-width: none;
24 |
25 | ${media.medium`
26 | margin-left: ${cols(2)};
27 | `};
28 | `;
29 |
30 | export const ArticleHeader = MajorCentered.withComponent('header').extend`
31 | padding-bottom: 10px;
32 | border-bottom: 1px solid ${LIGHT_GREY};
33 | margin-bottom: ${cols(2)};
34 | `;
35 |
36 | export const SectionContainer = styled.li``;
37 |
38 | export const ItemContainer = Centered.withComponent('li').extend`
39 | border-left: 1px solid ${LIGHT_GREY};
40 | padding: ${cols(1)} ${cols(2)};
41 | margin-bottom: ${cols(1)};
42 |
43 | ${media.medium`
44 | border: 0;
45 | padding: 0;
46 | margin-bottom: ${cols(2)};
47 | `}
48 | `;
49 |
--------------------------------------------------------------------------------
/packages/popmotion/src/input/pointer/mouse.ts:
--------------------------------------------------------------------------------
1 | import { cancelOnFrameUpdate, onFrameUpdate } from 'framesync';
2 | import action, { Action } from '../../action';
3 | import listen from '../listen';
4 | import { defaultPointerPos, eventToPoint } from '../pointer/utils';
5 | import { PointerPoint, PointerProps } from './types';
6 |
7 | const point: PointerPoint = defaultPointerPos();
8 | let isMouseDevice = false;
9 |
10 | if (typeof document !== 'undefined') {
11 | const updatePointLocation = (e: MouseEvent) => {
12 | isMouseDevice = true;
13 | eventToPoint(e, point);
14 | };
15 |
16 | listen(document, 'mousedown mousemove', true)
17 | .start(updatePointLocation);
18 | }
19 |
20 | const mouse = ({ preventDefault = true }: PointerProps = {}): Action => action(({ update }) => {
21 | const updatePoint = () => update(point);
22 |
23 | const onMove = (e: MouseEvent) => {
24 | if (preventDefault) e.preventDefault();
25 | onFrameUpdate(updatePoint);
26 | };
27 |
28 | const updateOnMove = listen(document, 'mousemove').start(onMove);
29 |
30 | if (isMouseDevice) onFrameUpdate(updatePoint);
31 |
32 | return {
33 | stop: () => {
34 | cancelOnFrameUpdate(updatePoint);
35 | updateOnMove.stop();
36 | }
37 | };
38 | });
39 |
40 | export default mouse;
41 |
--------------------------------------------------------------------------------
/packages/react-pose/module-types/react/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) Microsoft Corporation. All rights reserved.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE
22 |
--------------------------------------------------------------------------------
/packages/popmotion/src/action/_tests/action.test.ts:
--------------------------------------------------------------------------------
1 | import action from '../';
2 |
3 | describe('action', () => {
4 | const one = action(({ update }) => update(1));
5 | const oneTwo = action(({ update }) => { update(1); update(2); });
6 |
7 | it('should update', () => {
8 | one.start((v) => expect(v).toBe(1));
9 | });
10 |
11 | it('should complete', () => {
12 | action(({ complete }) => complete()).start({
13 | complete: () => expect(true).toBe(true);
14 | });
15 | });
16 |
17 | it('should pipe values', () => {
18 | one.pipe((v) => v * 2).start((v) => expect(v).toBe(2));
19 | });
20 |
21 | it('should create new instance when chained', () => {
22 | one.start((v) => expect(v).toBe(1));
23 | one.pipe((v) => v * 2).start((v) => expect(v).toBe(2));
24 | })
25 |
26 | it('should complete when `while` fails', () => {
27 | let i = 0;
28 | oneTwo
29 | .while((v) => v === 1)
30 | .start({
31 | update: (v) => i = v,
32 | complete: () => expect(i).toBe(1)
33 | });
34 | });
35 |
36 | it('should filter values that fail the predicate', () => {
37 | let i = 0;
38 | oneTwo.filter((v) => v === 1)
39 | .start({
40 | update: (v) => i = v,
41 | complete: () => expect(i).toBe(1)
42 | });
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/packages/popmotion-pose/src-core/index.ts:
--------------------------------------------------------------------------------
1 | import { ColdSubscription } from 'popmotion/action/types';
2 | import { value } from 'popmotion';
3 | import poseFactory from '../../pose-core/src';
4 | import createDimensions from './factories/dimensions';
5 | import defaultTransitions from './inc/default-transitions';
6 | import { PopmotionPoserConfig } from './types';
7 | import { ValueReaction } from 'popmotion/reactions/value';
8 |
9 | const passThrough = (v: any) => v;
10 |
11 | const pose = poseFactory-
44 | {theme.sections.map(name => (
45 |
54 | ))}
55 |
-
23 | {menu.map(tl => (
24 |
27 |
28 |
30 | {content[tl.id].published && (
31 | {content[tl.id].published}
32 | )}
33 |
35 | ) : (
36 |
28 | {tl.title}
29 |
30 | {content[tl.id].published && (
31 | {content[tl.id].description}
34 |{tl.title}
37 | )} 38 |-
39 | {tl.posts
40 | ? tl.posts.map(sl => (
41 |
43 |
44 | {sl.title}
45 |
46 |
47 | {content[sl.id].description}
48 |