Skip to main content
scene event 30 30 10 0 40 50 80 70 100 60 90 110 -10 35

Best of Both Worlds

Some things are easier with a mouse. Write animations in TypeScript with your favorite IDE; Use a web-based editor to sync them with audio.

Powered by Vite , a real-time preview of your animation automatically updates upon any changes.

Try the Editor 

                      
                        
                          export
                          
                          makeScene
                          (
                          function
                          *
                          
                          (
                          view
                          )
                          
                          {
                          
                          

                        
                        
                          
                          const
                           circle 
                          =
                          
                          createRef
                          <
                          Circle
                          >
                          (
                          )
                          ;
                          
                          

                        
                        
                            view
                          .
                          add
                          (
                          
                          

                        
                        
                          
                          <
                          Circle
                          
                          

                        
                        
                          
                          ref
                          =
                          {
                          circle
                          }
                          
                          

                        
                        
                          
                          width
                          =
                          {
                          320
                          }
                          
                          

                        
                        
                          
                          height
                          =
                          {
                          320
                          }
                          
                          

                        
                        
                          
                          fill
                          =
                          {
                          'blue'
                          }
                          
                          

                        
                        
                          
                          />
                          
                          

                        
                        
                          
                          )
                          ;
                          
                          

                        
                        
                          
                          

                        
                        
                          
                          yield
                          *
                          
                          circle
                          (
                          )
                          .
                          scale
                          (
                          2
                          ,
                          
                          0.3
                          )
                          ;
                          
                          

                        
                        
                          
                          yield
                          *
                          
                          waitUntil
                          (
                          'event'
                          )
                          ;
                          
                          

                        
                        
                          
                          yield
                          *
                          
                          all
                          (
                          
                          

                        
                        
                          
                          circle
                          (
                          )
                          .
                          scale
                          (
                          1
                          ,
                          
                          0.3
                          )
                          ,
                          
                          

                        
                        
                          
                          circle
                          (
                          )
                          .
                          position
                          .
                          y
                          (
                          200
                          ,
                          
                          0.3
                          )
                          ,
                          
                          

                        
                        
                          
                          )
                          ;
                          
                          

                        
                        
                          
                          yield
                          *
                          
                          circle
                          (
                          )
                          .
                          fill
                          (
                          'green'
                          ,
                          
                          0.3
                          )
                          ;
                          
                          

                        
                        
                          
                          }
                          )
                          ;

Procedural for a Change

Let the execution of your code define the animation. Write generator functions that describe what should happen - step by step.

Focus on duration, speed and acceleration instead of hardcoded key frames.

Learn More

Tested in Combat

The road ahead is still long, but you can already use Motion Canvas to create production-quality animations.