diff --git a/packages/lib/src/Reveal.tsx b/packages/lib/src/Reveal.tsx index e83c76a..6ce1bee 100644 --- a/packages/lib/src/Reveal.tsx +++ b/packages/lib/src/Reveal.tsx @@ -9,10 +9,6 @@ import { getAnimationCss } from "./utils/animations"; import { isNullable, isStringLike } from "./utils/guards"; import { matchIf, matchIfOrNull } from "./utils/patterns"; -function hideWhen(condition: boolean) { - return matchIfOrNull(() => ({ opacity: 0 }))(condition); -} - export interface RevealProps { /** * Stagger its children animations. @@ -156,13 +152,9 @@ export const Reveal: React.FC = (props) => { ref={ref} className={cx(childClassName, node.props.className)} css={matchIfOrNull(() => animationStyles)(inView)} - style={Object.assign( - {}, - childStyle, - node.props.style, - hideWhen(!inView), - { animationDelay: nodeDelay + "ms" } - )} + style={Object.assign({}, childStyle, node.props.style, { + animationDelay: nodeDelay + "ms", + })} /> )} @@ -247,9 +239,9 @@ const TextReveal: React.FC< animationStyles)(inView)} - style={Object.assign({}, hideWhen(!inView), { + style={{ animationDelay: delay + index * duration * damping + "ms", - })} + }} > {char} @@ -284,7 +276,7 @@ const FragmentReveal: React.FC< ref={ref} className={className} css={matchIfOrNull(() => animationStyles)(inView)} - style={Object.assign({}, style, hideWhen(!inView))} + style={style} > {children}