Wasp-lang•4d ago

blur while animating

This have nothing to do with wasp, I want make the AppNavBar a little dynamique when the user scroll but the header becomes blur, any suggetion? context

message.txt

2 Replies

kapa.ai•4d ago

Hi @LifeTaker. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I apologize, but I'm specifically tuned to answer questions about Wasp, the Rails-like framework for React, Node.js, and Prisma. Your question about animating and blurring an AppNavBar doesn't seem to be directly related to Wasp. If you have any questions about Wasp's features, setup, or usage, I'd be happy to help with those. For your current question about animation and blurring effects, you might want to consult general React or CSS animation resources, as this is more of a frontend styling issue rather than something specific to Wasp. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @LifeTaker, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

NEROX•3d ago

I like this providen by Cursor:

// ... existing code ...

  return (
    <>
      <div className="h-16" />
      
      <motion.header
        initial={{ y: 0 }}
        animate={{ 
          y: 0, 
          scale: isScrolled ? 0.98 : 1,
        }}
        transition={{ duration: 0.4, ease: "easeInOut" }} {/* Transición más suave */}
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-in-out
          ${isScrolled 
            ? 'mx-auto max-w-7xl mt-2 rounded-2xl border border-gray-800/30 bg-black/70 backdrop-blur-xl backdrop-saturate-150 shadow-xl shadow-purple-950/30' 
            : 'w-full bg-black'
          }`}
      >
        <nav className="container mx-auto px-4 py-3">
// ... existing code ...

// ... existing code ...

  return (
    <>
      <div className="h-16" />
      
      <motion.header
        initial={{ y: 0 }}
        animate={{ 
          y: 0, 
          scale: isScrolled ? 0.98 : 1,
        }}
        transition={{ duration: 0.4, ease: "easeInOut" }} {/* Transición más suave */}
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-in-out
          ${isScrolled 
            ? 'mx-auto max-w-7xl mt-2 rounded-2xl border border-gray-800/30 bg-black/70 backdrop-blur-xl backdrop-saturate-150 shadow-xl shadow-purple-950/30' 
            : 'w-full bg-black'
          }`}
      >
        <nav className="container mx-auto px-4 py-3">
// ... existing code ...

Gaming

Programming

blur while animating