Tahir Ahmed

I think you are looking for an overlapping animation if I understand it correctly. I think you can achieve this in a number of ways but
See the Pen LbwjaY by tah_med (@tah_med) on CodePen
is what I would propose with slight modifications to your animations timing and the properties that are actually animating but most importantly, utilising position parameter and nested timelines: var mainTimeline = new TimelineMax(); $('.animated').each(function(index){ var tl = new TimelineMax(); tl.from($(this).find('.image'), 0.6, { alpha: 0, y: -20, ease: Power2.easeOut }, 0); tl.from($(this).find('.title'), 0.6, { alpha: 0, y: 10, ease: Power2.easeOut }, 0.2); mainTimeline.add(tl, '-=0.6'); }); $("#play").click(function() { mainTimeline.restart(); }); To understand more about this position parameter in the world of GSAP, I strongly recommend you to take a look at this in-depth article explaining all the different ways you can use it: https://greensock.com/position-parameter.
 
Hope this helps.

I could be wrong but I think you don't need the parts with this `clicked` variable. Not entirely sure why you have them there in the first place but these are the parts enforcing you to click twice in order run the animation so I think the final code should look like:
var buttonOne = $('#one'); buttonOne.click(function() {   tl1.tweenTo('first', {     onComplete: function() {       this.timeScale(1);     }   }).timeScale('7'); }); Hope this helps.
 
P.S. I am also curious in knowing the answer to the 2nd question you posted above i.e. a way to skip pauses defined in a timeline. There are a number of situations where I could see this being useful, your situation is a prime example of it. Perhaps someone here can answer this, I would like to know as well.

Hi @friendlygiraffe,

If I am not wrong, there is no `.EaseNone` (i.e. UpperCase) but it is supposed to be `.easeNone`. So your ease value should look like: `ease: Linear.easeNone` (i.e. camelCase).

Hi @venn,

I think you can use `repeat: 1` along with `yoyo: true` in order to make them return to their original positions. Take a look at this simple fiddle for example.
 
The takeaway is:
timeline.to(top, animDuration, { y: 0, repeat: 1, yoyo: true, ease: animEase }); timeline.to(right, animDuration, { x: 0, repeat: 1, yoyo: true, ease: animEase }); timeline.to(bottom, animDuration, { y: 0, repeat: 1, yoyo: true, ease: animEase }); timeline.to(left, animDuration, { x: 0, repeat: 1, yoyo: true, ease: animEase }); Hope this helps.

Hi @spacewindow,
 
Take a look at this forked codepen: 
See the Pen dGPErM by tah_med (@tah_med) on CodePen
and then the JS below: var tl = new TimelineMax({ repeat: -1 }); // RANDOM NUMBER MIN MAX - https://gist.github.com/timohausmann/4997906 var randMinMax = function(t, n, a) {   var r = t + Math.random() * (n - t)   return a && (r = Math.round(r)), r } // Returns one single Cloud by duplicating the existing Cloud element var createCloud = function(element) {   var newElement = element.cloneNode(true);   element.parentNode.insertBefore(newElement, element.nextSibling);   return newElement; }; // Initial placement of all clouds objects var placeClouds = function(clouds) {   TweenMax.staggerTo(clouds, 0, {     cycle: {       x: function() { return randMinMax(-200, 200); },       y: function() { return randMinMax(0, 100); },       scale: function() { return randMinMax(0.4, 1); }     },     opacity: 0   }, 0); }; // Addition of all cloud elements into main TimelineMax instance var addIntoMainTimeline = function(clouds) {   tl.staggerTo(clouds, 4, {     cycle: {       x: function() { return randMinMax(-200, 200); },       y: function() { return randMinMax(-150, -200); },       scale: function() { return randMinMax(0.4, 2); }     },     bezier: [{ opacity: 0.8 }, { opacity: 0 }],     ease: Power1.easeInOut   }, 0); }; var clouds = function(cloud, numClouds) {   var clouds;   var element = document.querySelector(cloud);   for (var i = 0; i < numClouds; i++) { createCloud(element); }   clouds = document.querySelectorAll(cloud);   placeClouds(clouds);   addIntoMainTimeline(clouds); }; clouds('.dust', 4); Main takeaways are:
The use of .staggerTo methods. Take a look at the documentation for more details on it: TweenMax.staggerTo() static method and TimelineMax's .staggerTo() instance method. Especially the use of `cycle` property introduced in these methods in version 1.18.0. The usage of BezierPlugin. See documentation for more details. Let us know if you have any questions after that.

