Kevin Powell - Community•3mo 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

V_LN•3mo ago

When text: relative is removed the text does appear

V_LN•3mo ago

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

Gaming

Programming

Text dissapears when set to relative