Jump to content
Search Community

I am trying to create a Full Page Infinite autoplay with thumbnails and thumbnails animation using GSAP

whizzbbig test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

I am trying to create a Full Page Infinite autoplay with thumbnails and thumbnails animation using GSAP, but since i am not that handy with gsap it looks like kind of hard a little help on fixing the things that are breaking will be very helpful and thankful.

 

this is the referenced site: https://www.twopointo.film/

according to which i am trying to build this example
have a nice day!

See the Pen GRGrWjo by raj-shukla (@raj-shukla) on CodePen

Link to comment
Share on other sites

  • Solution

Sliders are really hard and need a lot of setup to get right. I've build my self a starter template which I use often to then customize for what I need a that moment. It's by no means perfect, but the logic is there. I have no idea how it would work with video, but I think it could maybe nudge you in the right direction. Everything has comments to better illustrate what is going on. 

 

Hope it helps and happy tweening! 

 

See the Pen GREebPK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
Link to comment
Share on other sites

33 minutes ago, mvaneijgen said:

Sliders are really hard and need a lot of setup to get right. I've build my self a starter template which I use often to then customize for what I need a that moment. It's by no means perfect, but the logic is there. I have no idea how it would work with video, but I think it could maybe nudge you in the right direction. Everything has comments to better illustrate what is going on. 

 

Hope it helps and happy tweening! 

 

 

 

Thanks this would be it now i can able to implement the slider if there is something related to logic i will ask here 

  • Like 1
Link to comment
Share on other sites

So I Tried and able to made it to the position where the video is working with the thumbnails all thanks to @mvaneijgen you for providing this pen

the only thing i am facing right now is that the video get freeze and right now i'll try to make it slide to another video slide based on the video duration 

 

See the Pen rNKjKzN?editors=1000 by raj-shukla (@raj-shukla) on CodePen

Link to comment
Share on other sites

51 minutes ago, whizzbbig said:

So I Tried and able to made it to the position where the video is working with the thumbnails all thanks to @mvaneijgen you for providing this pen

the only thing i am facing right now is that the video get freeze and right now i'll try to make it slide to another video slide based on the video duration 

 

 

 

 

The only problem i am having is that video is freezing after the 1st video maybe it is because they also played at the same time 

goals to achieve here :

- slide video has to play when they are in screen

- and how we can able to make them play from the start if we move from one slide to other slide by using dots or thumbnails

Link to comment
Share on other sites

1 hour ago, whizzbbig said:

 

The only problem i am having is that video is freezing after the 1st video maybe it is because they also played at the same time 

goals to achieve here :

- slide video has to play when they are in screen

- and how we can able to make them play from the start if we move from one slide to other slide by using dots or thumbnails

@GreenSock any idea what i can do here to resolve this problem?

Link to comment
Share on other sites

Sorry, @whizzbbig - I don't understand your question. Your last minimal demo just has a bunch of slides immediately moving to the next one over and over and over really fast. And then you're asking about video freezing. Can you provide a very clear minimal demo that's only focused on one particular problem at a time please? These forums aren't really intended for free custom consulting and troubleshooting logic stuff, but we're happy to answer any GSAP-specific questions. 

Link to comment
Share on other sites

Sorry, @GreenSock if I failed to explain clearly what I am trying to achieve here but isn't those slides are moving to next slide based on the video duration because I know that I already resolved that issue. It all depends on that timer variable if the value small it will move faster the only thing which I need to fix is freezing of the video and make them start from the 0 when they are in window that's all I am trying to achieve here :)

Link to comment
Share on other sites

49 minutes ago, whizzbbig said:

Sorry, @GreenSock if I failed to explain clearly what I am trying to achieve here but isn't those slides are moving to next slide based on the video duration because I know that I already resolved that issue. It all depends on that timer variable if the value small it will move faster the only thing which I need to fix is freezing of the video and make them start from the 0 when they are in window that's all I am trying to achieve here :)

If you'd like some help with anything GSAP-related, please make sure you provide a CodePen that only shows the very specific issue you're struggling with, not 150 lines of code and lots of slides with various videos. Keep things very focused and clear. Please read the forum guidelines

