framer motion stuff

So I've got this title thingy
'use client';

import { bodoni_moda } from '@/lib/fonts';
import { cn } from '@/lib/utils';
import {
motion,
useTransform,
useMotionValueEvent,
useScroll,
} from 'framer-motion';
export default function HeroTitle({
className,
...props
}: React.HTMLAttributes<HTMLElement>) {
const { scrollYProgress } = useScroll();
const marginLeft = useTransform(scrollYProgress, [0, 1], ['5%', '35%']);
return (
<motion.h1
className={cn(
bodoni_moda.className,
'break-all text-5xl sm:text-7xl lg:text-9xl w-full leading-[1.15] md:leading-[1.25] lg:leading-[1.35] uppercase',
)}
>
<motion.span style={{ marginLeft }}>J</motion.span>
ust simple and elegant authentication in your hands
</motion.h1>
);
}
'use client';

import { bodoni_moda } from '@/lib/fonts';
import { cn } from '@/lib/utils';
import {
motion,
useTransform,
useMotionValueEvent,
useScroll,
} from 'framer-motion';
export default function HeroTitle({
className,
...props
}: React.HTMLAttributes<HTMLElement>) {
const { scrollYProgress } = useScroll();
const marginLeft = useTransform(scrollYProgress, [0, 1], ['5%', '35%']);
return (
<motion.h1
className={cn(
bodoni_moda.className,
'break-all text-5xl sm:text-7xl lg:text-9xl w-full leading-[1.15] md:leading-[1.25] lg:leading-[1.35] uppercase',
)}
>
<motion.span style={{ marginLeft }}>J</motion.span>
ust simple and elegant authentication in your hands
</motion.h1>
);
}
I add some margin to make it move to the side when scrolling which works, but it's obviously very jumpy? It's not smooth moving the whole thing around
1 Reply
barry
barryOP16mo ago
Create User App
Generated by create user app
Want results from more Discord servers?
Add your server