Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: nateplusplus/pushin
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v5.2.0
Choose a base ref
...
head repository: nateplusplus/pushin
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref
Loading
Showing with 30,642 additions and 13,500 deletions.
  1. +18 −0 .babelrc.json
  2. +11 −1 .eslintrc
  3. +3 −2 .github/dependabot.yml
  4. +0 −26 .github/workflows/webpack.yml
  5. +0 −8 .gitignore
  6. +1 −0 .npmrc
  7. +23 −0 .storybook/main.js
  8. +11 −0 .storybook/preview.js
  9. +4 −0 .storybook/style.css
  10. +4 −0 CONTRIBUTING.md
  11. +4 −4 DEVELOPERS.md
  12. +11 −130 README.md
  13. +0 −5 build/banner.js
  14. +1 −0 dist/esm/constants.d.ts
  15. +5 −5 dist/esm/pushInBase.d.ts
  16. +2 −0 dist/esm/pushInComposition.d.ts
  17. +25 −3 dist/esm/pushInLayer.d.ts
  18. +33 −2 dist/esm/pushInScene.d.ts
  19. +2 −0 dist/esm/pushInStyles.d.ts
  20. +37 −0 dist/esm/pushInTarget.d.ts
  21. +11 −24 dist/esm/pushin.d.ts
  22. +432 −187 dist/esm/pushin.js
  23. +1 −1 dist/esm/pushin.js.map
  24. +42 −1 dist/esm/types.d.ts
  25. +432 −189 dist/umd/pushin.js
  26. +1 −1 dist/umd/pushin.js.map
  27. +1 −1 dist/umd/pushin.min.js
  28. +0 −5 docs/README.md
  29. +0 −236 docs/api.pug
  30. +0 −107 docs/cat.pug
  31. +0 −103 docs/composition.pug
  32. +0 −136 docs/home.pug
  33. +0 −1 docs/images/chair.svg
  34. BIN docs/images/favicon.ico
  35. +0 −1 docs/images/github.svg
  36. +0 −1 docs/images/light.svg
  37. +0 −1 docs/images/livingroom-3.svg
  38. +0 −1 docs/images/livingroom-4.svg
  39. +0 −1 docs/images/mountain-0-mask.svg
  40. +0 −1 docs/images/mountain-01-trees.svg
  41. +0 −1 docs/images/mountain-02-hill-1.svg
  42. +0 −1 docs/images/mountain-03-hill-2.svg
  43. +0 −1 docs/images/mountain-04-landscape.svg
  44. +0 −12 docs/images/mountain-05-logo.svg
  45. +0 −1 docs/images/mountain-06-sky.svg
  46. +0 −1 docs/images/plant.svg
  47. +0 −1 docs/images/pushin-monster-cactus.svg
  48. +0 −1 docs/images/pushin-monster.svg
  49. +0 −1 docs/images/tv.svg
  50. +5 −0 docs/index.html
  51. +0 −61 docs/installation.pug
  52. +0 −78 docs/layout.pug
  53. +0 −2 docs/main.ts
  54. +0 −3 docs/mixins.pug
  55. +0 −38 docs/responsive.pug
  56. +0 −20 docs/simple.pug
  57. +0 −54 docs/target.pug
  58. +28,121 −11,527 package-lock.json
  59. +31 −22 package.json
  60. +3 −1 rollup.config.js
  61. +2 −0 src/constants.ts
  62. +28 −22 src/pushInBase.ts
  63. +17 −11 src/pushInComposition.ts
  64. +136 −48 src/pushInLayer.ts
  65. +137 −43 src/pushInScene.ts
  66. +3 −0 src/pushInStyles.ts
  67. +104 −0 src/pushInTarget.ts
  68. +95 −105 src/pushin.ts
  69. +46 −1 src/types.ts
  70. +31 −0 stories/A11y.stories.tsx
  71. +38 −0 stories/A11y.tsx
  72. +50 −0 stories/AutoStart.stories.tsx
  73. +93 −0 stories/AutoStart.tsx
  74. +12 −0 stories/Introduction.stories.mdx
  75. +103 −0 stories/Modes.stories.tsx
  76. +51 −0 stories/Modes.tsx
  77. +22 −0 stories/Target.stories.tsx
  78. +72 −0 stories/Target.tsx
  79. +40 −0 stories/Text.stories.tsx
  80. +40 −0 stories/Text.tsx
  81. +84 −0 stories/pushin.css
  82. +2 −0 test/__mocks__/layers.ts
  83. +3 −1 test/__mocks__/scene.ts
  84. +12 −11 test/pushIn/getScrollY.spec.ts
  85. +16 −15 test/pushIn/setScrollLength.spec.ts
  86. +2 −2 test/pushInComposition/setRatio.spec.ts
  87. +9 −2 test/pushInLayer/getInpoints.spec.ts
  88. +34 −6 test/pushInLayer/getOutpoints.spec.ts
  89. +3 −3 test/pushInLayer/getSpeed.spec.ts
  90. +0 −18 test/pushInLayer/isActive.spec.ts
  91. +5 −3 test/pushInLayer/setLayerStyle.spec.ts
  92. +6 −0 test/pushInScene/getBreakpointIndex.spec.ts
  93. +18 −8 test/pushInScene/getLayers.spec.ts
  94. +14 −21 test/pushInScene/resize.spec.ts
  95. +6 −5 test/pushInScene/setBreakpoints.spec.ts
  96. +25 −14 test/{pushIn → pushInTarget}/setScrollTarget.spec.ts
  97. +8 −8 test/{pushIn → pushInTarget}/setTargetHeight.spec.ts
  98. +0 −143 webpack.config.js