Link to comment
Share on other sites

@whizzbbig you'll need to find a way to update the autoplay timer for each new slide, I would start by getting the video duration in milliseconds, right now you're getting the duration and multiplying it by 1000, but for some reason this number is NaN eg it is not a number. You will need to pass this number to the function animationDone(), because there it sets the new time out each new slide. 

 

Right now your demo is not debuggable, because the slide animation is not really inviting to look at. But indeed as @GreenSock suggested, make it small again. Focus on one part of your issue and try creating a new pen with none of the other code and try your hand at some stuff, when you figure it out you'll only have to find a way to implement it again, but this way you can rapidly test some ideas and have a demo to show when you get stuck

 

For the thumbnails, you place a number in it, just change that for the HTML you want. Right now I've place random images in there instead of numbers, but this can be what ever you want. 

 

See the Pen qBKrvJx?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

 

The demo I've shared is the result over half a years work when I started out learning GSAP, in that time I made several version that just didn't work, but I kept at it, trying other things, reading documentation, this forum. Until I found something I was happy with. Sadly I don't have the time to modify this pen to suite your needs, but I know if you start out simple and try a few things (that probably don't work), you'll find a solution that does work! If you need help with anything particular in GSAP, make it small again or there is always "Jobs & Freelance" forum for paid consulting.

 

Hope it helps and happy tweening! 

  • Like 1
Link to comment
Share on other sites

On 11/11/2022 at 1:32 PM, mvaneijgen said:

@whizzbbig you'll need to find a way to update the autoplay timer for each new slide, I would start by getting the video duration in milliseconds, right now you're getting the duration and multiplying it by 1000, but for some reason this number is NaN eg it is not a number. You will need to pass this number to the function animationDone(), because there it sets the new time out each new slide. 

 

Right now your demo is not debuggable, because the slide animation is not really inviting to look at. But indeed as @GreenSock suggested, make it small again. Focus on one part of your issue and try creating a new pen with none of the other code and try your hand at some stuff, when you figure it out you'll only have to find a way to implement it again, but this way you can rapidly test some ideas and have a demo to show when you get stuck

 

For the thumbnails, you place a number in it, just change that for the HTML you want. Right now I've place random images in there instead of numbers, but this can be what ever you want. 

 

 

 

 

The demo I've shared is the result over half a years work when I started out learning GSAP, in that time I made several version that just didn't work, but I kept at it, trying other things, reading documentation, this forum. Until I found something I was happy with. Sadly I don't have the time to modify this pen to suite your needs, but I know if you start out simple and try a few things (that probably don't work), you'll find a solution that does work! If you need help with anything particular in GSAP, make it small again or there is always "Jobs & Freelance" forum for paid consulting.

 

Hope it helps and happy tweening! 

 

Yay today i able to fixed the problem that i was having with the videos and able to achieve the goals that i set for this project thanks to you that helped with the resource and also idk why it isn't dragging tho like there is no error in the console it isn't reproducible nor i developed in codepen seems like this part of the code isn't working
 

  // --------------------------------//
  // ☝️ Touch
  // --------------------------------//
  if (window.Draggable) {
    Draggable.create(items, {
      type: 'x', // Drag only on the X axis
      zIndexBoost: false,
      onDragStart: function () {
        window.clearTimeout(autoplay) // disable autoplay
        slideLogic(this.getDirection() === 'right')
      }
    })
  }
  // END ☝️ Touch  --------------//

what would be the case 🤔

Link to comment
Share on other sites

Are you saying that conditional block doesn't run (as if window.Draggable doesn't exist)? Are you using a build system where you do an import at the top of your file? That'd certainly explain it because when you use ES Modules, the class isn't added to the window object. Another explanation could be that you're trying to reference Draggable before it even loaded. Very difficult to troubleshoot blind, but those are two guesses. 

Link to comment
Share on other sites

17 hours ago, GreenSock said:

Are you saying that conditional block doesn't run (as if window.Draggable doesn't exist)? Are you using a build system where you do an import at the top of your file? That'd certainly explain it because when you use ES Modules, the class isn't added to the window object. Another explanation could be that you're trying to reference Draggable before it even loaded. Very difficult to troubleshoot blind, but those are two guesses. 

