Looking for Guidance & Context?
Currently in the process of developing my personal website, I encountered a challenge with centering this particular container. For reference, you can view a similar example on Aceternity. Upon attempting to modify this centered container, an issue arose where the container would jump unexpectedly.
To address this issue, I have crafted a solution which is available on Replit. This code includes detailed comments explaining how it operates.
The Challenge at Hand
Intermittently (approximately every 1-7 cycles), the animation appears to malfunction by creating two instances of itself momentarily, as depicted below:
Despite numerous attempts to pinpoint the root cause, the glitch persists for just one frame. I am genuinely puzzled and have been grappling with this issue for some time now.
File Location Affected
./src/app/ui/title-section/vanishing-words.tsxPossible Explanations
- It is plausible that multiple nested motions are inadvertently impacting each other - Although I verified if
onExitCompleteis being triggered multiple times, there was no evidence supporting this. - Enabling
b1exacerbates the situation. Assessment of secondary bug - Testing conducted on Chrome and Safari browsers yielded consistent results.
Suspected Code Fragment
I have condensed the code to its essential form but continue to encounter issues.
<AnimatePresence
onExitComplete={() => {
// 5. The animation loops
setIsAnimating(false);
}}
>
<motion.div
key={`${currentWord}-${xOffSet}`}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
ref={divRef}
transition={{ duration: 1 }}
initial={{ x: xOffSet }}
animate={{ x: 0 }}
>
<p>{relativeClause}</p>
<motion.div
key={currentWord}
>
{/* b1: Swapping out the div above with the one below seems to make it worse */}
{/* <motion.div
key={currentWord}
initial={{
opacity: 0,
y: 10,
}}
animate={{
opacity: 1,
y: 0,
}}
transition={{
duration: 0.4,
ease: "easeInOut",
type: "spring",
stiffness: 100,
damping: 10,
}}
exit={{
opacity: 0,
y: -40,
x: 40,
filter: "blur(8px)",
scale: 2,
position: "absolute",
}}
> */}
{currentWord.split("").map((letter, index) => (
<motion.span
key={currentWord + index}
initial={{
opacity: 0,
y: 10,
filter: "blur(8px)",
}}
animate={{
opacity: 1,
y: 0,
filter: "blur(0px)",
}}
transition={{
delay: index * 0.08,
duration: 0.3,
}}
className={clsx("inline-block", letter === " " && "w-1")}
>
{letter}
</motion.span>
))}
</motion.div>
</motion.div>
</AnimatePresence>