Transitions

Transitions allow you to customize the way scenes transition from one intoanother. A transition is an animation performed at the beginning of the scene.It can modify the context of both the current and the previous scene.

Before we start

Make sure your project contains at least two scenes. In this example, we'veprepared firstScene.tsx and secondScene.tsx , and configured our project todisplay one after the other. We'll be setting up our transitions in the secondscene.

Make sure to put something different in both scenes to easier see thetransitions.

                                
                                  
                                    my-animation/
                                    

                                  
                                  
                                    └─ src/
                                    

                                  
                                  
                                       ├─ scenes/
                                    

                                  
                                  
                                       │  ├─ firstScene.tsx
                                    

                                  
                                  
                                       │  └─ secondScene.tsx
                                    

                                  
                                  
                                       └─ project.ts
                                    
                                  
                                
                              

Pre-made transitions

Motion Canvas comes with a set of common transitions in a form of easy-to-usegenerators. To use them, yield* the transition generator at the beginning ofthe new scene:

src/scenes/secondScene.tsx

                            
                              
                                export
                                
                                default
                                
                                makeScene2D
                                (
                                function
                                *
                                
                                (
                                view
                                )
                                
                                {
                                
                                

                              
                              
                                
                                // set up the scene:
                                
                                

                              
                              
                                  view
                                .
                                add
                                (
                                /* your nodes here */
                                )
                                ;
                                
                                

                              
                              
                                
                                

                              
                              
                                
                                // perform a slide transition to the left:
                                
                                

                              
                              
                                
                                yield
                                *
                                
                                slideTransition
                                (
                                Direction
                                .
                                Left
                                )
                                ;
                                
                                

                              
                              
                                
                                

                              
                              
                                
                                // proceed with the animation
                                
                                

                              
                              
                                
                                yield
                                *
                                
                                waitFor
                                (
                                3
                                )
                                ;
                                
                                

                              
                              
                                
                                }
                                )
                                ;
                                
                              
                            
                          

caution

Make sure to add nodes to the view before yielding the transition generator.Otherwise, your scene will remain empty until the transition ends.

All available transitions are listed below:

slideTransition

                            
                              
                                public 
                                slideTransition
                                
                                  
                                    
                                      direction
                                      : 
                                      Direction
                                       = 
                                      Direction.Top
                                    
                                    
                                      duration
                                      : 
                                      number
                                       = 
                                      0.6
                                    
                                  
                                
                                : 
                                ThreadGenerator
                              
                              

                            
                          

Perform a transition that slides the scene in a given direction.

Parameters

• direction : Direction = Direction.Top

  The direction in which to slide.

• duration : number = 0.6

  The duration of the transition.

---

zoomInTransition

                            
                              
                                public 
                                zoomInTransition
                                
                                  
                                    
                                      area
                                      : 
                                      BBox
                                    
                                    
                                      duration
                                      : 
                                      number
                                       = 
                                      0.6
                                    
                                  
                                
                                : 
                                ThreadGenerator
                              
                              

                            
                          

Perform a transition that zooms in on a given area of the scene.

Parameters

• area : BBox

  The area on which to zoom in.

• duration : number = 0.6

  The duration of the transition.

---

zoomOutTransition

                            
                              
                                public 
                                zoomOutTransition
                                
                                  
                                    
                                      area
                                      : 
                                      BBox
                                    
                                    
                                      duration
                                      : 
                                      number
                                       = 
                                      0.6
                                    
                                  
                                
                                : 
                                ThreadGenerator
                              
                              

                            
                          

Perform a transition that zooms out from a given area of the scene.

Parameters

• area : BBox

  The area from which to zoom out.

• duration : number = 0.6

  The duration of the transition.

---

fadeTransition

                            
                              
                                public 
                                fadeTransition
                                
                                  
                                    
                                      duration
                                      : 
                                      number
                                       = 
                                      0.6
                                    
                                  
                                
                                : 
                                ThreadGenerator
                              
                              

                            
                          

Perform a transition that fades between the scenes.

Parameters

• duration : number = 0.6

  The duration of the transition.

---

Custom transitions

You can use the useTransition functionto implement custom transitions. It allows you to specify two callbacks thatwill modify the contexts of the current and previous scene respectively. Thevalue it returns is a callback that you need to call once you finish thetransition.

