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