refactor: replace GSAP animations with CSS animations across components
- Updated RootLayout to include a noise overlay class. - Refactored LiveModerationFeed to use CSS animations for item entry. - Simplified AmbientCanvas by removing WebGL and using pure CSS for ambient effects. - Converted Chatbot to use CSS for floating window animations. - Updated Card component to include a gradient border. - Refactored PageTransition to use CSS for fade-scale animations. - Enhanced SectionHeader with reveal-up animation class. - Replaced GSAP animations in NavRail with CSS animations for item entry. - Refactored VoiceStage to use CSS for speaker node animations and pulse rings. - Removed GSAP dependencies from use-gsap-animation hook, implementing CSS-based stagger reveal.
This commit is contained in:
@@ -1,7 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import {
|
||||
Bot,
|
||||
Loader2,
|
||||
@@ -17,10 +15,6 @@ import { useChatbotUserId } from "@/hooks/use-chatbot-user";
|
||||
import { chatbotApi } from "@/lib/api";
|
||||
import { formatRelativeTime } from "@/lib/format";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
}
|
||||
|
||||
interface ChatMessage {
|
||||
id: string;
|
||||
sender: "user" | "bot";
|
||||
@@ -72,20 +66,15 @@ export function Chatbot() {
|
||||
}
|
||||
});
|
||||
|
||||
// GSAP animation for floating window
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!containerRef.current) return;
|
||||
if (open) {
|
||||
gsap.fromTo(
|
||||
containerRef.current,
|
||||
{ opacity: 0, scale: 0.95, y: 15 },
|
||||
{ opacity: 1, scale: 1, y: 0, duration: 0.25, ease: "power2.out" },
|
||||
);
|
||||
}
|
||||
},
|
||||
{ dependencies: [open], scope: containerRef },
|
||||
);
|
||||
// CSS animation for floating window open
|
||||
useEffect(() => {
|
||||
const el = containerRef.current;
|
||||
if (!el || !open) return;
|
||||
el.style.animation = "fade-scale-in 0.25s ease-out forwards";
|
||||
return () => {
|
||||
el.style.removeProperty("animation");
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const handleSend = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
Reference in New Issue
Block a user