Apple Animation in React with inline CSS problem - html

Question

I try to recreate this animation with HTML and CSS in React with Typescript using inline styling.I am creating an object with styling information, and refer to it in the style attribute. The code is down below. It does not work and I am not sure what I am doing wrong, I suspect the styles are not defined and referred correctly?
Here is the original Codepen example I try to rewrite: Apple Animation
And here is my code
import React from 'react';
const styles = {
'#keyframes showTopText': {
'0%': { transform: 'translate3d(0, 100%, 0)' },
'40%, 60%': { transform: 'translate3d(0, 50%, 0)' },
'100%': { transform: 'translate3d(0, 0, 0)' },
},
'#keyframes showBottomText': {
'0%': { transform: 'translate3d(0, -100%, 0)' },
'100%': { transform: 'translate3d(0, 0, 0)' },
},
animatedTitle: {
color: '#222',
fontFamily: 'Roboto, Arial, sans-serif',
height: '90vmin',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)',
width: '90vmin',
},
'animatedTitle > div': {
height: '50%',
overflow: 'hidden',
position: 'absolute',
width: '100%',
},
'animatedTitle > div div': {
fontSize: '12vmin',
padding: '2vmin 0',
position: 'absolute',
},
'animatedTitle > div div span': {
display: 'block',
},
'animated-title > div.text-top': {
borderBottom: '1vmin solid #000',
top: 0,
},
'animatedTitle > div.text-top div': {
animation: 'showTopText 1s',
animationDelay: '0.5s',
animationFillMode: 'forwards',
bottom: 0,
transform: 'translate(0, 100%)',
},
'animatedTitle > div.text-top div span:first-child': {
color: '#767676',
},
'animatedTitle > div.text-bottom': {
bottom: 0,
},
'animatedTitle > div.text-bottom div': {
animation: 'showBottomText 0.5s',
animationDelay: '1.75s',
animationFillMode: 'forwards',
top: 0,
transform: 'translate(0, -100%)',
},
};
function Design() {
return (
<div style={styles.animatedTitle}>
<div style={styles['animatedTitle > div.text-top div']}>
<div>
<span>mimicking</span>
<span>apple's design</span>
</div>
</div>
<div style={styles['animatedTitle > div.text-bottom']}>
<div>for the win!</div>
</div>
</div>
);
}
export { Design };

Answer 1

You can try using styled-components to keep your component more flexible and compatible. I replicated the codepen example with styled-components and made it easily extensible.
So, TopAnimateBlock and BottomAnimateBlock have numOfLine property hence how many lines is inside the block. The second property in BottomAnimateBlock is delayTopLine, it should have the same numbers as a numOfLine in TopAnimateBlock, because we need to wait for top lines to play.
Also you can easily change the text color with color property in TextStyle and pass as color value, HEX color or rgba() / hsla().
TextAnimation.tsx
import styled, { keyframes } from 'styled-components';
const showTopText = keyframes`
0% { transform: translate3d(0, 100% , 0); }
40%, 60% { transform: translate3d(0, 50%, 0); }
100% { transform: translate3d(0, 0, 0); }
`;
const showBottomText = keyframes`
0% { transform: translate3d(0, -100%, 0); }
100% { transform: translate3d(0, 0, 0); }
`;
const Section = styled.section`
width: calc(100% + 10vmin);
display: flex;
flex-flow: column;
padding: 2vmin 0;
overflow: hidden;
&:last-child {
border-top: 1vmin solid white;
}
`;
const Block = styled.div<{ numOfLine: number }>`
position: relative;
`;
const TopAnimateBlock = styled(Block)`
animation: ${showTopText} calc(0.5s * ${props => props.numOfLine}) forwards;
animation-delay: 0.5s;
transform: translateY(calc(100% * ${props => props.numOfLine}));
`;
const BottomAnimateBlock = styled(Block)<{ delayTopLine: number }>`
animation: ${showBottomText} calc(0.5s * ${props => props.numOfLine}) forwards;
animation-delay: calc(0.7s * ${props => props.delayTopLine});
transform: translateY(calc(-100% * ${props => props.numOfLine}));
`;
const TextStyle = styled.p<{ color: string }>`
font-family: Roboto, Arial, sans-serif;
font-size: 12vmin;
color: ${props => props.color};
`;
export const TextAnimation = () => {
return (
<>
<Section>
<TopAnimateBlock numOfLine={2}>
<TextStyle color="grey">mimicking</TextStyle>
<TextStyle color="white">apple's design</TextStyle>
</TopAnimateBlock>
</Section>
<Section>
<BottomAnimateBlock numOfLine={1} delayTopLine={2}>
<TextStyle color="white">for the win!</TextStyle>
</BottomAnimateBlock>
</Section>
</>
);
};
If we want to animate 3 lines instead of 2, just add / change:
Add new TextStyle component
Change from 2 to 3 numOfLine in TopAnimateBlock and delayTopLine in BottomAnimateBlock
And replace keyframes to this fragment:
const showTopText = keyframes`
0% { transform: translate3d(0, 100% , 0); }
25%, 40% { transform: translate3d(0, 66%, 0); }
60%, 75% { transform: translate3d(0, 33%, 0); }
100% { transform: translate3d(0, 0, 0); }
`;