moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add new Pulse effect in vanilla CSS

This commit is contained in:
Justin 2022-04-25 12:39:33 -04:00
parent 033407f1c7
commit 272c3c0f6d
3 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/features/public_layout/components/header.tsx
View File

@ -72,7 +72,7 @@ const Header = () => {
<nav className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8' aria-label='Header'>
<div className='w-full py-6 flex items-center justify-between border-b border-indigo-500 lg:border-none'>
<div className='flex items-center justify-center relative w-36'>
<div className='hidden sm:block absolute z-0 left-0 top-0 -ml-[330px] -mt-[400px]'>
<div className='hidden sm:block absolute z-0 -top-24 -left-6'>
<Pulse />
</div>
<Link to='/' className='z-10'>

44
app/soapbox/features/public_layout/components/pulse.tsx
View File

@ -1,38 +1,14 @@
import React, { useEffect, useState } from 'react';
import React from 'react';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
const LottieAsync = () => {
return import(/* webpackChunkName: "lottie" */'soapbox/components/lottie');
};
const fetchAnimationData = () => {
return import(/* webpackChunkName: "lottie" */'images/circles.json');
};
/** Homepage pulse animation chunked to not bloat the entrypoint */
const Pulse: React.FC = () => {
const [animationData, setAnimationData] = useState<any>(undefined);
useEffect(() => {
fetchAnimationData()
.then(({ default: json }) => {
setAnimationData(json);
})
.catch(console.error);
}, []);
if (animationData) {
return (
<BundleContainer fetchComponent={LottieAsync}>
{Component => (
<Component animationData={animationData} width={800} height={800} />
)}
</BundleContainer>
const Pulse = () => (
<div className='relative'>
<div className='relative w-48 h-48 bg-white rounded-full'>
<div className='animate-pulse-scale-4 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
<div className='animate-pulse-scale-3 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
<div className='animate-pulse-scale-2 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
<div className='animate-pulse-scale-1 absolute top-0 left-0 w-full h-full rounded-full bg-primary-600/25 opacity-0 -z-[1] pointer-events-none' />
</div>
</div>
);
} else {
return null;
}
};
export default Pulse;

24
tailwind.config.js
View File

@ -47,6 +47,30 @@ module.exports = {
'bg-shape-1': true,
'bg-shape-2': true,
}),
animation: {
'pulse-scale-4': 'pulse-scale-4 3s linear infinite',
'pulse-scale-3': 'pulse-scale-3 3s 0.5s linear infinite',
'pulse-scale-2': 'pulse-scale-2 3s 1s linear infinite',
'pulse-scale-1': 'pulse-scale-1 3s 1.5s linear infinite',
},
keyframes: {
'pulse-scale-4': {
from: { opacity: '0.4' },
to: { opacity: 0, transform: 'scale(4)' },
},
'pulse-scale-3': {
from: { opacity: '0.4' },
to: { opacity: 0, transform: 'scale(3.5)' },
},
'pulse-scale-2': {
from: { opacity: '0.4' },
to: { opacity: 0, transform: 'scale(3)' },
},
'pulse-scale-1': {
from: { opacity: '0.4' },
to: { opacity: 0, transform: 'scale(2.5)' },
},
},
},
},
plugins: [