morten/morten-olsen.github.io
1
0
Fork 0
mirror of https://github.com/morten-olsen/morten-olsen.github.io.git synced 2026-02-08 01:46:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improved animation

Browse Source
This commit is contained in:
Morten Olsen
2021-08-27 21:51:54 +02:00
parent 5f3017c7cf
commit 52b2572949
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/Me.tsx
View File

@@ -18,9 +18,10 @@ const ImageWrapper = styled.div<{loaded: boolean}>`
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
position: relative; position: relative;
transition: opacity 1s; transition: all .6s;
transform: rotateY(180deg); transform: rotateY(180deg);
opacity: ${({ loaded }) => loaded ? '1' : '0'}; opacity: ${({ loaded }) => loaded ? '1' : '0'};
transform: ${({ loaded }) => loaded ? 'rotateY(180deg)' : 'rotateY(90deg) translateX(-300px)'};
`; `;
const Spacer = styled.div` const Spacer = styled.div`
@@ -78,7 +79,6 @@ const Image = styled.img<{blurDataURL: string}>`
const Me: React.FC<{}> = () => { const Me: React.FC<{}> = () => {
const imgRef = useRef<HTMLImageElement>(); const imgRef = useRef<HTMLImageElement>();
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
console.log('l', loaded);
useEffect(() => { useEffect(() => {
if (imgRef.current) { if (imgRef.current) {
setLoaded(imgRef.current.complete); setLoaded(imgRef.current.complete);