Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bilalm

Create video scrubber after current finished, with button click

Recommended Posts

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

@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?

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • 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.
×