konstructive

Hi Zach, I'm trying to implement any sort of mouse wheel slides transitioning that works cross browser. And all current GSAP examples that I found do not work anymore cross browser and I don't seem to be able to fix it. I did think about adding some timeout, so the mouse wheel event won't trigger few times per one scroll. Or stop the scrolling inside each of if statement: if(delta > 0) { //scrolling down -> next slide // move to slide below } else if(delta < 0) { // -> prev // move to slide above } But I don't know how to implement it. Thanks, Olga

The Codepen is the example below is created by GSAP that I found in this thread: https://greensock.com/forums/topic/19393-fullscreen-sliders-horizontal-and-vertical/ - https://codepen.io/mikeK/pen/NWPJeyg The functionality in this codepen does not work in any versions of Safari. The reason is commented out line 78 //event.preventDefault(); When you comment this back in, it works in Safari, but Chrome throws error: [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL> The reason for that is that the following is not valid events anymore and the wheel event should be passes as not passive event: $(window).on("mousewheel DOMMouseScroll", onMouseWheel); So it should now be: document.addEventListener('wheel', onMouseWheel, {passive: false}); But then when this is changed, the code on line 52 is also deprecated: var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail; So as outcome of all of this the code should be something like: document.addEventListener('wheel', onMouseWheel, {passive: false}); // Slides change on mouse scroll function onMouseWheel(event) { let delta = event.deltaY; if(delta > 0) { //scrolling down -> next slide // move to slide below } else if(delta < 0) { // -> prev // move to slide above } event.preventDefault(); } But the issue with this that 'wheel' event is triggered multiple types and the timeline gets scrolled through few items at a time. See full solution here: https://codepen.io/olgabrushuk/pen/oNxYyeO Are there any solutions for scrolling through gsap timeline slides that is up to date with the current browsers specs? Thanks, Olga

Hi Zach, Thank you for getting back to me so fast again. I wasn't able to add counters as I have quite a lot of oughted functionality and videos are inside loops already with quite a few variations on where they appear in the timeline, so code started getting quite unmanageable and difficult to read. But the latter option with the empty .to({}) hack in between .addPause() and the next .call() has worked. Thanks, Olga

Hi Zach, Thank you for your reply. Sorry, but I don't understand how to put the counter into the timeline as the videos setup and play are called from different places in the timeline and how to use this count of 'ended' in the call() function. I'll see what I can do though. But I have a question on why my code in the codepen example above won't work? In theory, the following should work: .call(playVideo, [videoAsset1, 'play first time']) .addPause() .call(playVideo, [videoAsset1, 'play second time']) .addPause() The video playback is called and the timeline is paused, on video ended timeline resumes and comes to second .call(), the timeline is being paused and so on X amount of times. From the documentation for .call and .addPause it seems that they are added in the correct places and sequence in the timeline. Thanks, Olga

Hi there, I managed to fix the videos play functionality in IE11 by fixing some embed code for Cloudflare for when more than one video is included, the changes can be seen on the codepen below. In essence the <script> tag should be included only once and the ?video=xxx should be removed from the first and only <script> tag. Unfortunately, the functionality I need to achieve at my real case project is way more complicated than the example in codepen here. As another bit of the functionality that I need to add is to be able to loop either of the videos X amount of times. In the codepen below I amended JS to include .call() and .addPause() twice for the first video (and as the idea the video needs to play twice before it moves to the next element in the timeline), but the functionality I'm getting is not as I would expect. So the first video still plays only once, but the playVideo() function is called twice straight away without waiting for the first pause. I added some logs to each .call() and what happens can be seen in the Console. Any ideas how to make the video play X amount of times in the timeline? https://codepen.io/olgabrushuk/pen/LYGdzXO Many thanks, Olga

Hi Zach, Great, thank you. Was able to use that in IE11 now. I don't think it's a GSAP issue, thank you for your advice, I will see what Cloudflare suggests. Thanks, Olga

Hi Zach, Sorry to get back to this. But this unfortunately doesn't work in IE11 (Windows 10). I'm not sure how to give an example of it as codepen doesn't work in IE11 itself. The issue is that in the latest working codepen example that you provided the console.log('video ' + video + ' played'); gets called twice for each video in the timeline and then console.log('video ' + video + ' ended'); gets called twice again, and so technically speaking video.on('loadeddata', function() { gets called twice. As a result of this the video freezes on the first frame and doesn't play, although the rest of the time line seems to function correctly with the correct delays. Also, when there is only one video and not two, all functions as expected and video plays. I know that it can be the issues with the Cloudflare events, but it just seems that the structure of JS itself is wrong around the way the video is set up inside that 'loadeddata'. Will be helpful if you can spot any issues. Many thanks, Olga

Hi Zach, Many thanks! It works, and I managed to replicate it in my actual project with even more complicated functionality and iterations Thanks, Olga

Hi Zach, Many thanks for jumping on this. Sorry, I created a fork and reverted my changes in the initial example, so it's all in order now. To answer your question, yes, <stream> is something that came from Cloudflare. It makes more sense now in your example, I can see extra video functionality added. But the fade in of the image doesn't wait for the first video to finish playing before it fades in. If there is a way to pause the timeline to wait for the video to finish playing? Thanks, Olga

Hi there, Thank you for your quick response. I amended the order and the call function and it still doesn't seem to work: https://codepen.io/olgabrushuk/pen/WNrXKpX The timeline doesn't wait for the video t finish playing. And as well, I'm not sure what's the correct way to resume the timeline. Thanks, Olga

Hi guys, I'm having loads of troubles when trying to add video playback to the timeline. The video I'm using is hosted on cloudflare and I'm using some cloudflare API methods and events to play it and catch some events (https://developers.cloudflare.com/stream/video-playback/player-api/). The functionality I'm trying to achieve is: 1. Fade in video on timeline 2. Pause timeline 3. Have a callback to play a video 4. Resume the timeline 5. Fade in image 6. Fade in another video 7. Pause timeline 8. Play video 9. Resume the timeline In the codepen it's one of many variations I tried. I also tried using add('lable'), addPause() with different timing animations, but none of it works as desired. The main issue, when viewing in a console, both of the videos start playing at the same time and the timeline doesn't wait for the video to finish. The Cloudflare video JS API should work in a similar way as interacting with HTML5 video, the only thing that video somehow only would trigger play() only inside the .on('loadeddata', function() {...}). Thanks, Olga