18 changes: 18 additions & 0 deletions .babelrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"sourceType": "unambiguous",
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": 100,
"safari": 15,
"firefox": 91
}
}
],
"@babel/preset-typescript",
"@babel/preset-react"
],
"plugins": []
}
12 changes: 11 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
@@ -27,6 +27,16 @@
"import/no-unresolved": "off",
"no-restricted-syntax": "off",
"lines-between-class-members": "off",
"@typescript-eslint/no-non-null-assertion": "off"
"@typescript-eslint/no-non-null-assertion": "off",
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"stories/**/*",
"**/*.spec.js",
"rollup.config.js"
]
}
]
}
}
5 changes: 3 additions & 2 deletions .github/dependabot.yml
Original file line number Diff line number Diff line change
@@ -5,7 +5,8 @@

version: 2
updates:
- package-ecosystem: "npm" # See documentation for possible values
directory: "/" # Location of package manifests
- package-ecosystem: "npm"
directory: "/"
schedule:
interval: "weekly"
target-branch: "staging"
26 changes: 0 additions & 26 deletions .github/workflows/webpack.yml

This file was deleted.

8 changes: 0 additions & 8 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -8,11 +8,3 @@ lt.log
coverage
.eslintcache
.cache

#docs
/docs/index.html
/docs/pushin.min.css
/docs/pushin.min.js
/docs/examples
/docs/installation
/docs/api
1 change: 1 addition & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
legacy-peer-deps=true
23 changes: 23 additions & 0 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
module.exports = {
stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],

addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-mdx-gfm',
],

framework: {
name: '@storybook/react-webpack5',
options: {},
},

typescript: {
reactDocgen: 'react-docgen-typescript-plugin',
},

docs: {
autodocs: false,
},
};
11 changes: 11 additions & 0 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import './style.css';

export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
4 changes: 4 additions & 0 deletions .storybook/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.sb-show-main.sb-main-padded {
padding-top: 0;
padding-bottom: 0;
}
4 changes: 4 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -18,6 +18,10 @@ Ensure the PR description clearly describes the problem and solution. Include th

If there is no open issue for this change, please open a new one using the Feature Request issue template in order to thoroughly document the goal of this feature change. If you have already made this change, please open a pull request and include a link to the corresponding issue for further explanation of what has been done.

## Development setup

For more information on how to set up your development environment, please see [DEVELOPERS.md](DEVELOPERS.md).

## More questions?

Ask any questions about how to use or contribute to PushIn.js in the Discussions section of the GitHub repository.
8 changes: 4 additions & 4 deletions DEVELOPERS.md
Original file line number Diff line number Diff line change
@@ -10,10 +10,10 @@ You can get set up with the following steps:

1. Clone this repo
2. Run `npm ci` to install all dependencies
3. Run `npm start` to start up development environment
3. Run `npm run storybook` to start up the development environment

The `npm start` command will compile all code and begin running a node server at [localhost:8080](). The page will automatically refresh whenever you make a change to the source code.
The `npm run storybook` command will compile all code and begin running a node server at [localhost:6006](). The Storybook docs can be used to test various use cases for this library during development. The page will automatically refresh whenever you make a change to the source code.

NOTE: We enforce our code styles with ESLint and Prettier before committing. This means that you will need to fix any errors before committing your code.
Another useful way to develop this plugin is by writing tests as you make changes (TDD style). Unit tests can be run using Jest. During development, run `npm run test:watch` to continuously test code on each save.

Unit tests can be run using jest. During development, run `npm run test:watch` to continuously test code on each save.
NOTE: We enforce our code styles with ESLint and Prettier before committing. This means that you will need to fix any errors before committing your code.
141 changes: 11 additions & 130 deletions README.md
Original file line number Diff line number Diff line change
@@ -10,155 +10,36 @@

PushIn.js is a lightweight parallax effect, built with JavaScript, that simulates an interactive dolly-in or push-in animation on a webpage.

