Jump to content
Search Community

Animating a Sequence of Images with a Control for Musical Tempo

thedurf18 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

This is my first post on this forum, forgive me for my novice-ness. I have limited knowledge of computer coding and languages, but I'm trying to use some kind of loader to sequence through a large series of images that make up a video, and would like to set up a variable that represents musical tempo, which would also affect how fast/slow the series of images are being processed. I don't expect a complete walkthrough, but if someone can get me started on a path, I'd really appreciate it. 

Link to comment
Share on other sites

I might be misunderstanding the question, but perhaps you could simply set up a TimelineLite with a bunch of evenly-spaced set() calls that either change the visibility of images or a single image's src (though the latter could be problematic performance-wise because the browser would have to load them at that point), and then update the timeScale() of that TimelineLite in accordance with your tempo. Just an idea. 

  • Like 2
Link to comment
Share on other sites

14 hours ago, thedurf18 said:

Hello,

 

This is my first post on this forum, forgive me for my novice-ness. I have limited knowledge of computer coding and languages, but I'm trying to use some kind of loader to sequence through a large series of images that make up a video, and would like to set up a variable that represents musical tempo, which would also affect how fast/slow the series of images are being processed. I don't expect a complete walkthrough, but if someone can get me started on a path, I'd really appreciate it. 

 

Welcome to the forum @thedurf18! A few quick questions ...

 

Is this series of images supposed to produce an animation effect? Or is it more a "slideshow" of images?

 

What is the approximate minimum and maximum frequency that you envision these images changing? (i.e. 1 image per second, 10 images per second, etc.)

 

Are these hard cuts from one image to the other ... or should there be any transition between the images (e.g. a cross fade)?

 

How many images in total?

  • Like 3
Link to comment
Share on other sites

Hi Shaun, 

 

Thanks for the response! I took a video and used ffmpeg to split the video into individual frames. The original video was at 60 frames per second, so I would probably manipulate it to 30 frames per second as a minimum for a slo mo effect, then have a maximum of 120 frames per second for a fast effect. I'm adding in my own frames as well, but there won't be any hard cuts or transition effects between frames.

Link to comment
Share on other sites

You won't realistically be able to have anything run at 120fps in the browser. requestAnimationFrame runs at 60fps max, plus it'd be a lot to ask of the browser to flip through images like that. But the technique I described above should still work fine - it'll just update the screen 60 times per second but it'd get through the images in the same way (as if it were 120fps...just with fewer screen updates in the process). I imagine a video might be lighter size-wise. Good luck, though. 

  • Like 1
Link to comment
Share on other sites

Here's a super simple example:

 

Click anywhere to toggle between a timeScale of 1 and 4. Initially it's got 0.5 seconds inbetween each "frame" (at a timeScale of 1). So jumping to a timeScale of 4 means that there are 0.125 seconds between each one (0.5 / 4). 

 

And you don't have to immediately change the timeScale - you can gradually change it by animating it, like:

//animates tl.timeScale() to 4 over the course of 1 second
TweenMax.to(tl, 1, {timeScale:4}); 

 

I hope that helps. 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...