Ease duration in .staggerFrom

[tyelrx]

Is there any easy way to tween the time in the example below. So for example, the first duration of the first oject in the array would be 0.35 and the the last duration of the last oject would be 1.55.

 

//original without tweening the duration

TweenMax.staggerFrom(split.chars, 0.35, {
            opacity: 0,
            top: "-5",
            rotationX: '-180deg',
            transformPerspective: 1500,
            ease: Sine.easeOut,
            force3D:true
        }, 0.05);

 

 

//current solution - (current problem: I have to wait for my "timeArray" values to be updated with values from the 1st tween)

 

var trainElm = document.getElementById('train');
        var split = new SplitText(trainElm, {type:"chars,words,lines", charsClass:"char chars++", linesClass:"line++", wordsClass:"word++", position:"relative"});    
        var charArray = document.getElementsByClassName("char");
    
        var invidDuration = 0.35;
        var invidEndingDuration = 1.55;
        var obj = {time:invidDuration};
        var staggerAmnt = 0.05;
        var staggerTotalAmnt = staggerAmnt * split.chars.length
        var totalTime = staggerTotalAmnt + invidDuration;
        var timeArray = [];        
        
        TweenMax.to(obj, totalTime, {time:invidEndingDuration, ease:Sine.easeOut, onUpdate:newTime, onComplete: animateIn});
        
        function newTime() {
            timeArray.push(obj.time);
        }
        
        function animateIn() {
          for (i = 0; i < timeArray.length; i++) {
                var newDelay = i * staggerAmnt;
                TweenMax.from(charArray, timeArray, {
                        opacity: 0,
                        top: "-5",
                        rotationX: '-180deg',
                        transformOrigin: '50% 50%',
                        ease: Sine.easeOut,
                        force3D:true,
                        delay: newDelay
                });
            }
        };

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

[Carl]

Hi and welcome to the GreenSock forums.

 

Thanks for the demo.

 

The stagger methods offer the convenience of creating tweens with the exact same properties on multiple elements with uniformly staggered start times.

If you want unique durations or properties its best to create a loop and generate unique tweens for each element (as you are doing)

[tyelrx]

thanks Carl. Is there at least a way to calculate a value of a tweened object over time without waiting (pre-calculate)? Sorry i don't believe I'm explaining this correctly. But this way I can store it in an Array for later use. The end goal would be to use those values in a for loop, without having to wait for the first tween to actaully take (let's say) 5 secs. ( in reality - the total time would be the the number of tweens in an Array - staggered by 0.05 secs).

 

thanks

 

var obj = {time:0};

var EndingDuration = 1.55;

 

TweenMax.to(obj, totalTime, {time:EndingDuration, ease:Sine.easeOut, onUpdate:newTime, onComplete: animateIn});
        
        function newTime() {
            timeArray.push(obj.time);
        }

[Carl]

I think you might want something like this:

 

 

console.clear();
var obj = {time:0};
var endTime = 100;
var duration = 1; 


var frames = 60 * duration;
var values = [];
var tween = TweenMax.to(obj, duration, {time:endTime, ease:Linear.easeNone});

//use a loop to instantly grab values using seek() at intervals based on 60 frames per second
for (var i = 0; i <= frames; i++){
  tween.seek(i/frames)
  console.log(i + " : " + obj.time)
  values.push(obj.time)
  
}


//a big array of all the values of obj.time generated at 60fps that is generated instantly without the tween actually playing
console.log(values)

 

 

 

http://codepen.io/GreenSock/pen/bdVGyG?editors=101

[tyelrx]

Rockstar, didn't know about .seek

 

thanks