import gsap from 'gsap'

import Draggable from 'gsap/Draggable'

yeah i am importing them above and also tried logging it to the console but not sure what makes it behaves like that

 

 

EDIT: yoo idk how but by removing the import and adding that line back fix the bug 😂

Edited by whizzbbig
Link to comment
Share on other sites

On 11/11/2022 at 1:32 PM, mvaneijgen said:

@whizzbbig you'll need to find a way to update the autoplay timer for each new slide, I would start by getting the video duration in milliseconds, right now you're getting the duration and multiplying it by 1000, but for some reason this number is NaN eg it is not a number. You will need to pass this number to the function animationDone(), because there it sets the new time out each new slide. 

 

Right now your demo is not debuggable, because the slide animation is not really inviting to look at. But indeed as @GreenSock suggested, make it small again. Focus on one part of your issue and try creating a new pen with none of the other code and try your hand at some stuff, when you figure it out you'll only have to find a way to implement it again, but this way you can rapidly test some ideas and have a demo to show when you get stuck

 

For the thumbnails, you place a number in it, just change that for the HTML you want. Right now I've place random images in there instead of numbers, but this can be what ever you want. 

 

 

 

 

The demo I've shared is the result over half a years work when I started out learning GSAP, in that time I made several version that just didn't work, but I kept at it, trying other things, reading documentation, this forum. Until I found something I was happy with. Sadly I don't have the time to modify this pen to suite your needs, but I know if you start out simple and try a few things (that probably don't work), you'll find a solution that does work! If you need help with anything particular in GSAP, make it small again or there is always "Jobs & Freelance" forum for paid consulting.

 

Hope it helps and happy tweening! 

How could i make them slide when the video is ended is there any possible way to update the value of `timer` i could think of the way where we can add `onended` prop in video element and when it ends that triggers the function to slide but idk which one i query

 

 

Link to comment
Share on other sites

On 11/14/2022 at 1:07 PM, mvaneijgen said:

In the function animationDone() the autoplay variable gets updated autoplay = window.setTimeout(slideLogic, videoDuration);  Here you need to figure out and set the video duration for the next slide. 

Thanks for that also i found a sort of bug do you know how we can resolve this
 

like it is also in the codepen you provided too

See the Pen GREebPK by mvaneijgen (@mvaneijgen) on CodePen

 

when we goto the last slide and move to slide 4 and then move to rest of the slides in sequence you'll see that it stuck on slide 4 only it not slide to slide to 3, 2 or 1 we go in sequence

Error Video

Link to comment
Share on other sites

55 minutes ago, whizzbbig said:

Thanks for that also i found a sort of bug do you know how we can resolve this
 

like it is also in the codepen you provided too

 

 

when we goto the last slide and move to slide 4 and then move to rest of the slides in sequence you'll see that it stuck on slide 4 only it not slide to slide to 3, 2 or 1 we go in sequence

Error Video

Yeahh even i also have no idea what make it behaves like that but i am trying to find the solution of it 

can you help us @GreenSock with that?

Link to comment
Share on other sites

2 hours ago, mvaneijgen said:

I see, I've no idea what could cause that and I don't have time to debug this at the moment. If you find anything I would love to know. 

okay so after asking on communities and with lot of trial and error
it works with `itemsMax = items.length` idk why you subtracted one from it

Link to comment
Share on other sites

2 hours ago, whizzbbig said:

okay so after asking on communities and with lot of trial and error
it works with `itemsMax = items.length` idk why you subtracted one from it

@mvaneijgen this seems to fix our problem if we do those steps but it not make the cycle loops i mean we seem to see the solution here but we just need to know like which conditions applies to the thumbnails and adding this step specifically for the previous might resolve the problem i guess what you think?

Link to comment
Share on other sites

@whizzbbig unfortunately we don't really have the resources to provide free general logic troubleshooting or custom solutions, but we're happy to answer any GSAP-specific questions here (please read the forum guidelines). If you still have a GSAP-related question, just make sure you provide a very clear minimal demo with only the essential pieces to show the specific problem you're struggling with.

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