{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/mEs9ailfHUimhGVaelzV/GGPXph19XeKH0qLae8Dn/Text_Color_Animation.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";import{motion,useAnimation}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";export default function TextColorAnimation({text,fontSize,fontFamily,fontWeight,textAlign,color01,color02,color03,durationFirst,durationSecond,delay,replays}){const controls=useAnimation();const textRef=useRef();useEffect(()=>{const observer=new IntersectionObserver(async([entry])=>{if(entry.isIntersecting){await new Promise(resolve=>setTimeout(resolve,delay*1e3))// delay before animation starts\n;controls.start(\"visible\");}else if(!entry.isIntersecting&&replays){controls.start(\"hidden\");}});observer.observe(textRef.current);return()=>observer.disconnect();},[controls,delay,replays]);return /*#__PURE__*/_jsx(\"div\",{style:{fontSize:`${fontSize}px`,fontFamily,fontWeight,width:\"100%\",whiteSpace:\"nowrap\",color:color01,textAlign},ref:textRef,children:/*#__PURE__*/_jsxs(\"span\",{style:{position:\"relative\",display:\"inline-block\"},children:[text,/*#__PURE__*/_jsx(motion.span,{style:{position:\"absolute\",overflow:\"hidden\",whiteSpace:\"nowrap\",color:color02,top:0,left:0,width:\"0%\"},animate:controls,initial:{width:\"0%\"},variants:{visible:{width:\"100%\"},hidden:{width:\"0%\"}},transition:{duration:durationFirst},children:text}),/*#__PURE__*/_jsx(motion.span,{style:{position:\"absolute\",overflow:\"hidden\",whiteSpace:\"nowrap\",color:color03,top:0,left:0,width:\"0%\"},animate:controls,initial:{width:\"0%\"},variants:{visible:{width:\"100%\"},hidden:{width:\"0%\"}},transition:{duration:durationSecond,delay:durationFirst},children:text})]})});}addPropertyControls(TextColorAnimation,{text:{type:ControlType.String,defaultValue:\"Hello, World!\"},fontSize:{type:ControlType.Number,defaultValue:16,min:1,max:200,unit:\"px\"},fontFamily:{type:ControlType.String,defaultValue:\"Arial\"},fontWeight:{type:ControlType.Enum,defaultValue:\"400\",options:[\"100\",\"200\",\"300\",\"400\",\"500\",\"600\",\"700\",\"800\",\"900\"]},textAlign:{title:\"Text Align\",type:ControlType.Enum,displaySegmentedControl:true,optionTitles:[\"Left\",\"Center\",\"Right\"],options:[\"left\",\"center\",\"right\"]},color01:{title:\"Base Color\",type:ControlType.Color,defaultValue:\"#333\"},color02:{title:\"First Overlay Color\",type:ControlType.Color,defaultValue:\"#fff\"},color03:{title:\"Second Overlay Color\",type:ControlType.Color,defaultValue:\"#ff0000\"},durationFirst:{title:\"First Duration\",type:ControlType.Number,defaultValue:1,min:.1,max:10,step:.1},durationSecond:{title:\"Second Duration\",type:ControlType.Number,defaultValue:1.5,min:.1,max:10,step:.1},delay:{title:\"Delay\",type:ControlType.Number,defaultValue:0,min:0,max:10,step:.1},replays:{title:\"Replays\",type:ControlType.Boolean,defaultValue:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TextColorAnimation\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Text_Color_Animation.map"],
  "mappings": "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",
  "names": ["TextColorAnimation", "text", "fontSize", "fontFamily", "fontWeight", "textAlign", "color01", "color02", "color03", "durationFirst", "durationSecond", "delay", "replays", "controls", "useAnimation", "textRef", "pe", "ue", "observer", "entry", "resolve", "p", "u", "motion", "addPropertyControls", "ControlType"]
}