Animation timing during video blob

[superbenj 1 Likes (Newbie)]

Hello

 

I'm trying to create an animation based on the duration of a video that is played frame by frame.

 

Actually, the first text panel disappears when the video start and the last text panel doesn't show..

 

Any advice on changing the first text panel after 1/3 of the duration of the video, then showing the second panel for another 1/3 and finally the last text panel for the last 1/3 and continuing the scrolling?

 

Thank you very much for your time

See the Pen ExovmRZ by superbenj (@superbenj) on CodePen

[OSUblake 18,473 Likes (Superhero)]

Welcome to the forums @superbenj

 

You can use the position parameter to do all that. So if you set the duration of your video to 1, then you can set something to trigger at 1/3 seconds and the other at 2/3 seconds. When you're scrubbing something, it's no different than using GSDevTools.

 

tl.fromTo(video, { currentTime: 0 }, {
      currentTime: video.duration || 1,
  duration: 1,
  ease: "none"
    })

tl.to(".foo", {...}, 1/3)
tl.to(".bar", {...}, 2/3)

 

[superbenj 1 Likes (Newbie)]

Another question.

If I want to create a smooth animation for the content to disappear/appear, can I use a keyframe?

In my pen, the first animation look's like it waits until the end of the video before starting it?

 

 

once(video, "loadedmetadata", () => {
 tl.fromTo(video, { currentTime: 0 }, {
      currentTime: video.duration || 1,
  duration: 1,
  ease: "none"
    })

tl.to(".panel-1", {
 keyframes: [
  {yPercent:0},
  {yPercent:10, onComplete: () => { console.log('complete')}},
  {yPercent:-100, ease: 'sine.out'}
 ]
},1/4);
  tl.to(".panel-2", {
 opacity:1,
},"<1.5");
  
  tl.to(".panel-2", {
 keyframes: [
  {yPercent:0},
  {yPercent:10, onComplete: () => { console.log('complete')}},
  {yPercent:-100, ease: 'sine.out'}
 ]
},2/4);

[OSUblake 18,473 Likes (Superhero)]

It looks correct. Do you think you can make a minimal demo showing the issue?

 

[superbenj 1 Likes (Newbie)]

Oh the pen was updated

 

See the Pen ExovmRZ by superbenj (@superbenj) on CodePen

[OSUblake 18,473 Likes (Superhero)]

I added in a simpler function for loading the video, but you're going to need rework the position parameters. I did those fractions assuming that timeline duration would only be 1 second long. So of course 1/4 (0.25) would make sense that it's going to start 25% of the way through a 1 second timeline. However, your timeline is longer than that, so you're going to need to make some adjustments. 

 

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

[superbenj 1 Likes (Newbie)]

Ok it's in second, I assumed 1 was equal, to 100% and not 1 second.Anyway, I'm gonna work on it. Thanks again for your help