Question 174203 in CSS Question posted in
Some basic documentation can be found here.

Css – Custom Text Fade In Component

I’m creating this custom text fade in component for a project of mine and ran into an issue.

I create a list of the words by splitting the string and then map each word into it’s own Typography (mui v4) component with the index of the word as the animation delay offset.

I noticed that in mobile the text doesn’t seem to wrap even when the total sentence is too long and was having trouble solving this.

I tried having word + ' ' instead of word + 'u00a0' and then adding style={{ whiteSpace: 'pre-wrap' }} to each word but that didn’t put any spaces in mobile for some reason (although it did for non-mobile).

Any help would be much appreciated.

import React, { useEffect, useState } from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';

const useStyles = makeStyles(theme => ({
    textFadeIn: {
        opacity: 0,
        animationName: '$fadeIn',
        animationDuration: ({animationSpeed}) => (`${animationSpeed}s`),
        animationFillMode: 'forwards',
    },
    '@keyframes fadeIn': {
        '0%': { opacity: 0 },
        '100%': { opacity: 1 },
    },
}));

export default function FadeInWords({ text, className, style, delay = 0.2, animationSpeed=1 }) {
    const classes = useStyles({ animationSpeed });
    const words = text.split(' ');

    return (
        <>
            {words.map((word, index) => {
                return (
                    <Typography className={[classes.textFadeIn, className]} style={{ ...style, animationDelay: `${index * delay}s` }}>
                        {(words.length === index + 1) ? word : word + 'u00a0'}
                    </Typography>
                );
            })}
        </>
    );
}

Desktop View:
enter image description here

Mobile View:
enter image description here

Expected Mobile View:
enter image description here

Tags:

2

Answers


  1. 0

    This is what you can try like this:

    Only you have to add display: "inline-block" in textFadeIn

    textFadeIn: {
    opacity: 0,
    display: "inline-block",
    animationName: "$fadeIn",
    animationDuration: ({ animationSpeed }) => `${animationSpeed}s`,
    animationFillMode: "forwards"
  },

    I hope this helps!

    Login or Signup to reply.
  2. 0 
     import Styled from "styled-components";

 export default function FadeInWords({ text, className, style, delay = 0.2, animationSpeed=1 }) {
    const [size, setSize] = useState(0);
    useEffect(() => {
       const width = document.body.clientWidth;
       setSize(width);
    }, []);
    const classes = useStyles({ animationSpeed });
    const words = text.split(' ');

    return (
        <Wrapper width = {size}>
            {words.map((word, index) => {
                return (
                    <Typography className={[classes.textFadeIn, className]} style={{ ...style, animationDelay: `${index * delay}s` }}>
                        {(words.length === index + 1) ? word : word + 'u00a0'}
                    </Typography>
                );
            })}
        </Wrapper>
    );
}

const Wrapper = Styled.div`
    width: ${({ width }) => width};
`;

    You are trying to give wrap to the word which doesn’t work. Instead, give width to the whole sentence which will wrap the sentence to the next line according to the screen size.

    I hope this helps you!!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search