"use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, useMotionValue, useMotionTemplate, useAnimationControls, } from "framer-motion"; import { useLang, Lang } from "@/lib/lang"; // Sample translations const translations = { en: "I hope this message finds you well. I wanted to follow up on our recent conversation and share the updated document with you. Please let me know if you have any feedback.", tr: "Umarım bu mesaj sizi iyi bulur. Son görüşmemizi takip etmek ve güncellenmiş belgeyi sizinle paylaşmak istedim. Herhangi bir geri bildiriminiz olursa lütfen bana bildirin.", ar: "آمل أن تجدك هذه الرسالة بخير. أردت متابعة محادثتنا الأخيرة ومشاركة المستند المحدث معك. من فضلك، أعلمني إذا كان لديك أي ملاحظات.", }; const SwipeAnimatedTranslator = () => { const { lang } = useLang(); const containerRef = useRef(null); const [containerWidth, setContainerWidth] = useState(0); // Determine the primary source language based on context const sourceLang = lang === "en" ? "tr" : lang; // State to manage both the current and previous texts for the animation const [displayedLangs, setDisplayedLangs] = useState({ current: sourceLang, previous: sourceLang, }); // --- Manual Drag Animation State --- const x = useMotionValue(0); const dragClipPath = useMotionTemplate`polygon(0 0, ${x}px 0, ${x}px 100%, 0 100%)`; // --- Automatic Wipe Animation State --- const wipeControls = useAnimationControls(); // Effect to handle the automatic wipe animation when the language changes useEffect(() => { if (displayedLangs.current !== sourceLang) { // Set the new 'current' and keep the old one as 'previous' setDisplayedLangs((prev) => ({ current: sourceLang, previous: prev.current, })); // Start the wipe animation wipeControls.set({ clipPath: "polygon(0 0, 0% 0, 0% 100%, 0 100%)" }); wipeControls .start({ clipPath: `polygon(0 0, 100% 0, 100% 100%, 0 100%)`, transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] }, }) .then(() => { // After the animation, sync the 'previous' text to the 'current' one setDisplayedLangs((prev) => ({ ...prev, previous: prev.current })); }); } }, [sourceLang, displayedLangs.current, wipeControls]); // Effect to measure container width useEffect(() => { const updateWidth = () => { if (containerRef.current) { const width = containerRef.current.offsetWidth; setContainerWidth(width); x.set(width); } }; updateWidth(); const resizeObserver = new ResizeObserver(updateWidth); if (containerRef.current) resizeObserver.observe(containerRef.current); return () => { if (containerRef.current) resizeObserver.unobserve(containerRef.current); }; }, [x]); return (

{/* Layer 1: English Text (Bottom) */}

{translations.en}

{/* Draggable container that clips all source languages to reveal English */} {/* Layer 2: Previous Source Text */}

{translations[displayedLangs.previous as Lang]}

{/* Layer 3: New Source Text (animates a wipe over the previous text) */}

{translations[displayedLangs.current as Lang]}

{/* Dragger Handle */} {containerWidth > 0 && (

)}

); }; export default SwipeAnimatedTranslator;

Swipe Animated Translator

Preview

Dependencies

Source