Don't forget the .htaccess file — it routes all requests to index.php, the site template.

• Deep link requests will render a full site with the requested content whereever you place $giga->content()
• Normal navigation requests will be intercepted by giga; Giga JS will request your html content via AJAX.

Copy /js/src from Giga's source tree to your webserver's /js/src. Note that the demos accomplish this with a symlink. This step is optional, but it allows the debug workflow we'll discuss later.

Next, you'll need to deside whether to architect your site using the Full Site Build or the Module Build. Demos are included for each approach.

• js
  • lib
    • ie
      • function.bind.js
    • jquery-1.7.1.js (or) zepto.js
    • require.config.js
    • require.js

require.js and require.config.js are optional for the full site build, but allow the debug workflow we'll discuss later. They are required for the module build as it currently assumes your site JavaScript is assembled from AMD modules. (This may change in the future)

For example, if you were installing into the /module folder (as the module demo does):

• .htaccess: RewriteBase /module
• require.config.js: baseUrl: "/module/js"
• index.php: Pass the path to the php giga constructor: $g = new giga('/module'); Make sure all the paths to script files are prefixed with /module. Remember, all deeplink requests are routed through index.php so relative paths won't work.

<div>
    Hello World!
</div>

Do the same for each page in your site. To create http://example.com/products/widget, create the file products/widget/data.html off the site root.

<div>
    Hello World!
    <img src="earth.jpg"> <!-- same folder as data.html -->
    <a href="mars">blast off</a> <!-- load content at mars/data.html -->
</div>

The Hello World example will use fade-in and fade-out transitions by default because nothing was specified.

<div data-transitionin="listIn" data-transitionout="listOut">
    Hello World
</div>

Now, when this page is requested, it will use the listIn / listOut functions defined in the transitions class. In the demo, these are defined in /js/TestTransitions.js

<div data-contenttarget="#specialFeature" data-transitionin="listIn" data-transitionout="listOut">
    Hello World
</div>

Now, this content will be rendered inside the element with the id "specialFeature". Each data.html file can have multiple content containers which populate content into various container targets.

TestTransition.prototype.fadeIn = function($content)
{
    $content.css({opacity: 0});

    return TweenLite.to($content, this.transitionManager.duration, {
        opacity: 1
    });
};

Transition functions are passed a content node (a jQuery/Zepto object) and return a GreenSock Tween or a function that transitions that node.

Normal Flow (default):

• Transition OUT old content first
• Preload new content
• Transition IN new content

Preload

• Preload new content first
• Transition OUT old content first
• Transition IN new content

Reverse

• Preload new content
• Transition IN new content first
• Transition OUT old content

Cross

• Preload new content
• Transition IN new content & Transition OUT old content simultaneously

Set the default flow in the FlowController constructor: this.defaultFlow = this.NORMAL_FLOW;

this.giga.setBranchFlow('/site/project3/', this.giga.flowController.CROSS_FLOW);

    <a href="">
    

Note: non-transformed links should still work. They're what Google and other search engines will see when indexing your site.