theoludwig/.profile
1
1
Fork 0
mirror of https://github.com/theoludwig/theoludwig.git synced 2025-05-29 22:37:44 +02:00
Code Issues Releases Activity

chore: maintenance

Browse Source
This commit is contained in:
Divlo
2021-12-04 15:52:51 +01:00
parent e5f4615f7f
commit 729e540d04
69 changed files with 10182 additions and 18460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/design/RevealFade.tsx
View File

@ -10,7 +10,8 @@ export const RevealFade: React.FC = (props) => {
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('reveal-visible')
entry.target.className =
'opacity-100 visible translate-y-0 transition-all duration-700 ease-in-out'
observer.unobserve(entry.target)
}
})
@ -25,26 +26,8 @@ export const RevealFade: React.FC = (props) => {
}, [])
return (
<>
<div ref={htmlElement} className='reveal'>
{children}
</div>
<style jsx>
{`
.reveal {
opacity: 0;
visibility: hidden;
transform: translateY(-30px);
}
.reveal-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: all 500ms ease-out 100ms;
}
`}
</style>
</>
<div ref={htmlElement} className='invisible -translate-y-7 opacity-0'>
{children}
</div>
)
}