{"version":3,"file":"ScrollAnimationParagraph.fXxkhika.mjs","names":["useRef"],"sources":["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":"gPAQG,SAAwB,EAAyB,EAAM,CAAC,GAAK,CAAC,gBAAc,oBAAkB,YAAU,WAAS,aAAW,cAAY,EAAW,CAAC,wBAAsB,uBAAqB,sBAAoB,sBAAoB,EAAwB,EAAU,EAAoB,EAAUA,GAAQ,CAAM,CAAC,mBAAiB,EAAU,CAAC,OAAO,EAC5V,OAAO,CAAC,GAAG,EAAsB,GAAG,IAAuB,GAAG,EAAoB,GAAG,IAAqB,CAAC,CAAC,CAAO,EAAM,EAAU,MAAM,IAAI,CAA0O,OAAoB,EAAK,IAAI,CAAC,MAAlP,CAAC,SAAS,SAAS,QAAQ,UAAU,QAAQ,OAAO,SAAS,OAAO,WAAW,UAAU,WAAW,SAAS,eAAe,SAAS,MAAM,EAAmB,WAAoB,aAAsB,aAAW,CAAoD,IAAI,EAAU,SAAS,EAAM,KAAK,EAAK,IAAI,CAAC,IAAM,EAAM,EAAE,EAAM,OAAsC,OAAoB,EAAK,EAAK,CAAC,MAAM,CAAC,EAA3D,EAAM,EAAE,EAAM,OAAuD,CAAC,SAAS,EAAgB,SAAS,EAAK,CAAC,EAAE,EAAG,CAAC,CAAC,oBAPvjB,IAA0B,IAAyD,IAAoD,CAOwb,GAAM,CAAC,WAAS,QAAM,cAAY,CAAC,IAAM,EAAQ,EAAa,EAAS,EAAM,CAAC,EAAE,EAAE,CAAC,CAAkI,OAAoB,EAAM,OAAO,CAAC,MAAlJ,CAAC,YAAY,OAAO,UAAU,OAAO,SAAS,WAAW,CAA0G,SAAS,CAAc,EAAK,OAAO,CAAC,MAA1H,CAAC,SAAS,WAAW,QAAQ,KAAK,CAAoH,WAAS,CAAC,CAAc,EAAK,EAAO,KAAK,CAAC,MAAM,CAAC,UAAQ,CAAU,WAAS,CAAC,CAAC,CAAC,CAAC,EAAG,EAAoB,EAAyB,CAAC,cAAc,CAAC,KAAK,EAAY,OAAO,MAAM,iBAAiB,aAAa,8HAA8H,CAAC,kBAAkB,CAAC,KAAK,EAAY,OAAO,SAAS,CAAC,sBAAsB,CAAC,KAAK,EAAY,KAAK,MAAM,0BAA0B,wBAAwB,GAAK,0BAA0B,aAAa,QAAQ,CAAC,QAAQ,SAAS,MAAM,CAAC,aAAa,CAAC,QAAQ,SAAS,MAAM,CAAC,aAAa,QAAQ,CAAC,qBAAqB,CAAC,KAAK,EAAY,OAAO,MAAM,yBAAyB,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,aAAa,GAAG,CAAC,oBAAoB,CAAC,KAAK,EAAY,KAAK,MAAM,wBAAwB,wBAAwB,GAAK,0BAA0B,aAAa,QAAQ,CAAC,QAAQ,SAAS,MAAM,CAAC,aAAa,CAAC,QAAQ,SAAS,MAAM,CAAC,aAAa,MAAM,CAAC,mBAAmB,CAAC,KAAK,EAAY,OAAO,MAAM,uBAAuB,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,aAAa,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,IAAI,EAAE,IAAI,IAAI,KAAK,GAAG,aAAa,GAAG,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,IAAI,IAAI,IAAI,IAAI,KAAK,GAAG,aAAa,IAAI,CAAC,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,IAAI,EAAE,IAAI,GAAG,KAAK,GAAG,aAAa,EAAE,CAAC,CAAC"}