Control MP4 video using timeline

[luckie12]

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

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Rodrigo]

Hi @luckie12 and welcome to the GreenSock forums!

 

This thread goes through synchronizing video and text animations using ScrollTrigger:

 

Hopefully is enough to get you started. If you have more questions remember to include a minimal demo please.

Happy Tweening!

[luckie12]

On 4/17/2023 at 5:13 PM, Rodrigo said:

Hi @luckie12 and welcome to the GreenSock forums!

 

This thread goes through synchronizing video and text animations using ScrollTrigger:

 

Hopefully is enough to get you started. If you have more questions remember to include a minimal demo please.

Happy Tweening!

Hey! 

 

Thanks, thats a great resource to look at!

 

i am looking a little bit on how to tell the 'texts' when to pop in etc

as i said, i have a config file, which sections that looks like this: 

 

        [
            'title' => 'High Performance <br> battery systems',
            'titleSize' => 1,
            'desc' => '',
            'column' => 'col 3 / span 8',
            'align' => 'center',
            'seconds' => 8.5,
            'scrollByPixel' => true,
        ],
        [
            'title' => 'Flexible design',
            'desc' => 'A specialized in-house scalable system designed to seamlessly align with an application\'s specifications',
            'column' => 'col 10 / span 3',
            'seconds' => 21.3,
        ],
        [
            'title' => 'Ideal for any orientation',
            'desc' => 'As a quick win we can add some text here instead of the sliders.',
            'column' => 'col 10 / span 3',
            'seconds' => 5.6,
            'scrollByPixel' => true,
        ],

theres many more in there but the most important line is 'seconds'.

These describe how long each section of a video is.  The first title should show at the first 8.5 seconds. The second title should show after 8.5 seconds for a period of 21.3 seconds (as thats a second section of the video).

 

I am still trying to get this part added to the timeline, because i think that is the solution. But being pretty new to GSAP is not making it any easier

 

Thanks!

[mvaneijgen]

Hi @luckie12 can you create a minimal demo of what you have right now? That makes it a lot easier to provide suggestions when we can see the whole picture. Even not working demo's are helpful, because we can see from your code what your thought process is and maybe provide a completely different. Thanks! Looking forward to your demo!

[Rodrigo]

Hi,

 

As @mvaneijgen states a minimal demo would help quite a bit in this case.

 

The only advice I can give you is that if you want to scrub the video with the scroll position, give the timeline a 1 or 10 seconds duration. Why? Because in this case you need the time when the texts appear, to be based on a percentage of the video, which is easier to do with a nice round value like 1 or 10. So if your video is 24 seconds and you need to show something at 7 seconds that is 7/24 = 29.2% of the video duration, so if the animation lasts just one second then the text should appear at 0.292 seconds. Keep in mind that when you scrub with ScrollTrigger what matters is the amount of pixels the ScrollTrigger instance has (given by it start and end points) and not the amount of seconds the animation lasts. Here you can see the concept behind this reasoning:

Hopefully this helps.

Happy Tweening!