use frames as duration instead of seconds

[thetobiterra]

Hello, i wanna know if it's possible to use the amount of image frames as a duration value with gsap. Say, i have an image sequence, 200 frames and i am animating those frames on scroll, i have another timeline with texts popping up at specific frames. Is there a way to make those texts animation frame specific instead of seconds

[Trapti]

Hi, 

 

If you can provide a demo, it will be better.  

 

If the image sequence is animating, then calculate the total duration of that timeline and use that as value. "tl.duration();" 

 

[thetobiterra]

3 hours ago, Trapti said:

Hi, 

 

If you can provide a demo, it will be better.  

 

If the image sequence is animating, then calculate the total duration of that timeline and use that as value. "tl.duration();" 

 

It's the typical apple kinda website. I'm saying since frames are being animated on scrub, there can't be a duration, right? if there isnt a duration, then how is it possible to display a particular text at a specific frame?

[Trapti]

Yes, it will still have duration. I have added a console for this example to get the duration. This is using scrub. 

 

See the Pen WNLqdEV?editors=0011 by tripti1410 (@tripti1410) on CodePen

[thetobiterra]

4 hours ago, Trapti said:

Yes, it will still have duration. I have added a console for this example to get the duration. This is using scrub. 

 

 

No, an image sequence plays in frames. Basically, we are animating from frame 0 to frame 200 on scrub. It is not second based. Is there a way to convert frames to seconds and then use absolute positioning to fix text fade in and out animation at specific frames? basically, i need the frame animation as a time reference for the texts fade in and out animation. It's basically the apple website concept. thanks

[Trapti]

Sorry I won't be able to help without a demo. 

 

Hopefully, someone else can help.

[Rodrigo]

Hi,

 

Are you trying to do something like this?

 

See the Pen ZEaZyZr by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!