) } export default TextSideFadeInusage;22:T71c,import { useRef } from 'react'; import { motion, useScroll, useTransform, useMotionTemplate } from 'framer-motion'; interface ContentLineProps { content: string; } const ContentLine = ({ content }:ContentLineProps) => { const contentRef = useRef(null); const { scrollYProgress } = useScroll({ target: contentRef, offset: ['start 70%', 'start start'], }); const scrollValue = useTransform(scrollYProgress, [0, 0.15], ['100%', '0%']); const clipPathVal = useMotionTemplate`inset(0% ${scrollValue} 0% 0%)`; return ( {content} ); }; interface TextHighlightingProps { content: string[]; } const TextHighlighting = ({ content }:TextHighlightingProps) => { return (

{content.map((item) => ( ))}

); }; //export default TextHighlighting; /*===============================================================================================*/ /* UNCOMMENT ↑↑↑ this ↑↑↑ export and DELETE ↓↓↓ all code below ↓↓↓ (it is just example of usage) */ /*===============================================================================================*/ const TextHighlightingUsage = () => { return (

); }; export default TextHighlightingUsage;23:T59b,import { motion } from 'framer-motion'; interface TypingTextProps{ text: string; textStyles: any; } const containerVariant = { hidden: {

Sections

Components

Spring

Find the component you need!

Bottom Fade In

Find the component you need!

Sides Fade In

Highlighting

Typing