sikke

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 !

as u can se here it shows up for me

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

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

https://codepen.io/sikke/pen/YzdvXLw (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.

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 ];

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

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

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.

my pen is blank cause im trying to get it to work with scrolltrigger... https://codepen.io/sikke/pen/YzdvXLw

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

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

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

https://codepen.io/Mattias-Sikmar/pen/YzdvXLw 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 ];

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);