Jump to content
Search Community

Animation timing during video blob

superbenj test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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)

 

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
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.
×
×
  • Create New...