The transition template looks as follows:

                            
                              
                                // set up the transition
                                
                                

                              
                              
                                
                                const
                                 endTransition 
                                =
                                
                                useTransition
                                (
                                
                                

                              
                              
                                  currentContext 
                                =>
                                
                                {
                                
                                

                              
                              
                                
                                // modify the context of the current scene
                                
                                

                              
                              
                                
                                }
                                ,
                                
                                

                              
                              
                                  previousContext 
                                =>
                                
                                {
                                
                                

                              
                              
                                
                                // modify the context of the previous scene
                                
                                

                              
                              
                                
                                }
                                ,
                                
                                

                              
                              
                                
                                )
                                ;
                                
                                

                              
                              
                                
                                

                              
                              
                                
                                // perform animations
                                
                                

                              
                              
                                
                                

                              
                              
                                
                                // finish the transition
                                
                                

                              
                              
                                
                                endTransition
                                (
                                )
                                ;
                                
                              
                            
                          

Here's how you could implement a simple slide transition:

                            
                              
                                export
                                
                                function
                                *
                                
                                slideTransition
                                (
                                
                                

                              
                              
                                  direction
                                :
                                 Direction 
                                =
                                 Direction
                                .
                                Top
                                ,
                                
                                

                              
                              
                                  duration 
                                =
                                
                                0.6
                                ,
                                
                                

                              
                              
                                
                                )
                                :
                                 ThreadGenerator 
                                {
                                
                                

                              
                              
                                
                                const
                                 size 
                                =
                                
                                useScene
                                (
                                )
                                .
                                getSize
                                (
                                )
                                ;
                                
                                

                              
                              
                                
                                const
                                 position 
                                =
                                 size
                                .
                                getOriginOffset
                                (
                                direction
                                )
                                .
                                scale
                                (
                                2
                                )
                                ;
                                
                                

                              
                              
                                
                                const
                                 previousPosition 
                                =
                                 Vector2
                                .
                                createSignal
                                (
                                )
                                ;
                                
                                

                              
                              
                                
                                const
                                 currentPosition 
                                =
                                 Vector2
                                .
                                createSignal
                                (
                                position
                                )
                                ;
                                
                                

                              
                              
                                
                                

                              
                              
                                
                                // set up the transition
                                
                                

                              
                              
                                
                                const
                                 endTransition 
                                =
                                
                                useTransition
                                (
                                
                                

                              
                              
                                
                                // modify the context of the current scene
                                
                                

                              
                              
                                    ctx 
                                =>
                                 ctx
                                .
                                translate
                                (
                                currentPosition
                                .
                                x
                                (
                                )
                                ,
                                 currentPosition
                                .
                                y
                                (
                                )
                                )
                                ,
                                
                                

                              
                              
                                
                                // modify the context of the previous scene
                                
                                

                              
                              
                                    ctx 
                                =>
                                 ctx
                                .
                                translate
                                (
                                previousPosition
                                .
                                x
                                (
                                )
                                ,
                                 previousPosition
                                .
                                y
                                (
                                )
                                )
                                ,
                                
                                

                              
                              
                                
                                )
                                ;
                                
                                

                              
                              
                                
                                

                              
                              
                                
                                // perform animations
                                
                                

                              
                              
                                
                                yield
                                *
                                
                                all
                                (
                                
                                

                              
                              
                                
                                previousPosition
                                (
                                position
                                .
                                scale
                                (
                                -
                                1
                                )
                                ,
                                 duration
                                )
                                ,
                                
                                

                              
                              
                                
                                currentPosition
                                (
                                Vector2
                                .
                                zero
                                ,
                                 duration
                                )
                                ,
                                
                                

                              
                              
                                
                                )
                                ;
                                
                                

                              
                              
                                
                                

                              
                              
                                
                                // finish the transition
                                
                                

                              
                              
                                
                                endTransition
                                (
                                )
                                ;
                                
                                

                              
                              
                                
                                }
                                
                              
                            
                          

Animate when transitioning

By default, Motion Canvas will transition to the next scene once the generatorof the current scene has reached the end. In this case, the scene will freezefor the duration of the transition. You can use the finishScene function to trigger the transitionearly, allowing the animation to continue while transitioning:

                            
                              
                                export
                                
                                default
                                
                                makeScene2D
                                (
                                function
                                *
                                
                                (
                                view
                                )
                                
                                {
                                
                                

                              
                              
                                
                                yield
                                *
                                
                                animationOne
                                (
                                )
                                ;
                                
                                

                              
                              
                                
                                // trigger the transition early:
                                
                                

                              
                              
                                
                                finishScene
                                (
                                )
                                ;
                                
                                

                              
                              
                                
                                // continue animating:
                                
                                

                              
                              
                                
                                yield
                                *
                                
                                animationTwo
                                (
                                )
                                ;
                                
                                

                              
                              
                                
                                }
                                )
                                ;