<div id="app"></div>
* {
padding: 0;
margin: 0;
}
body {
padding: 5em;
font-family: "Helvetica Neue", "Helvetica", sans-serif;
background-color: #002731;
padding-top: 10em;
}
h1 {
font-size: 5em;
text-align: center;
font-weight: 600;
color: #cb3126;
}
h1 span span {
position: relative;
animation: move-text-color 0.75s forwards;
bottom: -1em;
opacity: 0;
}
@keyframes move-text-color {
0% {
bottom: -0.2em;
opacity: 1;
color: #3E5C76;
}
50% {
bottom: 0.2em;
color: #EC058E;
}
100% {
bottom: 0;
opacity: 1;
color: #cb3126;
}
}
const { Component, Children, PropTypes } = React
class SplitText extends Component {
render(){
return(
<span aria-label={this.props.copy} role={this.props.role}>
{this.props.copy.split("").map(function(char, index){
let style = {"animation-delay": (0.5 + index / 10) + "s"}
return <span
aria-hidden="true"
key={index}
style={style}>
{char}
</span>;
})}
</span>
);
}
}
class Layout extends Component {
render() {
return(
<h1><SplitText copy="Sarah Fossheim" role="heading" /></h1>
);
}
}
ReactDOM.render(<Layout />, document.getElementById('app'))
View Compiled
This Pen doesn't use any external CSS resources.