Jump to content
GreenSock

tyelrx

Ease duration in .staggerFrom

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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)

  • Like 1
Link to comment
Share on other sites

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);
        }

Link to comment
Share on other sites

  • Solution

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

  • Like 2
Link to comment
Share on other sites

Rockstar, didn't know about .seek

 

thanks

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×