I noticed that you have some random durations for each of the leaf that you create using generateParticles. And since it all of those inner timelines get added inside the main leafEmitterTl, the onComplete of leafEmitterTl will fire once every animation inside is completed.
 
Also, generateParticles(5) will add 5 inner timelines inside the main leafEmitterTl and they are all queued after one another by default (since you are not really defining a position for each of the leaf inner timelines when adding into leafEmitterTl), hence the onComplete fires in a range between 4 and 30 seconds.
 
Can you try to give an absolute duration (no randomness) to inner timeline of each leaf object with absolute positions (e.g. 0, rather than doing computations as you currently are), all to try to finish the main leafEmitterTl in an absolute time?
 
Also, if you can create a codepen demo, that would really help debug.

I think you need to break down your borderBottom into different parts (e.g. borderBottomWeight, borderBottomStyle and borderBottomColor) and pass those instead of the combined borderBottom that you are currently passing.
 
I don't exactly know why does the shorthand borderBottom doesn't work here but at least you have a replacement for that.
 
JavaScript:
var navbarHeight = $(".navbar").height(); TweenMax.set($(".navbar-default .navbar-nav > li > a"), {   height: navbarHeight,   lineHeight: navbarHeight + 'px',   borderBottomWidth: 0,   borderBottomStyle: 'solid',   borderBottomColor: '#000',   color: "#777777",   fontWeight: "bold" }); TweenMax.set($(".dropdown-menu"), {   display: "block",   autoAlpha: 0 }); $("ul.nav > li > a.link").bind("mouseenter focus", function() {   if (!$(this).hasClass("active")) {     TweenMax.to($(this), 0.3, {       color: "#000000",       borderBottomWidth: 3,       borderBottomStyle: 'solid',       borderBottomColor: '#000'     });   } }); $("ul.nav > li > a.link").bind("mouseleave blur", function() {   if (!$(this).hasClass("active")) {     TweenMax.to($(this), 0.3, {       color: "#777777",       borderBottomWidth: 0,     });   } }); function markActivePage(activeLinkEl) {   TweenMax.to($("ul.nav > li > a.link"), 0.3, {     color: "#777777",     borderBottomWidth: 0   });   TweenMax.to(activeLinkEl, 0.3, {     color: "#ee3124",     borderBottomWidth: 3,     borderBottomStyle: 'solid',     borderBottomColor: '#ee3124'   }); } $('ul.nav > li > a.link').click(function(e) {   e.preventDefault();   $('ul.nav > li > a').removeClass('active');   $('.dropdown-menu > li > a').removeClass('active');   $(this).addClass('active');   markActivePage($(this)); }); $('.dropdown,.dropdown-menu').bind("mouseenter focus", function() {   TweenMax.to($(".dropdown-menu"), 1, {     display: "block",     autoAlpha: 1   }); }); $('.dropdown,.dropdown-menu').bind("mouseleave blur", function() {   TweenMax.to($(".dropdown-menu"), 1, {     display: "block",     autoAlpha: 0   }); }); Also, as per the documentation of CSSPlugin [Link], as of 1.8.0 version, you don't necessarily need to use the `css:{}` wrapper object around the properties you wish to animate. You could simply skip that and it would still work.
 
Hope this helps.

This may help: 
See the Pen RWgPZY by tah_med (@tah_med) on CodePen
.  
HTML:
<section id="gallery">   <div class="cell">     <div class="image">this</div>   </div>   <div class="cell">     <div class="image">this</div>   </div>   <div class="cell">     <div class="image">this</div>   </div>   <div class="cell">     <div class="image">this</div>   </div> </section> CSS:
html { width: 100%; height: 100%; }body { margin: 0; padding: 0; height: 100%; width: 100%; } #gallery { background-color: #000000; width: 100%; height: 100%; position: absolute; } .cell { background-color: #F0F; width: 25%; height: 25%; cursor: pointer; float: left; overflow: hidden; } .image { background-color: #FF0; width: 100%; height: 100%; position: relative; float: left; } JavaScript:
var cells = document.getElementsByClassName('cell'); var numCells = cells.length; var duration = 0.8; var easeOut = Power2.easeOut; var easeIn = Power2.easeIn; for (var i = 0; i < numCells; i += 1) {   cells[i].addEventListener('mouseover', inFunction, false);   cells[i].addEventListener('mouseout', outFunction, false); } function inFunction(e) { TweenMax.to(e.target.parentNode, duration, { autoAlpha: .5, ease: easeOut }); TweenMax.to(e.target, duration, { scale: 1.2, ease: easeOut }); } function outFunction(e) { TweenMax.to(e.target.parentNode, duration, { autoAlpha: 1, ease: easeIn }); TweenMax.to(e.target, duration, { scale: 1, ease: easeIn }); }

Here is an idea for you to try out: See the Pen Yyprqo?editors=001 by tah_med (@tah_med) on CodePen
.
 
The idea is that you have timeline objects for all three of your sliding elements and you basically just control the progress of each of them based on which button is clicked.
 
JavaScript:
 
(function() {   var btnLeft = $('[data-btn="left"]');   var btnRight = $('[data-btn="right"]');   var one = $('.js-census');   var two = $('.js-enviroment');   var three = $('.js-public');   var tlOne = new TimelineMax({ paused: true });   var tlTwo = new TimelineMax({ paused: true });   var tlThree = new TimelineMax({ paused: true });   var duration = 1;   var ease = Power2.easeInOut;   var opacity = 0.1;   TweenMax.set([one, two, three], { position: 'absolute', top: '50%', left: '0%', yPercent: -50, xPercent: -50 });      tlOne.fromTo(one, duration, { xPercent: -80, opacity: opacity }, { left: '50%', xPercent: -50, opacity: 1, ease: Power0.easeNone });   tlOne.to(one, duration, { left: '100%', xPercent: -20, opacity: opacity, ease: Power0.easeNone });   tlTwo.fromTo(two, duration, { opacity: opacity }, { left: '50%', opacity: 1, ease: Power0.easeNone });   tlTwo.to(two, duration, { left: '100%', opacity: opacity, ease: Power0.easeNone });   tlThree.fromTo(three, duration, { opacity: opacity }, { left: '50%', opacity: 1, ease: Power0.easeNone });   tlThree.to(three, duration, { left: '100%', opacity: opacity, ease: Power0.easeNone });      tlOne.progress(0.5);   tlTwo.progress(0);   tlThree.progress(1);      function init() {     btnLeft.on('click', rotateLeft);     btnRight.on('click', rotateRight);   }      function rotateLeft() {     slideLeft(tlOne);     slideLeft(tlTwo);     slideLeft(tlThree);   }   function rotateRight() {     slideRight(tlOne);     slideRight(tlTwo);     slideRight(tlThree);   }      function slideLeft(tl) {     var progress = tl.progress();     if (progress > 0 && progress <= 0.5) {       TweenMax.to(tl, duration, { progress: 0, ease: ease });     } else if (progress > 0.5 && progress <= 1) {       TweenMax.to(tl, duration, { progress: 0.5, ease: ease });     } else {       TweenMax.to(tl, duration, { progress: 1, ease: ease });     }   }      function slideRight(tl) {     var progress = tl.progress();     if (progress >= 0 && progress < 0.5) {       TweenMax.to(tl, duration, { progress: 0.5, ease: ease });     } else if (progress >= 0.5 && progress < 1) {       TweenMax.to(tl, duration, { progress: 1, ease: ease });     } else {       TweenMax.to(tl, duration, { progress: 0, ease: ease });     }   }   //   init(); })();  
Code can be improved surely though i.e. repetitions could be avoided.