Unable to achieve smooth fade-in text animation in React using Typescript

Question

Unable to achieve smooth fade-in text animation in React using Typescript

Seeking assistance in creating a smooth fade-in text animation using CSS in React and Typescript with inline styling. I have attempted to define styles within an object and reference them in the style attribute, but encountered issues. Can anyone offer guidance or suggestions?

Here is a functional example of the desired effect: https://codepen.io/kazed972/pen/bQOQGR

Snippet from my code:

import React from 'react';

const styles = {
    // Styling properties here
};

function FadeInText() {
    var text = document.getElementById('text') as HTMLElement;
    var newDom = '';
    var animationDelay = 6;

    for (let i = 0; i < text.innerText.length; i++) {
        // Logic for generating dynamic span elements
    }

    // Apply animation delay to each character span element

    return (
        <div style={styles.center}>
            <p id="text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit...
            </p>
        </div>
    );
}

export { FadeInText };

javascript html css reactjs typescript

Answer 1

Answer №1

Consider using styled-components to maintain consistency in your react component styling.

I have made some changes to the styles. The parent element (Section) now utilizes flexbox. Each letter in TextStyle has a predefined position with a transform, which can be simplified by keeping only the final frame from the keyframes. Additionally, TextStyle now accepts two custom props: delay and color.

TextAnimation.tsx

import styled, { keyframes } from 'styled-components';

const anim = keyframes`
  100% { opacity: 1; transform: translate3d(0, 0, 0) }
`;

const Section = styled.section`
  width: 70vw;
  display: flex;
  flex-wrap: wrap;
`;

const TextStyle = styled.span<{ color: string; delay: number }>`
  animation: ${anim} 1s ease-out forwards;
  animation-delay: ${(props) => props.delay}ms;
  color: ${(props) => props.color};
  font-size: 2em;
  line-height: 1.3;
  opacity: 0;
  transform-style: perspective(500px);
  transform: translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
`;

const DELAY = 6; // ms
export const TextAnimation = ({ text }: { text: string }) => {
  // Splitting text into individual characters and creating an array of HTML nodes.
  const letters = text.split('').map((letter, index) => {
    // Calculate delay for each character
    const delayCounter = DELAY * (index + 1);

    return (
      <TextStyle key={index} delay={delayCounter} color="white">
        {letter === ' ' ? <>&nbsp;</> : letter}
      </TextStyle>
    );
  });

  return <Section>{letters}</Section>;
};

App.tsx

import { TextAnimation } from "./TextAnimation";

export default function App() {
  const text =
    "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate incidunt praesentium, rerum voluptatem in reiciendis officia harum repudiandae tempore suscipit ex ea, adipisci ab porro.";
  return (
    <div className="App">
      <TextAnimation text={text} />
    </div>
  );
}

https://codesandbox.io/s/smooth-fade-in-text-animation-doesnt-work-react-typescript-2vt6e2?file=/src/App.tsx

Answer 2

Consider using styled-components to maintain consistency in your react component styling.

I have made some changes to the styles. The parent element (Section) now utilizes flexbox. Each letter in TextStyle has a predefined position with a transform, which can be simplified by keeping only the final frame from the keyframes. Additionally, TextStyle now accepts two custom props: delay and color.

TextAnimation.tsx

import styled, { keyframes } from 'styled-components';

const anim = keyframes`
  100% { opacity: 1; transform: translate3d(0, 0, 0) }
`;

const Section = styled.section`
  width: 70vw;
  display: flex;
  flex-wrap: wrap;
`;

const TextStyle = styled.span<{ color: string; delay: number }>`
  animation: ${anim} 1s ease-out forwards;
  animation-delay: ${(props) => props.delay}ms;
  color: ${(props) => props.color};
  font-size: 2em;
  line-height: 1.3;
  opacity: 0;
  transform-style: perspective(500px);
  transform: translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
`;

const DELAY = 6; // ms
export const TextAnimation = ({ text }: { text: string }) => {
  // Splitting text into individual characters and creating an array of HTML nodes.
  const letters = text.split('').map((letter, index) => {
    // Calculate delay for each character
    const delayCounter = DELAY * (index + 1);

    return (
      <TextStyle key={index} delay={delayCounter} color="white">
        {letter === ' ' ? <>&nbsp;</> : letter}
      </TextStyle>
    );
  });

  return <Section>{letters}</Section>;
};

App.tsx

import { TextAnimation } from "./TextAnimation";

export default function App() {
  const text =
    "Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate incidunt praesentium, rerum voluptatem in reiciendis officia harum repudiandae tempore suscipit ex ea, adipisci ab porro.";
  return (
    <div className="App">
      <TextAnimation text={text} />
    </div>
  );
}

https://codesandbox.io/s/smooth-fade-in-text-animation-doesnt-work-react-typescript-2vt6e2?file=/src/App.tsx

Answer 3

Answer №2

Here is a unique React approach to achieve the desired effect:

FadeInText.js:

const FadeInText = ({ text }) => {
  return (
    <div className="center">
      <p>{addAnimationEffect(text)}</p>
    </div>
  );
};

const addAnimationEffect = (text) => {
  const ANIMATION_DELAY = 6;

  // Convert string to array of characters with non-breaking spaces for empty spaces
  const allChars = [...text].map((char) => (char === " " ? <>&nbsp;</> : char));

  return allChars.map((char, i) => {
    return (
      <span
        key={i}
        className="char"
        style={{ animationDelay: `${ANIMATION_DELAY * i}ms` }}
      >
        {char}
      </span>
    );
  });
};

export default FadeInText;

This is how you can utilize the above component:

App.js:

import FadeInText from "./FadeInText";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <FadeInText text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate incidunt praesentium, rerum voluptatem in reiciendis officia harum repudiandae tempore suscipit ex ea, adipisci ab porro." />
      <FadeInText text="Hello world! Hello world! Hello world! Hello world! Hello world!" />
    </div>
  );
}

styles.css:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #232323;
  color: #fff;
  font-family: Calibri, sans-serif;
}

.center {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  width: 70%;
  font-size: 30px;
  display: block;
  text-align: center;
}

.char {
  font-size: 40px;
  height: 40px;
  animation: an 1s ease-out 1 both;
  display: inline-block;
}

@keyframes an {
  from {
    opacity: 0;
    transform: perspective(500px) translate3d(-35px, -40px, -150px)
      rotate3d(1, -1, 0, 35deg);
  }
  to {
    opacity: 1;
    transform: perspective(500px) translate3d(0, 0, 0);
  }
}

See it in action here: https://codesandbox.io/s/bold-jepsen-bivcku?file=/src/FadeInText.js

Answer 4

Here is a unique React approach to achieve the desired effect:

FadeInText.js:

const FadeInText = ({ text }) => {
  return (
    <div className="center">
      <p>{addAnimationEffect(text)}</p>
    </div>
  );
};

const addAnimationEffect = (text) => {
  const ANIMATION_DELAY = 6;

  // Convert string to array of characters with non-breaking spaces for empty spaces
  const allChars = [...text].map((char) => (char === " " ? <>&nbsp;</> : char));

  return allChars.map((char, i) => {
    return (
      <span
        key={i}
        className="char"
        style={{ animationDelay: `${ANIMATION_DELAY * i}ms` }}
      >
        {char}
      </span>
    );
  });
};

export default FadeInText;

This is how you can utilize the above component:

App.js:

import FadeInText from "./FadeInText";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <FadeInText text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate incidunt praesentium, rerum voluptatem in reiciendis officia harum repudiandae tempore suscipit ex ea, adipisci ab porro." />
      <FadeInText text="Hello world! Hello world! Hello world! Hello world! Hello world!" />
    </div>
  );
}

styles.css:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #232323;
  color: #fff;
  font-family: Calibri, sans-serif;
}

.center {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  width: 70%;
  font-size: 30px;
  display: block;
  text-align: center;
}

.char {
  font-size: 40px;
  height: 40px;
  animation: an 1s ease-out 1 both;
  display: inline-block;
}

@keyframes an {
  from {
    opacity: 0;
    transform: perspective(500px) translate3d(-35px, -40px, -150px)
      rotate3d(1, -1, 0, 35deg);
  }
  to {
    opacity: 1;
    transform: perspective(500px) translate3d(0, 0, 0);
  }
}

See it in action here: https://codesandbox.io/s/bold-jepsen-bivcku?file=/src/FadeInText.js

Unable to achieve smooth fade-in text animation in React using Typescript

Answer №1

TextAnimation.tsx

App.tsx

Answer №2

Similar questions

Angular2 has encountered a malfunction with the chart feature

Instead of displaying the name, HTML reveals the ID

Is there a way to insert a colored square into a <button> tag rather than text?

Tips for leveraging a button to trigger server-side actions

Enhancing Alerts in Bootstrap 5.1+: Tweaking Text, Background, and Border Colors for Alert-Warning Messages using custom _variables.scss

How can I eliminate the gap above the footer in iframes alignment?

A JSON string transformed into a JSON value

Using JavaScript functions on HTML data loaded by the jQuery.append() method: A guide

Utilizing Typescript with Mongoose Schemas

What are the steps to validate a form control in Angular 13?

Replacing all of the text in a document with a VSCode extension

Tips for hiding a div element until its visibility is toggled:- Set the display property of

Can an HTML select box have a horizontal scroll bar added to it?

What is the best way to iterate through multiple arrays using a single for loop

Strategies for ensuring completion of internal promises

Tips for aligning pagination in the center in bootstrap 4

Discover the steps for integrating an object into a Ext.grid.Panel using Sencha Ext Js

What is the solution to the error message stating that <tr> cannot be a child of <div>?

Ways to organize JSON data from a fetch request into multiple divisions

Changing a JavaScript Confirm to jQuery Confirm within a button element of an ASPX GridView