TTC
Theo's Typesafe Cult•2y ago
barry

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
barryOP•2y ago
I hosted it here https://lucia-auth-template.vercel.app/
Create User App
Generated by create user app

Did you find this page helpful?