{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/opbZ1xh3wZsnebVQEwyL/JAd1lWfIrhmg8dexiSZS/ScrollAnimationParagraph.js"],
  "sourcesContent": ["// Welcome to Code in Framer\n// Get Started: https://www.framer.com/developers/\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useRef}from\"react\";import{useScroll,motion,useTransform}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/developers/#code-components-auto-sizing\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ScrollAnimationParagraph(props){const{paragraphText,animationControls,fontColor,fontSize,fontWeight,lineHeight}=props;const{startParagraphTrigger,startViewportTrigger,endParagraphTrigger,endViewportTrigger}=animationControls;const inputText=paragraphText;const paragraph=useRef();const{scrollYProgress}=useScroll({target:paragraph,// [\"div viewport\", \"div viewport\"]\noffset:[`${startParagraphTrigger} ${startViewportTrigger}`,`${endParagraphTrigger} ${endViewportTrigger}`]});const words=inputText.split(\" \");const paragraphStyle={maxWidth:\"1440px\",padding:\"0px 0px\",display:\"flex\",flexWrap:\"wrap\",fontFamily:\"Poppins\",alignItems:\"center\",justifyContent:\"center\",color:fontColor,fontSize:fontSize,fontWeight:fontWeight,lineHeight:lineHeight};return /*#__PURE__*/_jsx(\"p\",{style:paragraphStyle,ref:paragraph,children:words.map((word,i)=>{const start=i/words.length;const end=start+1/words.length;return /*#__PURE__*/_jsx(Word,{range:[start,end],progress:scrollYProgress,children:word},i);})});}const Word=({children,range,progress})=>{const opacity=useTransform(progress,range,[0,1]);const wordsStyle={marginRight:\"10px\",marginTop:\"10px\",position:\"relative\"};const shadowsStyle={position:\"absolute\",opacity:\".2\"};return /*#__PURE__*/_jsxs(\"span\",{style:wordsStyle,children:[/*#__PURE__*/_jsx(\"span\",{style:shadowsStyle,children:children}),/*#__PURE__*/_jsx(motion.span,{style:{opacity},children:children})]});};addPropertyControls(ScrollAnimationParagraph,{paragraphText:{type:ControlType.String,title:\"Paragraph text\",defaultValue:\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"},animationControls:{type:ControlType.Object,controls:{startParagraphTrigger:{type:ControlType.Enum,title:\"Start Paragraph Trigger\",displaySegmentedControl:true,segmentedControlDirection:\"horizontal\",options:[\"start\",\"center\",\"end\"],optionTitles:[\"Start\",\"Center\",\"End\"],defaultValue:\"start\"},startViewportTrigger:{type:ControlType.Number,title:\"Start Viewport Trigger\",min:0,max:1,step:.01,defaultValue:.5},endParagraphTrigger:{type:ControlType.Enum,title:\"End Paragraph Trigger\",displaySegmentedControl:true,segmentedControlDirection:\"horizontal\",options:[\"start\",\"center\",\"end\"],optionTitles:[\"Start\",\"Center\",\"End\"],defaultValue:\"end\"},endViewportTrigger:{type:ControlType.Number,title:\"End Viewport Trigger\",min:0,max:1,step:.01,defaultValue:.5}}},fontColor:{type:ControlType.Color,title:\"Font Color\",defaultValue:\"#FFFFFF\"},fontSize:{type:ControlType.Number,title:\"Font Size\",min:6,max:100,step:.1,defaultValue:50,unit:\"px\"},fontWeight:{type:ControlType.Number,title:\"Font Weight\",min:100,max:900,step:50,defaultValue:500},lineHeight:{type:ControlType.Number,title:\"Line Height\",min:0,max:10,step:.1,defaultValue:1}})// Styles are written in object syntax\n// Learn more: https://reactjs.org/docs/dom-elements.html#style\n;\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollAnimationParagraph\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollAnimationParagraph.map"],
  "mappings": "qKAAAA,IAQkB,SAARC,EAA0CC,EAAM,CAAC,GAAK,CAAC,cAAAC,EAAc,kBAAAC,EAAkB,UAAAC,EAAU,SAAAC,EAAS,WAAAC,EAAW,WAAAC,CAAU,EAAEN,EAAW,CAAC,sBAAAO,EAAsB,qBAAAC,EAAqB,oBAAAC,EAAoB,mBAAAC,CAAkB,EAAER,EAAwBS,EAAUV,EAAoBW,EAAUC,EAAO,EAAO,CAAC,gBAAAC,CAAe,EAAEC,EAAU,CAAC,OAAOH,EAC5V,OAAO,CAAC,GAAGL,CAAqB,IAAIC,CAAoB,GAAG,GAAGC,CAAmB,IAAIC,CAAkB,EAAE,CAAC,CAAC,EAAQM,EAAML,EAAU,MAAM,GAAG,EAA2O,OAAoBM,EAAK,IAAI,CAAC,MAAlP,CAAC,SAAS,SAAS,QAAQ,UAAU,QAAQ,OAAO,SAAS,OAAO,WAAW,UAAU,WAAW,SAAS,eAAe,SAAS,MAAMd,EAAU,SAASC,EAAS,WAAWC,EAAW,WAAWC,CAAU,EAAqD,IAAIM,EAAU,SAASI,EAAM,IAAI,CAACE,EAAKC,IAAI,CAAC,IAAMC,EAAMD,EAAEH,EAAM,OAAaK,EAAID,EAAM,EAAEJ,EAAM,OAAO,OAAoBC,EAAKK,EAAK,CAAC,MAAM,CAACF,EAAMC,CAAG,EAAE,SAASP,EAAgB,SAASI,CAAI,EAAEC,CAAC,CAAE,CAAC,CAAC,CAAC,CAAE,CAAC,IAAMG,EAAK,CAAC,CAAC,SAAAC,EAAS,MAAAC,EAAM,SAAAC,CAAQ,IAAI,CAAC,IAAMC,EAAQC,EAAaF,EAASD,EAAM,CAAC,EAAE,CAAC,CAAC,EAAmI,OAAoBI,EAAM,OAAO,CAAC,MAAlJ,CAAC,YAAY,OAAO,UAAU,OAAO,SAAS,UAAU,EAA2G,SAAS,CAAcX,EAAK,OAAO,CAAC,MAA1H,CAAC,SAAS,WAAW,QAAQ,IAAI,EAA4G,SAASM,CAAQ,CAAC,EAAeN,EAAKY,EAAO,KAAK,CAAC,MAAM,CAAC,QAAAH,CAAO,EAAE,SAASH,CAAQ,CAAC,CAAC,CAAC,CAAC,CAAE,EAAEO,EAAoB/B,EAAyB,CAAC,cAAc,CAAC,KAAKgC,EAAY,OAAO,MAAM,iBAAiB,aAAa,6HAA6H,EAAE,kBAAkB,CAAC,KAAKA,EAAY,OAAO,SAAS,CAAC,sBAAsB,CAAC,KAAKA,EAAY,KAAK,MAAM,0BAA0B,wBAAwB,GAAK,0BAA0B,aAAa,QAAQ,CAAC,QAAQ,SAAS,KAAK,EAAE,aAAa,CAAC,QAAQ,SAAS,KAAK,EAAE,aAAa,OAAO,EAAE,qBAAqB,CAAC,KAAKA,EAAY,OAAO,MAAM,yBAAyB,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,aAAa,EAAE,EAAE,oBAAoB,CAAC,KAAKA,EAAY,KAAK,MAAM,wBAAwB,wBAAwB,GAAK,0BAA0B,aAAa,QAAQ,CAAC,QAAQ,SAAS,KAAK,EAAE,aAAa,CAAC,QAAQ,SAAS,KAAK,EAAE,aAAa,KAAK,EAAE,mBAAmB,CAAC,KAAKA,EAAY,OAAO,MAAM,uBAAuB,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,aAAa,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAKA,EAAY,MAAM,MAAM,aAAa,aAAa,SAAS,EAAE,SAAS,CAAC,KAAKA,EAAY,OAAO,MAAM,YAAY,IAAI,EAAE,IAAI,IAAI,KAAK,GAAG,aAAa,GAAG,KAAK,IAAI,EAAE,WAAW,CAAC,KAAKA,EAAY,OAAO,MAAM,cAAc,IAAI,IAAI,IAAI,IAAI,KAAK,GAAG,aAAa,GAAG,EAAE,WAAW,CAAC,KAAKA,EAAY,OAAO,MAAM,cAAc,IAAI,EAAE,IAAI,GAAG,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC",
  "names": ["init_ssg_sandbox_shims", "ScrollAnimationParagraph", "props", "paragraphText", "animationControls", "fontColor", "fontSize", "fontWeight", "lineHeight", "startParagraphTrigger", "startViewportTrigger", "endParagraphTrigger", "endViewportTrigger", "inputText", "paragraph", "pe", "scrollYProgress", "useScroll", "words", "p", "word", "i", "start", "end", "Word", "children", "range", "progress", "opacity", "useTransform", "u", "motion", "addPropertyControls", "ControlType"]
}