How was the expand code snippet effect implemented?

[pinkboid]

In the revealjs.com landing page at slide 4 "Pretty Code", code snippets have lines appended to them on next.
On the first sequence, it shows

	import React, { useState } from 'react';
	 
	function Example() {
	  const [count, setCount] = useState(0);
	 
	  return (
	    ...
	  );
	}

and then on the next sequence, it expands to

        import React, { useState } from 'react';
	 
	function Example() {
	  const [count, setCount] = useState(0);
	 
	  return (
	    <div>
	      <p>You clicked {count} times</p>
	      <button onClick={() => setCount(count + 1)}>
	        Click me
	      </button>
	    </div>
	  );
	}

without requiring a vertical or horizontal transition to a new slide.

I do not see any explanation on how to achieve this effect in the "Presenting Code" section of the docs. It only shows presenting single snippets of code at a single slide and highlighting specific lines.

Is this a fragment being used?

[hakimel]

That transition is created using a reveal.js feature called "auto-animate": https://revealjs.com/auto-animate

Auto-animate lets you animate content smoothly between two separate slides. It automatically finds matching content between two adjacent slides, checks how they differ and creates the required transition.

That said, the code animation you saw in the demo is actually two separate slides (with two separate code blocks) and an auto-animation between.

You can find an example of a code auto-animation here: https://revealjs.com/auto-animate/#example%3A-animating-between-code-blocks