Time Events

One of the pain points of creating explanatory animations using code is synchronizing them with audio . Imagine that you'd like a certain animationto start right after some specific verbal cue. With a code-only solution, you'releft with hard-coding how long (or until which frame) you want to wait.

In Motion Canvas, it could look somewhat like this:

                            
                              
                                yield
                                
                                *
                                
                                animationOne
                                (
                                )
                                ;
                                
                                

                              
                              
                                
                                yield
                                
                                *
                                
                                waitFor
                                (
                                3.1415
                                )
                                ;
                                
                                // but how long should we wait?
                                
                                

                              
                              
                                
                                yield
                                
                                *
                                
                                animationTwo
                                (
                                )
                                ;
                                
                              
                            
                          

Evidently, this approach can get really tedious. Not only do you need to somehowfind the exact timestamp to wait for, but also each time you modify thevoiceover, you have to go through your code and adjust these hard-coded numbers.

That's why Motion Canvas allows you to edit these delays not through code, butthrough the editor. With the use of waitUntil youcan pause the animation without specifying the actual duration:

                            
                              
                                yield
                                
                                *
                                
                                animationOne
                                (
                                )
                                ;
                                
                                

                              
                              
                                
                                yield
                                
                                *
                                
                                waitUntil
                                (
                                'event'
                                )
                                ;
                                
                                // wait for an event called "event"
                                
                                

                              
                              
                                
                                yield
                                
                                *
                                
                                animationTwo
                                (
                                )
                                ;
                                
                              
                            
                          

This will cause the event to appear in the editor. From there, you can drag itto adjust its timing:

The dark trail behind the event illustrates its duration. It starts at themoment waitUntil was called - this is when the animation will pause. It willresume when the playhead reaches the event pill.

By default, adjusting a time event will also adjust all events that happen afterit. This is useful when you want to extend or shorten a pause in your voiceoverbecause correcting the first time event after the pause will also fix all eventsafter it. You can hold SHIFT when editing an event to prevent this fromhappening.

Controlling animation duration

Aside from specifying when something should happen, Time Events can also beused to control how long something should last. You can use the useDuration function to retrieve the durationof an event and use it in your animation:

                            
                              
                                yield
                                
                                *
                                
                                circle
                                (
                                )
                                .
                                scale
                                (
                                2
                                ,
                                
                                useDuration
                                (
                                'event'
                                )
                                )
                                ;