This always skips 3 frame intervals?
kasalalpay opened this issue · comments
Great work on this! I'm having just one problem.
My temporal resolution looks off. When turning debug on, I can see it only draws every 3rd frame. I'm using h264 mp4 (made an avi in after effects, and made mp4's via ffmpeg (every frame a keyframe) and handbrake. Same thing. I played with transitionSpeed which does not seem to change anything (whether set to 30, 1, 0, and anything in-between).
I noticed that height of the div affects how the scroll-wheel resolution affects vertical position in the div.. makes sense. Whatever shot in the dark i take, I cannot seem to get every frame drawn nor transitionSpeed to be affective (this is plain vanilla html)
Any help on getting every frame to be drawn to canvas? This is otherwise a perfect solution for me!
Thanks.
Hi @kasalalpay,
Unfortunately, there are many factors at play when it comes to which frames ultimately get drawn.
- There is the height of the div, as you've discovered. The taller the div, the more likely more of the frames will get drawn.
- It will also depend on the granularity of the browser when it comes to scroll steps. For instance, Chrome has a fairly large scroll step which makes it more likely to skip frames. I have noticed this issue and was considering implementing some kind of smooth scroll flag to help with this issue, but I haven't had a chance to build that out.
- The length of your video will also impact this. The longer your video, the more likely it is that frames will get skipped based on the way that the scroll position is calculated.
I'd recommend you can try manipulating the height of the div or length of your video and see if you can improve this, or even cut up your video into multiple smaller videos and have them one after another. I wish I had a better answer for you, but until I have a chance to figure out a way to implement smoother scrolling, that's about what I can offer.
Thanks so much for the detailed response! So, after reading, maybe I am doing something wrong...
1- If I make the div insanely tall, it takes longer to progress frames but intervals of 3 are still getting skipped. It doesn't improve the temporal resolution, it just takes longer to jump past 3 frames.
2- I noticed something interesting, and maybe this is just a coincidence, or maybe it speak to an underlying playhead method. When I pop in the url direct to the mp4 file and hit play, i see every frame on playback... but when i use the cursor to advance the playhead, it 'seems' like it is jumping intervals of 3. I mention this to you because it may mean something?
3- Can you tell me what transition speed should be and why maybe it doesn't seem to have any affect for me? I rendered the video at 30fps. i tried "transitionSpeed: 30," without quotes, also tried 1, tried 0, tried 90... same behavior. Am I in error here?
Maybe worth mentioning, GSAP does paint every frame on screen, it's super smooth... but I gave up on using it because it's been a problem on mobile for me. dragging on a phone always tried to grab the whole element and jumps ahead in huge chunks. Maybe there's a fix in Z layering to grab drags but could not figure it out. Scrolly-video works absolutely great in this regard, from mouse wheel to trackpad, to mobile. I'll include a few links in case you want to see what I'm looking at. I'm using a fairly recent chrome on win11. Samsung s21+ ultra. The previous generation of iPhone (i forget what it's called, 14?), the max version. A cheap chromebook :) and Scrolly is awesome across all - aside from the skipped frames.
Links:
My prototype website with scrolly (ignore the design) - https://superfan.fan/index_scrolly.html
direct link to the mp4 video - https://superfan.fan/websitescroll_superfan-1.mp4
and a gsap experiment on a another site - https://highwater.world/index.html with a really long and heavy mp4
Transition speed only affects instances where method two is utilized. If you're testing on Chrome, you'll never see an effect by changing this value because Chrome always uses method one. Firefox uses method two and you should be able to see a difference in behavior.
Got it, thanks. I missed that detail :) I appreciate the info.