Shaun Gorneau

You might want to look at the Bezier Plugin for animating along a defined path. http://greensock.com/docs/#/HTML5/Plugins/BezierPlugin/

This requires a two part answer. First, you have to be sure your navigable sections are sized using the appropriate methods to fill the viewport, so that's a CSS task. There are a number of ways to accomplish that.
 
Next you have to intercept the menu option clicks ( most likely with event.preventDefault() ), grab the URL path and match some element in the DOM with that string (by ID, class, or some data-attribute).
 
Lastly you'll animate the scroll position to the offsetTop of the matched element.

Hi benoit, you can use set()
 
tl.set('#el' , { autoAlpha: 0 } );

Without getting too ahead and assuming what you want here, the first thing I think needs to happen is each bubble needs to be its own timeline. Secondly, the repeat property on the to() method will keep it from ever reaching the next animation in the chain. Have a look here,
 

See the Pen ZQyaXZ?editors=001 by sgorneau (@sgorneau) on CodePen
 
Lastly, I would assume that the bubbles should not repeat their own positions and timings repeatedly ... I would update the parameters with an onComplete call.

Is this what you are after?
 

See the Pen rxxPJY by sgorneau (@sgorneau) on CodePen

Take a look here, you can simplify the code quite a bit, and the results are (I believe) what you are looking for.
 

See the Pen VvjMoW by anon (@anon) on CodePen

Where you are using myClass ... that's an object, not a string. Just like in naming any variable, hyphens are not allowed. If I did the following
a = 0; b = 1; a-b = 2; // <- I'm saying a minus b = 2 If you want to tween a class name (with or without a hyphen), reference the object with the class selector
TweenMax.to(".myClass-hypen", .3, {className:"yourClass"});
See the Pen GpRaRe by sgorneau (@sgorneau) on CodePen

Use a child element within the wrapper, absolutely positioned and bottom: 0;
 
Then tween the height of the child;
 

See the Pen EjBzwB by sgorneau (@sgorneau) on CodePen

If I understand correctly, you want the Tween (once triggered) to remain in the tweened position and not reverse back to it's pre-triggered state when scrolling back ... is that right? If so, that's as simple as setting the reverse value to false on the scene.
 

See the Pen JdqEwZ by sgorneau (@sgorneau) on CodePen

The problem lies in creating a new timeline on every click ... essentially, it is issuing the reverse() method on a timeline that hasn't yet played. Create the timeline outside of your click event and then control it with the click event.
 

See the Pen gpQyzB by sgorneau (@sgorneau) on CodePen

Hi malballah,
 You can use a very similar technique I used to demonstrate a side-scrolling background for someone else's question
 
http://greensock.com/forums/topic/11650-continuous-repeating-scroll/

See the Pen KpwWgy by sgorneau (@sgorneau) on CodePen

Your Javascript is firing before the document is ready. Try
document.addEventListener("DOMContentLoaded", function(event) { TweenMax.to(".logo", 2, {left:600}); }); or, if using jQuery
$( document ).ready(function() { TweenMax.to(".logo", 2, {left:600}); }); I'd recommend jQuery since it's ready() method is more involved than "DOMContentLoaded"

You could shorten it up big time by tweening the red line and then putting the blue line tween on a timeline that repeats infinitely.
 

See the Pen RPrwJy by sgorneau (@sgorneau) on CodePen

Absolutely. You just need to respond to a click event and pass the x/y to a tween created in response to the click. Here is an example,
 

See the Pen bddLwL by sgorneau (@sgorneau) on CodePen

set() is a zero duration tween ... and tweens are valid for properties with numerical values. I believe that is your issue here (I could be wrong though ).

The way to do this would be to
Use Javascript to duplicate the repeated image once and append it to the container (no need to put them in markup) Use CSS to position these images side by side by telling the container not to wrap Tween the x property of the *container* to the width of the single image (this will move both images in lock) Repeat the tween infinitely (-1) Here is a codepen to demonstrate: 
See the Pen KpwWgy by sgorneau (@sgorneau) on CodePen