Can I know the total play time of the each tween before running?

[sukjae]

Can I know the total play time of the each tween in timeline before running?

I know the calculation formula, but is there a way to internally have the result calculated before execution?

 

Thank you!

See the Pen VwdvgWZ by leesukjae (@leesukjae) on CodePen

[sukjae]

i can get total play time from 
 

timeline.time()

want to know play time of each tween 🙏

 

The reason this calculation is necessary is to fix the duration of each tween to the longest length of the tween.

ex

 

const ps = document.querySelectorAll('p');
const maxTime = Math.max(...ps.map(p => gsap.someUtils.getPlayTime(p));
// or perhaps 
// const maxTime = Math.max(...ps.map(p => gsap.someUtils.getPlayTime(gsap.effects['flip'](p)));
ps.forEach((p)=>{
	timeline.add(gsap.effects['flip'](p.children,{
	druation: maxTime,
	}),'<0.3')
})

 

[mvaneijgen]

Would that be tween.duration()? https://greensock.com/docs/v3/GSAP/Tween/duration() If you give it a value it will set the duration of that tween to that value. 

 

It would really help if you explain the bigger picture of your issue, because it seems rather complicated what you are trying to do and I can't help but feel there is probably a smarter way going about things.

 

See the Pen dyKYrmW?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[sukjae]

Thanks for your interest in this matter.

 

You might be able to think of an example like the one below.

Let stagger x (length-1) + duration be interval.

I want to make each sentence play at the same interval and advance to the next screen.

 

As shown in the example, longer play time is required because the sentence in b is longer than that of a or c.

We want to set the largest interval equal to each tween.

 

In the example below, the time used for in motion is each: 1.6s, 3.1s, 1.6s

If user given 4s as interval, each interval of sentence should be 4s, 4s, 4s

If use given 2s as interval, i would like to programatically calculate and set 3.1s as interval(To ensure the motion of the longest element): 3.1s, 3.1s, 3.1s

 

Thank you.

 

+ cannot use stagger.amount. Each motion of char should be equal experience 🙏

See the Pen WNyQBxR by leesukjae (@leesukjae) on CodePen

[mvaneijgen]

Something like this? There probably is a better way of setting it up, but I personally like to create working code before optimizing it. I have to say that this probably isn't a GSAP question and more a Javascript logic question.

 

All I did was get the longest tween and calculate the position parameter based on its duration, this makes every tween take up 33% of the duration of the whole tween. 

 

See the Pen MWXaMmR?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

 

[GreenSock]

If I understand you correctly, you can determine that ahead of time and then just use that value for the position parameter like this: 

See the Pen xxzZGNv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

const max = Math.max(...ps.map(el => el.children.length - 1)) * stagger + eachDuration;