Skip to content

Commit

Permalink
Rename PageAnimation to Pangea
Browse files Browse the repository at this point in the history
  • Loading branch information
schlosser committed Mar 22, 2016
1 parent f257b7d commit f160400
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 45 deletions.
2 changes: 1 addition & 1 deletion .jshintrc
Expand Up @@ -2,5 +2,5 @@
"browser": true,
"browserify": true,
"devel": true,
"predef": [ "PageAnimation" ]
"predef": [ "Pangea" ]
}
32 changes: 16 additions & 16 deletions README.md
@@ -1,5 +1,5 @@
pageanimation.js
===========================
pangea.js
=========

Choreograph elegant, performant exit animations on the web. This library is design from a "less is more" additude in regards to JavaScript code. Animations are expected to be implemented separately, using pure CSS transitions & animations.

Expand All @@ -12,8 +12,8 @@ Choreograph elegant, performant exit animations on the web. This library is desi
#### Step 1: Write your markup

```html
<!-- 1. Include the pageanimation.js library -->
<script src="pageanimation.min.js"></script>
<!-- 1. Include the pangea.js library -->
<script src="pangea.min.js"></script>

<!-- 2. Tag an element as being the last to animate, using any ID you see fit -->
<h1>Test webpage</h1>
Expand Down Expand Up @@ -43,7 +43,7 @@ h1, p {
* Example animation styles.
*
* Here, we fade out text and fade the background to black when the
* PageAnimation library gives the body the animating-to-about-page class.
* Pangea library gives the body the animating-to-about-page class.
*/
body.animating-to-about-page {
background-color: black;
Expand All @@ -63,17 +63,17 @@ body.animating-to-about-page p {
* animating-to-about-page class. When the element with ID last-to-animate
* is done transitioning, we will navigate to the /about page.
*/
var animation = new PageAnimation()
var pangea = new Pangea()
.register(/\/about/, 'last-to-animate', 'animating-to-about-page')
.enable();
```


## API

### PageAnimation([_options_])
### Pangea([_options_])

The `PageAnimation`constructor will setup a new page animation manager instances. Returns a new instance of the `PageAnimation` class.
The `Pangea`constructor will setup a new page animation manager instances. Returns a new instance of the `Pangea` class.

You can customize the instance by passing the `options` parameter. The example below uses all options and their defaults:

Expand All @@ -87,7 +87,7 @@ var opts = {
beforeAnimationStart: function() {},
onTransitionEnd: function() {},
};
var pageAnimation = new PageAnimation(opts)
var pangea = new Pangea(opts)
```

##### `options`
Expand Down Expand Up @@ -158,12 +158,12 @@ Register a new animation on this page.
#### `options.shouldScroll`
> **Type**: `bool`
> **Defualt**: The value of `options.shouldScroll` passed into `PageAnimation()`.
> **Defualt**: The value of `options.shouldScroll` passed into `Pangea()`.
> **Description**: Whether or not we should scroll the page as part of this animation.
#### `options.scrollTiming`
> **Type**: `bool`
> **Default**: the value of `options.scrollTiming` passed into `PageAnimation()`.
> **Default**: the value of `options.scrollTiming` passed into `Pangea()`.
> **Description**: The scroll timing for this animation
> **Options**:
>
Expand All @@ -172,18 +172,18 @@ Register a new animation on this page.
> - `"after"`: scroll once the animations are complete
### deregister(_urlRegex_)
Deregisters the animation for the passed `urlRegex`. Returns the PageAnimation instance.
Deregisters the animation for the passed `urlRegex`. Returns the Pangea instance.

#### `urlRegex`
> **Type**: `string`
> **Description** The same pattern that was passed into `PageAnimation.register()`.
> **Description** The same pattern that was passed into `Pangea.register()`.
### enable()

Enable the PageAnimation library by beginning to listen to click events, running animations appropriately.
Enable the Pangea library by beginning to listen to click events, running animations appropriately.

### disable()

Disable the PageAnimation library by removing event listeners set in `PageAnimation.enable()`.
Disable the Pangea library by removing event listeners set in `Pangea.enable()`.

[download]: https://github.com/minimill/pageanimation.js/releases/download/v0.1/pageanimation.min.js
[download]: https://github.com/minimill/pangea.js/releases/download/v0.1/pangea.min.js
4 changes: 2 additions & 2 deletions package.json
@@ -1,8 +1,8 @@
{
"name": "pageanimation.js",
"name": "pangea.js",
"version": "0.1.0",
"description": "Choreograph elegant, performant exit animations on the web",
"repository": "https://github.com/minimill/pageanimation.js",
"repository": "https://github.com/minimill/pangea.js",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-jscs": "^3.0.1",
Expand Down
50 changes: 25 additions & 25 deletions src/pageanimation.js → src/pangea.js
Expand Up @@ -65,7 +65,7 @@
}

/**
* The PageAnimation constructor
* The Pangea constructor
*
* @param {Object} options - Configuration options
* @param {bool} options.shouldScroll - whether or we should scroll the page
Expand Down Expand Up @@ -93,7 +93,7 @@
* @param {function} options.onTransitionEnd - a function to run once the
* animation is complete.
*/
function PageAnimation(options) {
function Pangea(options) {

var opts = options || {};

Expand Down Expand Up @@ -142,19 +142,19 @@
* @param {Object} options - Configuration options
* @param {bool} options.shouldScroll - whether or not we should scroll the
* page as part of this animation.
* defualt: the value of options.shouldScroll passed into PageAnimation()
* defualt: the value of options.shouldScroll passed into Pangea()
* @param {bool} options.scrollTiming - the scroll timing for this animation
* options:
* 'before': scroll the page before starting animations
* 'during': scroll the page and start the animations at the same time
* 'after': scroll once the animations are complete
* default: the value of options.scrollTiming passed into PageAnimation()
* default: the value of options.scrollTiming passed into Pangea()
* @param {Number} options.scrollDuration - the scroll speed in ms.
* default: the value of options.scrollDuration passed into PageAnimation()
* default: the value of options.scrollDuration passed into Pangea()
*
* @returns the new PageAnimation instance.
* @returns the new Pangea instance.
*/
PageAnimation.prototype.register = function(urlRegex, finalElementId, bodyClass, options) {
Pangea.prototype.register = function(urlRegex, finalElementId, bodyClass, options) {
// Create the animation
var opts = options || {};
var animation = {
Expand Down Expand Up @@ -183,11 +183,11 @@
* Deregisters the animation for the passed urlRegex
*
* @param {string} urlRegex - the same pattern that was passed into
* PageAnimation.register()
* Pangea.register()
*
* @returns the PageAnimation instance.
* @returns the Pangea instance.
*/
PageAnimation.prototype.deregister = function(urlRegex) {
Pangea.prototype.deregister = function(urlRegex) {
if (!this.animations[urlRegex]) {
console.error('No animation registered with regex ' + urlRegex);
}
Expand All @@ -199,20 +199,20 @@
};

/**
* Enable the PageAnimation library by beginning to listen to click events,
* Enable the Pangea library by beginning to listen to click events,
* running animations appropriately.
*/
PageAnimation.prototype.enable = function() {
Pangea.prototype.enable = function() {
for (var i = 0; i < this.links.length; i++) {
this.links[i].addEventListener('click', this.boundOnClick);
}
};

/**
* Disable the PageAnimation library by removing event listeners set in
* `PageAnimation.enable()`.
* Disable the Pangea library by removing event listeners set in
* `Pangea.enable()`.
*/
PageAnimation.prototype.disable = function() {
Pangea.prototype.disable = function() {
for (var i = 0; i < this.links.length; i++) {
this.links[i].removeEventListener('click', this.boundOnClick);
}
Expand All @@ -225,7 +225,7 @@
* @param {int} scrollDuration - how long the scroll should take, in ms
* @param {function} cb - callback to call when the scroll is complete
*/
PageAnimation.scrollTo = function(offset, scrollDuration, cb) {
Pangea.scrollTo = function(offset, scrollDuration, cb) {
cb = cb || function() {};
var startT = Date.now();
var startY = window.scrollY;
Expand Down Expand Up @@ -260,7 +260,7 @@
*
* @param {Object} e - the transition end event object.
*/
PageAnimation.prototype._onTransitionEnd = function(e) {
Pangea.prototype._onTransitionEnd = function(e) {
if (!this.currentAnimation) {
return;
}
Expand All @@ -287,7 +287,7 @@
}.bind(this);

if (animation.shouldScroll && animation.scrollTiming === 'after') {
PageAnimation.scrollTo(this.cb.computeScrollOffset(animation), animation.scrollDuration, followLink);
Pangea.scrollTo(this.cb.computeScrollOffset(animation), animation.scrollDuration, followLink);
} else {
followLink();
}
Expand All @@ -308,7 +308,7 @@
* as part of this animation
* @param {string} animation.scrollTiming - when to scroll the page
*/
PageAnimation.prototype._animate = function(animation) {
Pangea.prototype._animate = function(animation) {
this.cb.beforeAnimationStart(animation);
animation.finalElement.addEventListener(this.transitionEndEvent, this.boundOnTransitionEnd);
this.currentAnimation = animation;
Expand All @@ -318,10 +318,10 @@
}.bind(this);

if (animation.shouldScroll && animation.scrollTiming === 'before') {
PageAnimation.scrollTo(this.cb.computeScrollOffset(animation), animation.scrollDuration, startAnimation);
Pangea.scrollTo(this.cb.computeScrollOffset(animation), animation.scrollDuration, startAnimation);
} else if (animation.shouldScroll && animation.scrollTiming === 'during') {
setTimeout(startAnimation, 0);
PageAnimation.scrollTo(this.cb.computeScrollOffset(animation), animation.scrollDuration);
Pangea.scrollTo(this.cb.computeScrollOffset(animation), animation.scrollDuration);
} else {
startAnimation();
}
Expand All @@ -335,7 +335,7 @@
*
* @param {Object} e - the click event object.
*/
PageAnimation.prototype._onClick = function(e) {
Pangea.prototype._onClick = function(e) {
var anchor = _getTargetAnchor(e);
var path = _getAnchorPath(anchor);

Expand All @@ -358,11 +358,11 @@
};

if (typeof define === 'function' && define.amd) {
define(PageAnimation);
define(Pangea);
} else if (typeof module !== 'undefined' && module.exports) {
module.exports = PageAnimation;
module.exports = Pangea;
} else {
global.PageAnimation = PageAnimation;
global.Pangea = Pangea;
}

}(this));
2 changes: 1 addition & 1 deletion src/pageanimation.min.js → src/pangea.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit f160400

Please sign in to comment.