Check out the [live demo](http://nateplusplus.github.io/pushin/) for a working example.
Check out the [live demo](http://pushinjs.com/) for a working example.

## Compatibility

PushIn.js supports all browsers that are [ES5-compliant](http://kangax.github.io/compat-table/es5/) (IE8 and below are not supported).
PushIn.js supports all browsers that are [ES5-compliant](http://kangax.github.io/compat-table/es5/).

## Getting started
## Installation

### 1. Install pushin with NPM or a CDN
PushIn is available via NPM or a CDN. Follow the detailed instructions in the documentation site: https://pushinjs.com/installation.

If you're using npm, you can install the package by running:

```
```shell
npm install --save pushin
```

Import assets into your javascript (if using Webpack) or directly into your CSS files.

```js
// webpack
import 'pushin/dist/pushin.css';
```

~ _or_ ~

```css
/* css */
@import 'node_modules/pushin/dist/pushin.css';
```

**Alternatively, you can use the CDN:**

```html
<link rel="stylesheet" href="https://unpkg.com/pushin/dist/pushin.min.css" />
<script
type="text/javascript"
src="https://unpkg.com/pushin/dist/umd/pushin.min.js"
></script>
```

### 2. Required HTML structure

At the most basic level, there are a few things you need to set up on your page in order for this to work properly.
Alternatively, you can use a CDN:

Use the following example snippet to create a "scene" for the pushin effect.

**Example:**

```html
<div class="pushin">
<div class="pushin-scene">
<div class="pushin-layer">This is the first layer you'll see.</div>
<div class="pushin-layer">
This is a second layer, which will be positioned behind the first one.
</div>
</div>
</div>
```

Each div with the class `pushin-layer` can hold the content that you want to grow or shrink when scrolling.

### 3. Initialize the effect

Once you have your HTML set up, there are two ways to initialize the effect:

- call `new PushIn().start()`:

```js
import { PushIn } from 'pushin';

const container = document.querySelector('.pushin');
new PushIn(container).start();
<script src="https://cdn.jsdelivr.net/npm/pushin@6/dist/umd/pushin.min.js"></script>
```

- call `pushInStart()` function (which is exported onto the global scope):

```js
import 'pushin';

pushInStart();
```
## Configuration

To assist in setting up your effect, you can use the debug tool to easily deterimine where you want effects to begin and end when scrolling down your page. To enable this feature, simply pass a config object with `debug: true` into the helper function.

See a working demo of this tool here: [Responsive design](http://nateplusplus.github.io/pushin/examples/responsive/)

```js
import 'pushin';

// initialize push-in effect
pushInStart({ debug: true });
```

### 4. Destroying the effect

The `PushIn` has a `destroy()` method that may be called to do all cleanups once the view is destroyed. For instance, this is how you would want to do this in React:

```jsx
import React, { useLayoutEffect, useRef } from 'react';
import { PushIn } from 'pushin';

export default function PushInComponent() {
const pushInContainer = useRef();

useLayoutEffect(() => {
const pushIn = new PushIn(pushInContainer.current);
pushIn.start();

return () => pushIn.destroy();
});

return (
<div className="pushin" ref={pushInContainer}>
<div className="pushin-scene">
<div className="pushin-layer">This is the first layer you'll see.</div>
<div className="pushin-layer">
This is a second layer, which will be positioned behind the first one.
</div>
</div>
</div>
);
}
```
### 5. Configuration
There are several plugin configurations you can use to customize for your unique project.
**Refer to [https://nateplusplus.github.io/pushin/api](https://nateplusplus.github.io/pushin/api) for a detailed breakdown of all available configurations.**
## SSR
This effect is heavily reliant on window events, which will not be available in a server-side rendered environment. You will need to bind the window events once the DOM has loaded on the client side. To do this, run the `bindEvents()` method.
```js
// Start up the effect server-side
const pushIn = new PushIn();
pushIn.start();
//...
// Bind events client-side
pushin.bindEvents();
```
There are several plugin configurations you can use to customize for your unique project. Refer to [https://pushinjs.com/api](https://pushinjs.com/api) for a detailed breakdown of all available configurations.

## Contributing

We've setup separate documentation for contributors: [CONTRIBUTING.md](CONTRIBUTING.md)
Contributors are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) to learn more about the best ways to contribute to this project.

## Development Setup

We've setup separate documentation for developers: [DEVELOPERS.md](DEVELOPERS.md)
See [DEVELOPERS.md](DEVELOPERS.md) for details on how to set up your development environment to contribute to this project.
5 changes: 0 additions & 5 deletions build/banner.js

This file was deleted.

1 change: 1 addition & 0 deletions dist/esm/constants.d.ts
Original file line number Diff line number Diff line change
@@ -7,3 +7,4 @@ export declare const PUSH_IN_DEFAULT_BREAKPOINTS: number[];
export declare const PUSH_IN_LAYER_INDEX_ATTRIBUTE = "data-pushin-layer-index";
export declare const PUSH_IN_DEFAULT_ASPECT_RATIO: number[];
export declare const PUSH_IN_DEFAULT_TRANSITION_LENGTH = 200;
export declare const PUSH_IN_DEFAULT_LAYER_DEPTH = 1000;
10 changes: 5 additions & 5 deletions dist/esm/pushInBase.d.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
export default abstract class PushInBase {
container: HTMLElement;
options: {
container?: HTMLElement | null;
settings: {
[key: string]: any;
};
/**
* Get the value for an option from either HTML markup or the JavaScript API.
* Return a string or array of strings.
*/
getStringOption(name: string): string | string[];
getStringOption(name: string, container?: HTMLElement | null | undefined): string | string[];
/**
* Get the value for an option from either HTML markup or the JavaScript API.
* Returns a number or array of numbers.
* If nothing found, returns null.
*/
getNumberOption(name: string): number | number[] | null;
getNumberOption(name: string, container?: HTMLElement | null | undefined): number | number[] | null;
/**
* Get the value for an option from either HTML markup or the JavaScript API.
* Returns a boolean or array of booleans.
* If nothing found, returns null.
*/
getBoolOption(name: string): boolean | boolean[] | null;
getBoolOption(name: string, container?: HTMLElement | null | undefined): boolean | boolean[] | null;
getAttributeName(name: string): string;
}
2 changes: 2 additions & 0 deletions dist/esm/pushInComposition.d.ts
Original file line number Diff line number Diff line change
@@ -5,6 +5,8 @@ export declare class PushInComposition extends PushInBase {
scene: PushInScene;
options: CompositionOptions;
constructor(scene: PushInScene, options: CompositionOptions);
start(): void;
setContainer(): void;
/**
* Set the aspect ratio based setting.
*/
Loading