Create video scrubber after current finished, with button click

[bilalm]

Hello. I'm trying to link videos in json to each other. But i can not create video scrubber for appended elements.

 

This is my scenario:

1. Load first video.

2. Load second video + create video scrubber.

3. Load third video after 2. scrubbing end.

4. Load fourth video + create video scrubber with on click. (Here is what i can't do it).

 

I am playing here: https://stackblitz.com/edit/js-uasbtv?file=index.js

 

Click 'Up' button to create new video scrubber.

[Cassie]

Hi there!

 

We try to keep these forums focused on GSAP related questions and this is really more down to custom JS logic.

In your case this event handler isn't firing - I imagine this is because all the videos are already in the DOM. You seem to be swopping out classes rather than actually loading the videos in, so that loaded event won't fire.

 

once(secondWalk, 'loadedmetadata', () => {
    console.log('loaded')
    gsap
      .timeline({
        defaults: { duration: 1 },
        scrollTrigger: {
          trigger: '.video-scroll',
          start: 'top -1',
          end: 'bottom bottom',
          scrub: true,
        },
      })
      .fromTo(
        secondWalk,
        {
          currentTime: 0,
        },
        {
          currentTime: secondWalk.duration || 1,
        }
      );
  });

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event

 

Hope this helps.

[bilalm]

@Cassie Hello. Thanks for info. Yes you're right. But basically it's a question about gsap. Now i append new video after on click event. So we can listen 'loadedmetadata' event right? Console.log works now. But still i can not create a new video scrubber. Can you look at this again?

[GreenSock]

Hi @bilalm. If you think it's a GSAP/ScrollTrigger issue, please provide a minimal demo that's much more isolated and clearly shows that it's a GSAP/ScrollTrigger issue. Currently you've got 157 lines of code and lots of other logic going on in there that you're asking us to troubleshoot for you and unfortunately we just don't have the resources to do that in these free forums. I see no evidence of any GSAP-related issues or questions here - this looks like more general JS and event logic. 

[bilalm]

On 1/13/2022 at 1:07 AM, GreenSock said:

Hi @bilalm. If you think it's a GSAP/ScrollTrigger issue, please provide a minimal demo that's much more isolated and clearly shows that it's a GSAP/ScrollTrigger issue. Currently you've got 157 lines of code and lots of other logic going on in there that you're asking us to troubleshoot for you and unfortunately we just don't have the resources to do that in these free forums. I see no evidence of any GSAP-related issues or questions here - this looks like more general JS and event logic. 

Hello. Thanks you're right. I just want to create new video scrubber with "Up Button" click. I write new fork. I know it is not GSAP issue. I just want some help. https://stackblitz.com/edit/js-44eyms?file=index.js

[OSUblake]

As Jack said, this is more of logic issue, and we don't have the resources to fix everyone's code for free (please read the forum guidelines) but you're welcome to post in the Jobs & Freelance forum to see if you can hire someone to help you.