Kevin Powell - Community•16mo ago

Text dissapears when set to relative

Hey I have the following code, I'm trying to recreate this code pen https://codepen.io/KACTOPKA/pen/qBMeKeQ but in react For some reason when I set my text to relative it hides the text but not the boxes

.text-container {
    width: 80%;
    display: flex;
    gap: 1rem;

    border: 1px solid red; 
}

#external-container {
    display: flex;
    
    color: white;
    border: 1px solid blue; 

    & > p {
        border: 1px solid green; 
        position: relative;
        top: 3rem;
    }
}

.text-container {
    width: 80%;
    display: flex;
    gap: 1rem;

    border: 1px solid red; 
}

#external-container {
    display: flex;
    
    color: white;
    border: 1px solid blue; 

    & > p {
        border: 1px solid green; 
        position: relative;
        top: 3rem;
    }
}

import React, { useEffect, useState, useRef } from 'react';

export default function SwiftUpText({ text }) {
    const intervalIdRef = useRef(null); 
    const [isInView, setIsInView] = useState(false);
    const [displayText, setDisplayText] = useState([]);

    const textRef = useRef(null);

    useEffect(() => {
        let iteration = 0;
        const textSplits = text.split(' ');

        const newIntervalId = setInterval(() => {
            setDisplayText(textSplits.slice(0, Math.floor(iteration * textSplits.length)));

            if (iteration >= textSplits.length) {
                clearInterval(intervalIdRef.current);
                return;
            }

            iteration += 1 / textSplits.length;
        }, 300);

        intervalIdRef.current = newIntervalId;
    }, [text]);

    return (
        <h1 ref={textRef} className="text-container gradient-text text-[3rem] md:text-[4rem] leading-tight tracking-wide">
            {displayText.map((word, index) => (
                <span id="external-container" key={index} style={{ animationDelay: `${index * 0.3}s` }}>
                    <p>{word}{' '}</p>
                </span>
            ))}
        </h1>
    );
}

import React, { useEffect, useState, useRef } from 'react';

export default function SwiftUpText({ text }) {
    const intervalIdRef = useRef(null); 
    const [isInView, setIsInView] = useState(false);
    const [displayText, setDisplayText] = useState([]);

    const textRef = useRef(null);

    useEffect(() => {
        let iteration = 0;
        const textSplits = text.split(' ');

        const newIntervalId = setInterval(() => {
            setDisplayText(textSplits.slice(0, Math.floor(iteration * textSplits.length)));

            if (iteration >= textSplits.length) {
                clearInterval(intervalIdRef.current);
                return;
            }

            iteration += 1 / textSplits.length;
        }, 300);

        intervalIdRef.current = newIntervalId;
    }, [text]);

    return (
        <h1 ref={textRef} className="text-container gradient-text text-[3rem] md:text-[4rem] leading-tight tracking-wide">
            {displayText.map((word, index) => (
                <span id="external-container" key={index} style={{ animationDelay: `${index * 0.3}s` }}>
                    <p>{word}{' '}</p>
                </span>
            ))}
        </h1>
    );
}

Vladislav

CodePen

Text Swift-Up Animation

An animation of a pop-up text with an infinite number of words. Based on the work of Steven Lei - https://codepen.io/stevenlei/pen/MWjdWvp...

2 Replies

VXLNOP•16mo ago

When text: relative is removed the text does appear

VXLNOP•16mo ago

nvm its because of another eleemnet thats setting the graident on the text

Gaming

Programming

Text dissapears when set to relative

Did you find this page helpful?