Hello!
Is it possible to control a MP4 video using the timeline from GSAP?
I need specific things to happen on specific set times (seconds) in the video. Like text flying in, text appearing from the bottom etc etc
At the moment im doing this with a mix of JavaScript and HTML5, setting the video.currentTime and using the scrollTrigger from gsap.
This is a part of what i have;
gsap.utils.toArray(".o-parallax__slide").forEach(section => {
gsap.from(section, {
scrollTrigger: {
trigger: section,
start: "top 50%",
end: "bottom bottom-=50%",
onEnter: ({progress, direction, isActive}) => enter(progress, direction, isActive, section),
onEnterBack: ({progress, direction, isActive}) => enterBack(progress, direction, isActive, section),
onLeave: ({progress, direction, isActive}) => leave(progress, direction, isActive, section),
onLeaveBack: ({progress, direction, isActive}) => leaveBack(progress, direction, isActive, section),
markers: {startColor: "yellow", endColor: "lightskyblue", fontSize: "24px", fontWeight: "bold", indent: 16},
},
});
});
gsap.utils.toArray("[data-has-fixed-title='1'] .o-parallax__content").forEach(title => {
gsap.fromTo(title,
{opacity: 0},
{opacity: 1, ease: 'none', duration: 0.5,
scrollTrigger: {
trigger: title,
start: "top 50%",
end: "bottom bottom-=50%",
// start: "top bottom-=15%",
// end: "bottom top+=15%",
markers: {startColor: "red", endColor: "red", fontSize: "24px", fontWeight: "bold", indent: 100},
toggleActions: "play reverse play reverse",
},
});
})
The top code goes over 18 sections (i defined 18 sections in a config file that puts out 18 sections with a class of parallax__slide)
it adds a trigger on all sections, on specific times (the times are given to datasets on the parallax slides)
the second piece of code is animating the title if the title has a dataset called has-fixed-title (this then proceeds to fade in the title).
I havent seen yet how i can do stuff on specific set times using gsap timeline.
I hope someone can help me with this, sorry if its unclear its a very specific topic ?
Kind regards,
Luc