is there a way to create a scrollfunction for specific timestamps in a video? "Scrollmagic.js"

[sikke]

I have this scroll effect where its playing through the video on scroll. But is there a way to make it so when I scroll it scrolls down to specific time parts, and then stop on each? to create a "slideshow feel". right now I'm using scrollmagic to achieve what I have (still very new to all of this so sorry if its easier than I think, ive tried to ask on stackoverflow and even use chatgpt for it. but didnt work at all)

The code for how it works now:
 

   <div className="intro bg-black">
        <h1 className="uppercase text-center text-white text-5xl">We Present Our New App<span className="text-rose-300">.</span></h1>
        <div className="bounce">
        <i className="fa-solid fa-circle-arrow-down scrollDown text-rose-300 text-5xl"></i>
        </div>
        <video className="appVideo" muted={true} preload="auto" src={video}></video>
    </div>

 

           const intro = document.querySelector('.intro');
           const introVideo = document.querySelector('.appVideo');


           // Scrollmagic controller
           const controller = new ScrollMagic.Controller();
           
           let scene =  new ScrollMagic.Scene({
       
               duration: 53000, // length of video in ms
               triggerElement: intro,
               triggerHook: 0
           })
           .setPin(intro)
           .addTo(controller);


           // Video Animation
           let accelamount = 0.1;
           let scrollpos = 0;
           let delay = 0;
       
       
           scene.on('update', e =>{
               scrollpos = e.scrollPos / 1000;  
           });
           
           // Makes the video not stop imideatly when you stop scrolling for smoother experience.
           setInterval(() => {
               delay += (scrollpos - delay) * accelamount;
               introVideo.currentTime = delay; 
           }, 33.33);

 

[mvaneijgen]

Hi @sikke welcome to the forum!

 

ScrollMagic, that is something I've not used in a while. I don't know much about that library, but if you're looking for scroll based animation with GSAP you're much better of using ScrollTrigger! Check it out here 

 

 

It seems like you're also using React, so be sure to read through this guide for the best practices 

 

 

I hope these resources help, but if now just post back here with a minimal demo, so we can dive in your code directly and point you in the right direction! 

[sikke]

See the Pen YzdvXLw by Mattias-Sikmar (@Mattias-Sikmar) on CodePen

 

i've created this simplified version of it here.  but my plan is to use timestamps for the scroll instead. I have this array planned for it. but I don't know how to change my code to implement it. I want the effect to be. 1 scroll goes 0s to 9s. then stops. then when I scroll after that it plays 9s to 14s. and so on

 

    const timeParts = [
      // array for planned timestamps.
      { start: 0, end: 9000 }, // 0s to 9s
      { start: 9000, end: 14000 }, // 9s to 14s
      { start: 14000, end: 22000 }, // 14s to 22s
      { start: 22000, end: 35000 }, // 22s to 35s
      { start: 35000, end: 42000 }, // 35s to 42s
      { start: 42000, end: 53000 }, // 42s to 53s
    ];

 

[mvaneijgen]

This still uses ScrollMagic, if you're set on using it you have to ask support from the ScrollMagic team. We like to keep this forum focused on GSAP tools. 

 

In my option ScrollTrigger is much easier, but anyone can use the tools they like.

 

 

 

[sikke]

but isnt scrollmagic attached to gsap ? cause I have to have gsap to use it

[sikke]

and I have no clue to change my code to work with scrolltrigger...

[sikke]

Im gonna try to change my existing code to scrolltrigger..

[mvaneijgen]

14 minutes ago, sikke said:

but isnt scrollmagic attached to gsap ?

Yes someone has build a tool for GSAP to attach it to scroll. That doesn't mean GSAP provides support for that third party tool. 

 

Quote

cause I have to have gsap to use it

That isn't true, ScrollMagic is its own tool and it has a plugin for GSAP, but you don't have to use it. 

 

20 minutes ago, sikke said:

and I have no clue to change my code to work with scrolltrigger...  can you help me receive the same effect but with scrolltrigger? 

Me neither your pen is completely blank and nothing seem to load, I'm also not clear on what it is you're trying to do. Maybe the pen from the bellow topic is something you can use as your starting point

 

 

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

[sikke]

my pen is blank cause im trying to get it to work with scrolltrigger... 

See the Pen YzdvXLw by sikke (@sikke) on CodePen

[sikke]

but it doesnt scroll trough the entire video like the scrollmagic did. and what im trying to achive is this "imagine a slideshow" u scroll 1 time then it plays through the video 0 - 9 seconds. then it pauses the video. then when I scroll again it goes through 9 to 14 seconds. stops. repeat untill the end of the video. 

 

right now what I had on the scrollmagic was the effect of it just playing through the video on scroll unitll it ended.

[mvaneijgen]

Sorry, but if you're not checking the links I provide it will be really hard to help you. 

 

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

[sikke]

2 minutes ago, mvaneijgen said:

Sorry, but if you're not checking the links I provide it will be really hard to help you. 

 

 

 

actually I did check it. but its not doing what I asked at all..

[sikke]

and if you check my codepen now I allready achived that effect u did. it just doesnt loop through my full video..

[sikke]

 

    const timeParts = [
      // array for planned timestamps.
      { start: 0, end: 9000 }, // 0s to 9s
      { start: 9000, end: 14000 }, // 9s to 14s
      { start: 14000, end: 22000 }, // 14s to 22s
      { start: 22000, end: 35000 }, // 22s to 35s
      { start: 35000, end: 42000 }, // 35s to 42s
      { start: 42000, end: 53000 }, // 42s to 53s
    ];

 

