Merge pull request #151 from janpaepke/new-release

New Release

.travis.yml

@@ -0,0 +1,12 @@
+language: node_js
+node_js:
+ - "0.10"
+script: ./node_modules/karma/bin/karma start ./dev/tests/karma.conf.js --single-run
+before_install:
+  - export CHROME_BIN=chromium-browser
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+before_script:
+ - "node dev/build"
+notifications:
+  email: false

CHANGELOG.md

@@ -0,0 +1,57 @@
+CHANGELOG
+=========
+
+## 1.1.0 (unreleased)
+
+#### potentially breaking changes:
+ - **zero duration scene events & states**  
+   The event logic for zero duration scenes has been changed: From now on a zero duration scene will trigger `enter`, `start`, `progress` (in this order) when scrolling forward past the trigger point and `progress`, `start`, `leave` when scrolling in reverse.  
+   This means there will never be an `end` event triggered, which reflects the behaviour more accurately.  
+   Furthemore this affects the scene's possible states, which can now only be `"BEFORE"` and `"DURING"` for zero duration scenes.  
+   To learn more, read [this issue](https://github.com/janpaepke/ScrollMagic/issues/141#issuecomment-53549776) or [this documentation](http://janpaepke.github.io/ScrollMagic/docs/ScrollScene.html#progress).
+ - **removed method `startPosition()`**  
+   Method was marked deprecated since v1.0.7 and has now been replaced by `triggerPosition()`.  
+   The terms "_offset_" and "_position_" were used too randomly.  
+   To avoid confision, from now on "_offset_" will be used in connection with the scroll offset of the container, while "_position_" refers to the top / left values within the DOM.
+ - **`change` event only fires when change actually happened**  
+   If a setter is used with the current value or the internal validator fails and defaults to the same value an option is already set to, no `change` event will be fired anymore.
+
+#### non-breaking changes
+ - **scenes are sorted in controller**  
+   Scenes attached to the same controller are now updated in the order of their start position.  
+   This way DOM modifcations (e.g. tweens) that influence each other are sure to be called in the right order.  
+   To learn more, read [this issue](https://github.com/janpaepke/ScrollMagic/issues/141).
+ - **marked `triggerOffset` as deprecated, replaced by `triggerPosition`**  
+   Renaming to avoid confusion. Read above for clarification.
+ - **new controller option `refreshInterval`**  
+   To update values that otherwise wouldn't fire an event a `refreshInterval` option was added to poll for changes.  
+   These changes involve resizing of a div scroll container or movement of a scene's trigger element position.  
+ - **no more logging in minified version**  
+   All debug logging functionality was removed when using the minified version to save on filesize.
+
+#### features:
+ - new controller method: [scrollTo](http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.html#scrollTo)
+ - new controller method: [scrollPos](http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.html#scrollPos)
+ - new scene method: [refresh](http://janpaepke.github.io/ScrollMagic/docs/ScrollScene.html#refresh)
+ - new scene method: [setClassToggle](http://janpaepke.github.io/ScrollMagic/docs/ScrollScene.html#setClassToggle), [removeClassToggle](http://janpaepke.github.io/ScrollMagic/docs/ScrollScene.html#removeClassToggle) respectively
+ - new scene event: [shift](http://janpaepke.github.io/ScrollMagic/docs/ScrollScene.html#event:shift) fires when scene position changes
+ - new scene event: [destroy](http://janpaepke.github.io/ScrollMagic/docs/ScrollScene.html#event:destroy) fires when scene is destroyed
+ - extended scene option [duration](http://janpaepke.github.io/ScrollMagic/docs/ScrollScene.html#duration) to support dynamic updates in responsive layouts
+ - docs: grouped methods for more clear arrangement
+ - docs: various additions and clarifications
+
+#### bugfixes:
+ - removing and resetting pins during pin phase didn't work properly
+ - using mousewheel to scroll over pinned elements in container (See issues [34](https://github.com/janpaepke/ScrollMagic/issues/34), [50](https://github.com/janpaepke/ScrollMagic/issues/50), [82](https://github.com/janpaepke/ScrollMagic/issues/82), [139](https://github.com/janpaepke/ScrollMagic/issues/139), [140](https://github.com/janpaepke/ScrollMagic/issues/140))
+ - pin width collapsed, if no width was defined (See issues [63](https://github.com/janpaepke/ScrollMagic/issues/63), [94](https://github.com/janpaepke/ScrollMagic/issues/94))
+ - positioned pins didn't work in IE 9
+ - padding of pinned elements was added to relative width
+ - event namespace issues
+ - docs: fixed highlight & deeplink issues
+
+#### examples:
+ - basic: [CSS Class Toggles](http://janpaepke.github.io/ScrollMagic/examples/basic/class_toggles.html)
+ - advanced: [SVG Line Drawing](http://janpaepke.github.io/ScrollMagic/examples/examples/advanced/svg_drawing.html)
+ - advanced: [Parallax Sections](http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html)
+ - expert: [Image Sequences](http://janpaepke.github.io/ScrollMagic/examples/expert/image_sequence.html)
+ - expert: [Bezier Path Animations](http://janpaepke.github.io/ScrollMagic/examples/expert/bezier_path_animation.html)

CONTRIBUTING.md

@@ -73,19 +73,16 @@ Make sure you have [node.js](http://nodejs.org) installed and running on your sy
 To find out just open your Console (MacOsX Terminal) and type `node -v`.
 
 ## Directory Structure
-* `/dev` base folder of the development environment
+* `/dev` base folder for ScrollMagic development
 	* `/dev/docs` contains configuration and template files for the docs generation
 	* `/dev/src` all the ScrollMagic source files
 	* `/dev/tests` testing environment
 		* `/dev/tests/fixtures` html files for usage in tests
 		* `/dev/tests/spec` contains all the spec files written in [jasmine](http://jasmine.github.io)
 
-## Prepare Development environment
-Open your console and navigate to the ScrollMagic directory. Then change to the dev directory.
-```Shell
-$ cd dev
-```
-To install all necessary components we use the <b>n</b>ode <b>p</b>ackage <b>m</b>anager (comes with node).
+## Prepare the Development Environment
+Open your console and navigate to the ScrollMagic directory.  
+Now we need to install the necessary components using the <b>n</b>ode <b>p</b>ackage <b>m</b>anager (comes with node):
 ```Shell
 $ npm install
 ```
@@ -97,7 +94,7 @@ To combine all source files and store them in their correct location we need to
 The build process also automatically checks for javascript errors and minifies the main file.
 This is achieved by calling:
 ```Shell
-$ node build
+$ node dev/build
 ```
 You can pass in various arguments to customize the build:
 ```
@@ -113,20 +110,30 @@ You can pass in various arguments to customize the build:
  	Flag to also update the docs. If no directory is provided the default output directory '/docs' will be used.
  	example: node build -d
 ```
-So in most cases your build command will look like this:
+So for new releases the build command is this
+```Shell
+$ node dev/build -v=1.1.1 -d
+```
+This will update the version to 1.1.1 and also generate new docs.  
+
+In most cases though you will only need to call the basic command:
 ```Shell
-$ node build -v=1.0.10 -d
+$ node dev/build
 ```
-This will update the version to 1.0.10 and also generate new docs.
 
 ## Test ScrollMagic
 ScrollMagic comes with a test suite that makes sure that everything works as expected after changing the source code.
-**NOTE**: For now only few features are speced out. More tests will follow in due time.  
-To run tests call:
+**NOTE**: The main scene methods have not been fully specced out yet, but will be added in the future.
+To start the test suite call:
 ```Shell
 $ npm test
 ```
+It will stay active an automatically restart the test cycle whenever you change something.
 *Tip:* In case you don't know – to quit the process use ctrl+c.
 
-When you added a new feature to ScrollMagic be sure to write a new test for it, if you are able to.  
-You'll find a stub spec file here: `dev/tests/spec/_spec.sample.js`.
+To run only a single test cycle and exit after use this:
+```Shell
+$ npm run test-single-run
+```
+
+When you added a new feature to ScrollMagic please be sure to write a new test for it, if you are able to.

README.md

@@ -1,6 +1,6 @@
-#ScrollMagic [![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif "Shut up and take my money!")](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=8BJC8B58XHKLL "Shut up and take my money!")
+#ScrollMagic <a href='https://github.com/janpaepke/ScrollMagic/blob/master/CHANGELOG.md' class='version' title='Whats New?'>v1.1.0</a> [![Build Status](https://api.travis-ci.org/janpaepke/ScrollMagic.svg?branch=master)](https://travis-ci.org/janpaepke/ScrollMagic) 
 
-###The jQuery plugin for magical scroll interactions.
+###The jQuery plugin for magical scroll interactions. [![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif "Shut up and take my money!")](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=8BJC8B58XHKLL "Shut up and take my money!")
 
 ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a playback scrub control.  
 It's the plugin for you, if you want to ...
@@ -23,12 +23,19 @@ The major perks of using ScrollMagic include:
 * optimized performance
 * flexibility
 * mobile compatibility
+* event management
 * ready for responsive webdesign
 * object oriented programming and object chaining
-* event management
+* readable, centralized code and intuitive development
 * support for both scroll directions (even different on one page)
 * support for scrolling inside div containers (even multiple on one page)
 * extensive debugging and logging capabilities
+* detailed documentation
+* many application examples
+
+**Is ScrollMagic the right plugin for you?**  
+ScrollMagic takes an object oriented approach using a controller for each scroll container and multiple "scroll scenes" to define what should happen at what point in time. While this offers a great deal of control it might be a little confusing, especially if you're just starting out with javascript.  
+If the above points are not crucial for you and you are just looking for a simple solution to implement basic css animations I would strongly recommend taking a look at the awesome [skrollr](http://prinzhorn.github.io/skrollr/) project. It almost solely relys on element attributes and thus requires minimal to no javascript knowledge.
 
 ## Installation
 Aside from [jQuery](http://jquery.com/) make sure you have loaded the [Greensock Animation Plattform (TweenMax)](http://www.greensock.com/gsap-js/).  
@@ -41,21 +48,24 @@ For deployment use the minified version __instead__:
 ```html
 <script type="text/javascript" src="js/jquery.scrollmagic.min.js"></script>
 ```
+_**NOTE:** The logging feature is removed in the minified version for obvious file size considerations._
 
-And to have access to the debugging extension during development, include this file __additionally__:
+To have access to the debugging extension during development, include this file __additionally__:
 ```html
 <script type="text/javascript" src="js/jquery.scrollmagic.debug.js"></script>
 ```
 You can remove the debugging extension for actual deployment.
 
 ## Usage
-
+The basic ScrollMagic design pattern is one controller, which has several scenes attached.  
+Each scene has a definite start and end position and defines what happens when the container is scrolled to the specific offset.
 ```javascript
 // init controller
 var controller = new ScrollMagic();
 
 // assign handler "scene" and add it to Controller
 var scene = new ScrollScene({duration: 100})
+				.setPin("#my-sticky-element")	// pins the element for a scroll distance of 100px
 				.addTo(controller);
 
 // add multiple scenes at once
@@ -68,7 +78,7 @@ controller.addScene([
 ```
 Check out the [examples](http://janpaepke.github.com/ScrollMagic/examples/index.html) or the [documentation](http://janpaepke.github.com/ScrollMagic/docs/index.html) for full reference.
 ##Help
-To get help please read the [support guidelines](https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md).  
+To get help please start by reading the [support guidelines](https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md).  
 If you still can't figure it out, please post your questions in the [project's issues section](https://github.com/janpaepke/ScrollMagic/issues).
 
 ##Browser Support
@@ -86,5 +96,5 @@ I started this project to intensify my knowledge of javascript.
 ##License
 
 ScrollMagic is dual licensed under the MIT license and GPL.  
-For more information click [here](https://github.com/janpaepke/ScrollMagic/blob/master/LICENSE.md).  
+For more information click [here](LICENSE.md).  
 Click [here](http://www.greensock.com/licensing/) to get more information on greensock licensing.

ScrollMagic.jquery.json

@@ -1,7 +1,8 @@
 {
 	"name": "ScrollMagic",
-	"version": "1.0.9",
 	"title": "ScrollMagic",
+	"version": "1.1.0",
+	"description": "The jQuery plugin for magical scroll interactions.",
 	"author": {
 		"name": "Jan Paepke",
 		"url": "http://www.janpaepke.de"
@@ -12,24 +13,29 @@
 			"url": "https://github.com/janpaepke/ScrollMagic/blob/master/LICENSE.md"
 		},
 		{
-			"type": "GPL",
+			"type": "GPL-3.0+",
 			"url": "http://www.gnu.org/licenses/gpl-3.0.html"
 		}
 	],
 	"dependencies": {
 		"jquery": ">=1.7",
 		"greensock": ">=1.8"
 	},
-	"description": "The jQuery plugin for magical scroll interactions.",
 	"keywords": [
 		"scroll",
 		"scrolling",
 		"animation",
 		"sticky",
 		"pin",
+		"fixed",
 		"scrollbar",
+		"scrub",
+		"sync",
 		"position",
-		"progress"
+		"progress",
+		"parallax",
+		"events",
+		"classes"
 	],
 	"homepage": "http://janpaepke.github.io/ScrollMagic/",
 	"docs": "http://janpaepke.github.io/ScrollMagic/docs",

bower.json

@@ -1,17 +1,39 @@
 {
 	"name": "ScrollMagic",
+	"version": "1.1.0",
 	"description": "The jQuery plugin for magical scroll interactions.",
-	"version": "1.0.9",
 	"homepage": "http://janpaepke.github.io/ScrollMagic/",
-	"author": {
-		"name": "Jan Paepke",
-		"url": "http://www.janpaepke.de"
-	},
+	"authors": [
+		{
+			"name": "Jan Paepke",
+			"homepage": "http://www.janpaepke.de"
+		}
+	],
 	"main": [
 		"js/jquery.scrollmagic.js"
 	],
+	"keywords": [
+		"scroll",
+		"scrolling",
+		"animation",
+		"sticky",
+		"pin",
+		"fixed",
+		"scrollbar",
+		"scrub",
+		"sync",
+		"position",
+		"progress",
+		"parallax",
+		"events",
+		"classes"
+	],
 	"dependencies": {
 		"jquery": "~1.11.0",
 		"gsap": "~> 1.11.5"
-	}
+	},
+	"license": [
+		"MIT",
+		"GPL-3.0+"
+	]
 }

css/demo.css

@@ -188,6 +188,23 @@ h3 {
 	top: 50%;
 	line-height: 80px;
 }
+#pin #draw {
+	width: 500px;
+	height: 150px;
+	top: 50%;
+	left: 50%;
+	margin-top: -75px;
+	margin-left: -250px;
+	position: absolute;
+
+}
+#pin #draw path {
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	fill: none;
+	stroke: #000000;
+	stroke-width: 5;
+}
 #pin #wipe {
 	height: 100%;
 	width: 0%;

css/examples.css

@@ -75,6 +75,13 @@ section#titlechart #description a.viewsource {
 	display: block;
 	margin-bottom: 20px;
 }
+section#titlechart #description code {
+	background-color: #E1F1FF;
+	padding-left: 2px;
+	padding-right: 2px;
+	white-space: nowrap;
+}
+
 section#titlechart #description ol, section#titlechart #description p {
 	text-align: left;
 	max-width: 400px;
@@ -212,6 +219,7 @@ section.demo.doublewidth, .spacer.doublewidth {
 	border-radius: 8px;
 	text-align: center;
 	vertical-align: middle;
+	padding: 0 5px;
 }
 .box1 {
 	min-width: 100px;
@@ -385,6 +393,9 @@ form fieldset legend {
 .move * {
 	cursor: auto;
 }
+.move label {
+	cursor: default;
+}
 
 /*
 	MENU
@@ -758,11 +769,26 @@ a.viewsource:before {
 	margin-top: 20px;
 }
 
-.disablePointerEvents {
-	pointer-events: none;
+#imagesequence {
+	height: 300px;
+}
+
+.copyright {
+	font-variant: italic;
+	font-size: 11px;
+}
+
+#bezier {
+	overflow: hidden;
+	position: relative;
 }
-.disablePointerEvents a {
-	pointer-events: auto;
+#bezier #plane {
+	position: absolute;
+	left: -100px;
+}
+#bezier a.viewsource {
+	margin: 100px;
+	display: inline-block;
 }
 
 /*