I'm on the hunt for a JavaScript library that can help me animate two words blending together into a portmanteau, like how 'breakfast' and 'lunch' combine to make 'brunch.' I'm aiming for a smooth and simple animation that shows the new word emerging while the unused letters fade away. I tried using gsap but it ended up looking really dated, kind of like 90s Word Art. I'm considering using a typewriter effect where the words 'breakfast' and 'lunch' are typed out, then the extra letters are deleted. I'd like the words to be in different colors as well. Any suggestions?
1 Answer
It sounds like you're after a clean animation! If you're looking for simplicity, you might want to check out CSS animations for this. You can achieve this effect using a combination of keyframes to animate the opacity and position of characters. You can have each word fade in and out as the new word takes shape. Here's a basic idea: animate frames that start with 'breakfast' and end with 'brunch' while removing the letters in-between.
Could you share a snippet of how to get started with that CSS? It sounds interesting!