Customize the typewriter effect

[pine schooner]

Hi, I'm using the typewriter effect on this video, and I wanted to customize it a little bit.

1 - I want each word not to move during the animation, just the letters to appear

2 - I would like to ease a little bit the animation (like 2 frames per letter at the beginning and end and 0.25 frame per letter at the middle of the animation)

Do you think that would be possible ?

Thanks,
Axel

[heavy heron]

yes, use the interpolate() function together with easing: https://www.remotion.dev/docs/interpolate https://www.remotion.dev/docs/easing

instead of not rendering the character, always render it but with a style that has an opacity of 0

[pine schooner]

Thanks but I used your tutorial with math.floor and slice and I couldn't find a way to ease it since I don't use interpolate. But maybe there's an other way to do this effect when each letter appears ? Sorry for not being precise in my request !!

[heavy heron]

what have you tried?
for this you probably should use interpolate

[pine schooner]

For the text I created a sequence which looks like this : import { interpolate, useCurrentFrame, useVideoConfig, Easing, AbsoluteFill,
} from "remotion";
import React from 'react';
import {color} from '../../resources/constants';
import "../../resources/font.css";
import data from "../../../public/DiscoverData.json";

export const AnimTitre: React.FC = () => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
const valeursBeziers = Easing.bezier(.58,.14,.45,.97);

// data
const dataTitre = data.Titre;

const imgCle03 = 5*25;
const imgCle04 = imgCle03 + 8;


const leftGen = interpolate(frame, [imgCle03, imgCle04,], [0, 0], {
  easing: valeursBeziers,
  extrapolateRight: "clamp",
  extrapolateLeft: "clamp",
});
const topGen = interpolate(frame, [imgCle03, imgCle04], [0, 1000], {
  easing: valeursBeziers,
  extrapolateRight: "clamp",
  extrapolateLeft: "clamp",
});

// Un nouveau caractère à chaque demi-image
const charsShown = Math.floor(frame / 0.5);
const textToShow = dataTitre.slice(0, charsShown);

return (

     <div> 

      <AbsoluteFill>
       <div
          style={{
            position:'absolute',
            top:topGen + (540-(350/2)),
            left: leftGen + ((1920/2)-(1150/2)),
            width:1150,
            height: 350,
            textAlign: "center",
            alignItems: "center",
            fontSize: 95,
            fontFamily: 'Montserrat',
            fontWeight: 500,
            lineHeight: "116px",
            color: color.blanc,
          }}>
          {textToShow}
        </div>
      </AbsoluteFill>

    </div>

);

};

And this sequence is integrated into de background and the square animation

[heavy heron]

split the text up into characters, wrap them in spans, and animate the opacity by transforming it over time https://www.remotion.dev/docs/transforms