Code Editor Animation options

Get to know the animation options for the code editor element.

---

Here we'll discuss the different animation options available for the Code Editor element. Be sure to also have a look at the Animation Basics to learn more about our general Entry, Exit and Change animations.

In order to learn about other design options for the Code Editor element, head over to the dedicated Docs page.

---

After selecting a Code Editor element on the Editor, you'll find the animation options on the Animation tab of the right toolbar.

Code Change Transitions

snappify provides you different Transition types to animate code changes between Slides. This can be useful for providing step-by-step explanations of your code as well as visualizing refactorings.

Let's have a look at the different options:

FadeIn

With this transition type, new code changes will fade in and code which doesn't exist anymore will disappear gradually.

SlideIn

This transition type listens to whole line changes. Changed and new lines will slide in from the right and the old lines will slide out to the left.

Morph

This transition type can be used to visualize refactorings. It will morph the old code into the new code, moving keywords and identifiers to their new position.

TypeWriter

The TypeWriter effect will type out the code, character by character.

None

Of course you can also disable the animation completely. By choosing the Transition type None, the code will simply change without any animation.