[sikke]

See the Pen YzdvXLw by sikke (@sikke) on CodePen

 

(I changed to the video u used instead for the example)

Now the codepen is fully scrolltrigger and works as the scrollmagic did. Sorry it didnt feel like I looked at the links but please listen to my question. cause it feels like u ignored it and only cared about it being scrolltrigger. I have this effect where I scroll it scrolls through the video. But I don't want it to work like that fully.

 

 

 

    const timeParts = [
      // array for planned timestamps.
      { start: 0, end: 9000 }, // 0s to 9s
      { start: 9000, end: 14000 }, // 9s to 14s
      { start: 14000, end: 22000 }, // 14s to 22s
      { start: 22000, end: 35000 }, // 22s to 35s
      { start: 35000, end: 42000 }, // 35s to 42s
      { start: 42000, end: 53000 }, // 42s to 53s
    ];

I want it to use the array above. and have timestamps. When I scroll it should play the video until the desired stop. and scroll shouldn't work again until it reached between each timeParts item. so when it reaches 9 seconds for example. it should enable scroll to work again. and when i scroll down after that it should play the next part until 14 seconds. 

[mvaneijgen]

It is not that we don't want to help you, but we can't provide general consulting on these free forums we like to scope the questions to only include GSAP tools. Your pen is completely empty for me and doesn't do anything, you also keep modifying the same pen, so it is really hard to notice that you did anything new.  

 

The pen I've shared uses almost the syntax you want to use, eg it tweens to a time in the video and then that particular user wanted to do nothing for x amount of seconds, then it tweens to the next time stamp in the video and again nothing for x amount of seconds. That is how ScrollTrigger works, you build an animation (a timeline) and then you hook that animation to the scrollbar, so that the user is in control of that animation while scrolling. 

 

If that is not what you want then ScrollTrigger is not the tool you want to use. Now we know that, it sound like you want to use the Observer plugin, that tool can listen for scroll events and then do some logic. https://greensock.com/docs/v3/Plugins/Observer 

 

See the pen below, you can scroll as much as you like, but it will only go to the next slide if the previous animation has completed. 

 

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

 

 

[sikke]

4 minutes ago, mvaneijgen said:

It is not that we don't want to help you, but we can't provide general consulting on these free forums we like to scope the questions to only include GSAP tools. Your pen is completely empty for me and doesn't do anything, you also keep modifying the same pen, so it is really hard to notice that you did anything new.  

 

The pen I've shared uses almost the syntax you want to use, eg it tweens to a time in the video and then that particular user wanted to do nothing for x amount of seconds, then it tweens to the next time stamp in the video and again nothing for x amount of seconds. That is how ScrollTrigger works, you build an animation (a timeline) and then you hook that animation to the scrollbar, so that the user is in control of that animation while scrolling. 

 

If that is not what you want then ScrollTrigger is not the tool you want to use. Now we know that, it sound like you want to use the Observer plugin, that tool can listen for scroll events and then do some logic. https://greensock.com/docs/v3/Plugins/Observer 

 

See the pen below, you can scroll as much as you like, but it will only go to the next slide if the previous animation has completed. 

 

 

 

 

 

is there a way to do this but with a video and without the transition effect  in observer then?  

[sikke]

and for me my pen is not blank ? thats weird, maybe I shared it wrong? 

[sikke]

as u can se here it shows up for me 

[GreenSock]

Hi @sikke. If I understand your goal correctly, yes, it should be entirely possible to do but we just don't have the resources to walk through this whole thing and show you how to build it for free. We really try to keep these forums focused on GSAP-specific questions (see the forum guidelines), like about the API. 

 

This thread might be helpful: 

 

As a courtesy, I took a quick crack at something: 

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

 

The video you're using is only a little over 4 seconds long, so your timestamps won't work. I created stopping points at 0, 1, 2, 3, and 4 seconds but obviously you'd populate the times Array with whatever stopping points you want with your video. 

 

I hope that gets you going in the right direction. If you need more custom consulting, we do offer paid consulting services so you're welcome to reach out to us or post in the "Jobs & Freelance" forum. 

[sikke]

10 hours ago, GreenSock said:

Hi @sikke. If I understand your goal correctly, yes, it should be entirely possible to do but we just don't have the resources to walk through this whole thing and show you how to build it for free. We really try to keep these forums focused on GSAP-specific questions (see the forum guidelines), like about the API. 

 

This thread might be helpful: 

 

As a courtesy, I took a quick crack at something: 

 

 

 

The video you're using is only a little over 4 seconds long, so your timestamps won't work. I created stopping points at 0, 1, 2, 3, and 4 seconds but obviously you'd populate the times Array with whatever stopping points you want with your video. 

 

I hope that gets you going in the right direction. If you need more custom consulting, we do offer paid consulting services so you're welcome to reach out to us or post in the "Jobs & Freelance" forum. 

 

Thanks ! this works, just gotta figure out how to make it play the video smoother, right now its very speedy. but thanks for the help !

 

[GreenSock]

It was using a 1-second duration for that tween, but I just updated the demo so that it varies based on how much time there is between the current playhead position and the destination: 

See the Pen VwqdyzG?editors=1010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps!