Tweens added to timeline doesn't adhere delay?

[mrsam]

Im currently trying to add tweens created in a .each loop to a paused timeline so that I can initiate that timeline whenever I want.

 

I succeed in adding the tweens to the timeline, but it doesnt seem that the timeline adhere possible delays from the tweens - when playing the timeline it goes veryyyyyyyyyyyyyyy slow.

 

To see my wished tweening without the timeline applied you can go to:

http://jsfiddle.net/b3cx28pq/1/

 

To see my slow timeline go here:

http://jsfiddle.net/cgcpwf8z/

 

Any tips on how I can get the timeline approach working in the pace I want and from adding the tweens within the .each loop?

 

Some code (from the fiddle) attempting with the timeline add:

 

//Timeline
var animBlock = new TimelineMax({paused: true});


blockContainer.each(function(index){
    var that = $(this);
    var thisBlock = that.find(".block-item");
    var thisBlockPullLeft = thisBlock.hasClass("pull-left");
    
    var thisH3 = $(this).find("h3");
    var thisParagraf = that.find("p");


    if(thisBlockPullLeft) {
        animBlock.add(TweenMax.from(thisH3, 0.8, {
            delay: delayDurationHello,
            autoAlpha: 0,
            right:-100,
            ease:Power2.easeOut,
            paused: false
        }));
    } else {
        animBlock.add(TweenMax.from(thisH3, 0.8, {
            delay: delayDurationHello,
            autoAlpha: 0,
            left:-100,
            ease:Power2.easeOut,
            paused: false
        }));
    }
    
    animBlock.add(TweenMax.from(thisParagraf, 0.8, {
        delay: delayDurationParagraf,
        autoAlpha: 0,
        top:-25,
        ease:Power2.easeOut
    }));
    
    delayDurationHello += 0.4;
    delayDurationParagraf += 0.6;
})

 

[Shaun Gorneau]

The trick here is to set the position parameter using relative (negative) delays

 

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

[Diaco]

Hi mrsam 

 

pls try this :

function EO(N){return N&1}; // check value is even/odd

animBlock = new TimelineMax({paused:true});

$(".block-container .block").each(function(index){
    animBlock.from($(this).find("h3"),0.8,{opacity:0,x:EO(index)?'+=100':'-=100'});
    animBlock.from($(this).find("p"),0.8,{opacity:0,y:-25});
});

$('#debug').click(function(){animBlock.play()})

See the Pen waQEqN by MAW (@MAW) on CodePen

[OSUblake]

You're running a loop, so use the index to create the timeline labels.

var start1 = "start+=" + index * 0.4;
var start2 = "start+=" + index * 0.6;

http://jsfiddle.net/OSUblake/ojra10c8/