Animated words are not working.
Only Hi is showing animation plz help me I am stuck
import './index.scss';
const AnimatedLetters =({ letterClass, strArray, idx}) => {
return (
<span>
{
strArray.map((char, i) => (
<span key={char+i} className={`${letterClass}_${i+ idx}`}>
{char}
</span>
))
}
</span>
)
}
export default AnimatedLetters
text-animate {
display: inline-block;
opacity: 0;
animation: bounceIn 1s 1s ;
animation-fill-mode: forwards;
min-width: 10px;
}
@for $i from 1 through 35 {
.text-animate._#{$i} {
animation-delay: #{$i/10}s;
}
}
import { useState } from 'react';
import { Link } from 'react-router-dom';
import Loader from 'react-loaders';
import LogoTitle from '../../assets/images/logo-s.png';
import AnimatedLetters from '../AnimatedLetters';
import './index.scss';
const Home = () => {
const [letterClass, setLetterClass] = useState('text-animate')
const nameArray = ['i','m','a','n','s','h','u']
const jobArray = ['w','e','b',' ','d','e','v','e','l','o','p','e','r','.']
return (
<div className="container home-page">
<h1>
<span className={letterClass}>H</span>
<span className={`${letterClass} _12`}>i,</span>
<br/>
<span className={`${letterClass} _13`}>I</span>
<span className={`${letterClass} _14`}>'m</span>
<img src={LogoTitle} alt="developer"/>
<AnimatedLetters letterClass={letterClass} strArray={nameArray}
idx={15}/>
<br/>
<AnimatedLetters letterClass={letterClass}
strArray={jobArray} idx={22}/>
</h1>
<h2>Frontend Developer / Javascript Expert / Open-Source COntributor</h2>
<Link to="/contact" className='flat-button'>CONTACT-ME</Link>
</div>
)
}
export default Home
Top comments (0)