Question: real time vs time in rendered video

[Shugar]

Hey!

I have a simple functions which runs when I open my index.html file. My animation takes about 20 seconds for full cycle and I'm trying to capture only first 2.

 $('.wall').css('animation', 'fade ' + 20 + 's infinite linear');
        $('.wrap').css('animation', 'move ' + 20 + 's infinite linear');
        $('.wall').css('animation-direction', 'reverse');
        $('.wrap').css('animation-direction', 'reverse');
        $('.glow').css('filter', 'blur(' + 1 + 'px)');
        $('.glow').css('opacity', 1 / 100);
        $('.wall').css('background', 'url("some/path/to/img.jpg")');

When I try to capture the animation I have using following command line code:

timesnap index.html --screenshot-type jpeg \
  -V "2000,2000" --fps=60 --duration=2 \
  --output-stdout | ffmpeg -framerate 60 -i pipe:0 -y -pix_fmt yuv420p video.mp4

It returns a video which is faster 5-10x times than the one I see when I just open index.html in Chrome.

Is there a way to let timecut to take only first 2 seconds of real animation I see in browser?
I'm sorry for noobie questions, haha.

[tungs]

Hi @Shugar, thanks for the interest in the project! It looks like your page is using CSS animations, which unfortunately isn't supported by timecut. Timecut only aims to record JavaScript animations and some videos.

From your settings, it should be producing a 2 second video, but since it's not slowing down CSS animations to sync with its frame capturing, they look sped up in the final video.

[Shugar]

Hi @Shugar, thanks for the interest in the project! It looks like your page is using CSS animations, which unfortunately isn't supported by timecut. Timecut only aims to record JavaScript animations and some videos.

From your settings, it should be producing a 2 second video, but since it's not slowing down CSS animations to sync with its frame capturing, they look sped up in the final video.

Oh, I see, thank you.

It's sad that I need to search for something else because your library was almost the one I needed! :)

[tungs]

I should also mention that it looks like you're using JQuery. If you switch over to JQuery animations (e.g. $('#someElement').animate(...), which uses JavaScript to animate, timecut should work.

The API is a little different than CSS transitions/animations, but you should be able to do most (and more) than what's achievable with CSS transitions/animations.

[Shugar]

I should also mention that it looks like you're using JQuery. If you switch over to JQuery animations (e.g. $('#someElement').animate(...), which uses JavaScript to animate, timecut should work.

The API is a little different than CSS transitions/animations, but you should be able to do most (and more) than what's achievable with CSS transitions/animations.

Exactly what I found to try before switching to any other library such as timecut.
So absolutely sure I'll try!
Thank you!