add styled link animation
This commit is contained in:
parent
048894d7d0
commit
8c369d137a
|
@ -1,9 +1,19 @@
|
|||
import styled, { css } from 'styled-components';
|
||||
import styled, { keyframes, css } from 'styled-components';
|
||||
import tw from 'twin.macro';
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
// Almost entirely copy pasted from https://gatsbyjs.org/ oops
|
||||
|
||||
const showBar = keyframes`
|
||||
from {
|
||||
transform: translateX(-110px);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-92px);
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledLink = styled.span`
|
||||
${tw`focus:outline-none transition ease-in-out duration-150 hover:text-blue-700 focus:bg-blue-100 relative flex items-center px-6 py-3 text-sm leading-5`}
|
||||
|
||||
|
@ -24,21 +34,22 @@ const StyledLink = styled.span`
|
|||
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
|
||||
}
|
||||
|
||||
${props =>
|
||||
props.isActive &&
|
||||
css`
|
||||
&::after {
|
||||
transform: ${props =>
|
||||
props.isActive ? 'translateX(-92px)' : 'translateX(-100px)'};
|
||||
width: 100px;
|
||||
border-radius: 4px;
|
||||
${tw`bg-blue-600`}
|
||||
}
|
||||
`}
|
||||
&::after {
|
||||
transform: translateX(-110px);
|
||||
width: 100px;
|
||||
border-radius: 4px;
|
||||
${tw`bg-blue-600`}
|
||||
${({ isActive }) =>
|
||||
isActive &&
|
||||
css`
|
||||
animation: ${showBar} 250ms forwards cubic-bezier(0.4, 0, 0.2, 1);
|
||||
`}
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: scale(0.1);
|
||||
transform: ${({ isActive }) => (isActive ? 'scale(1)' : 'scale(0.1)')};
|
||||
border-radius: 100%;
|
||||
${({ isActive }) => isActive && tw`bg-blue-600`}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
@ -6743,6 +6743,13 @@ gatsby-plugin-google-analytics@^2.3.10:
|
|||
"@babel/runtime" "^7.10.3"
|
||||
minimatch "3.0.4"
|
||||
|
||||
gatsby-plugin-layout@^1.3.10:
|
||||
version "1.3.10"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-plugin-layout/-/gatsby-plugin-layout-1.3.10.tgz#701312dc462da9b15c9abe6748d141a44cd26f73"
|
||||
integrity sha512-iO+aDef4hzJVrIa+LrO3r2FzcM4OdMePb/sDKgmknAeN+sJKH735DdRbk/H/41UREM9rTdwdq+/oFxxlAo3Lmw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.10.3"
|
||||
|
||||
gatsby-plugin-manifest@^2.4.14:
|
||||
version "2.4.14"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.4.14.tgz#9d82fbf81fc568860b1b3cc8cc0bf6cd8513b229"
|
||||
|
|
Reference in a new issue