Fix TypeScript errors in MemeAnimation

Resolved TypeScript errors in `MemeAnimation.tsx` related to type assignments for animation properties. Adjusted the types to ensure compatibility with the expected string types.
[skip gpt_engineer]

src/components/game/animations/MemeAnimation.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 
 interface MemeSymbol {
   id: number;
@@ -54,6 +54,7 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
       </div>
 
       {/* Meme symbols with viral spread effect */}
+      <AnimatePresence>
         {memeSymbols.map((meme) => (
           <motion.div
             key={meme.id}
@@ -64,18 +65,9 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
               scale: 0,
               opacity: 0
             }}
-          animate={[
+            animate={{
-            // First appear and pulse
-            {
               scale: meme.scale,
               opacity: 1,
-              transition: {
-                delay: meme.delay,
-                duration: 0.3
-              }
-            },
-            // Then spread out with copies
-            {
               x: [
                 `${meme.x}%`,
                 `${meme.x + (Math.random() * 40 - 20)}%`,
@@ -86,15 +78,14 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
                 `${meme.y + (Math.random() * 40 - 20)}%`,
                 `${meme.y + (Math.random() * 60 - 30)}%`
               ],
-              transition: {
+            }}
-                delay: meme.delay + 0.3,
+            transition={{
+              delay: meme.delay,
               duration: 2,
               repeat: Infinity,
               repeatType: "reverse",
               ease: "easeInOut"
-              }
+            }}
-            }
-          ]}
           >
             {meme.symbol}
             
@@ -116,6 +107,7 @@ export const MemeAnimation = ({ className = '' }: { className?: string }) => {
             </motion.div>
           </motion.div>
         ))}
+      </AnimatePresence>
 
       {/* Floating engagement indicators */}
       {[...Array(5)].map((_, i) => (