Skip to content

Instantly share code, notes, and snippets.

@chrislaughlin
Created July 15, 2020 22:21
Show Gist options
  • Save chrislaughlin/9b2105af7e41e1001d7086862de7b6c2 to your computer and use it in GitHub Desktop.
Save chrislaughlin/9b2105af7e41e1001d7086862de7b6c2 to your computer and use it in GitHub Desktop.
Typewritter
//Letter.js
import React from 'react';
import styled, { keyframes } from "styled-components";
const grow = (fromScale, toScale, fromRotation, toRotation) => keyframes`
from {
transform: rotate(${fromRotation}deg) scale(${fromScale});
}
to {
transform: rotate(${toRotation}deg) scale(${toScale});
}
`;
const StyledLitter = styled.div`
animation: 2s ${props => grow(props.from, props.to, props.fromRotation, props.toRotation)} forwards;
margin: 0 5px 0 5px;
font-size: 100px;
`;
const Letter = ({ children }) => {
const fromScale = (Math.random() * (0.5 - 1.0) + 0.5).toFixed(4);
const toScale = (Math.random() * (1.5 - 2.5) + 1.5).toFixed(4);
const fromRotation = (Math.random() * (-5 - 5) + 5).toFixed(4);
const toRotation = (Math.random() * (-5 - 5) + 5).toFixed(4);
console.log('RENDERED');
return (
<StyledLitter
from={fromScale}
to={toScale}
fromRotation={fromRotation}
toRotation={toRotation}
>
{children}
</StyledLitter>
);
};
export default React.memo(Letter);
//On GO Click
const arr = inputText.split('');
var i = 0
var interval = setInterval(function() {
setDisplayText(curr => `${curr}${arr[i]}`);
if (i++ >= arr.length - 1)
clearInterval(interval);
}, 500)
// MAP display
{
displayText.split('').map((letter, index) => {
if (letter === ' ') {
return <span>{letter}</span>
}
return (
<Letter key={index}>{letter}</Letter>
)
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment