Learn FRAMER with Real Code Examples

# framer/demo/Component.jsx
import * as React from 'react';
import { Frame, animate } from 'framer';

export function MovingBox() {
    const [x, setX] = React.useState(0);
    React.useEffect(() => {
        animate(x, 300, { duration: 2, onUpdate: v => setX(v) });
    }, []);
    return <Frame width={100} height={100} backgroundColor="blue" x={x} />;
}

A basic Framer component that animates a box moving horizontally on render.

# framer/demo/FadeIn.jsx
import * as React from 'react';
import { Frame, useAnimation } from 'framer';

export function FadeInBox() {
    const controls = useAnimation();
    React.useEffect(() => {
        controls.start({ opacity: 1, duration: 1.5 });
    }, []);
    return <Frame width={120} height={120} backgroundColor="red" opacity={0} animate={controls} />;
}

A box that fades in smoothly using Framer motion values.

# framer/demo/ScaleTap.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function ScaleTap() {
    return (
        <Frame width={120} height={120} backgroundColor="green" whileTap={{ scale: 0.8 }} />
    );
}

A box that scales when tapped.

# framer/demo/DragBox.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function DragBox() {
    return <Frame width={100} height={100} drag backgroundColor="orange" />;
}

A draggable Framer box.

# framer/demo/HoverRotate.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function HoverRotate() {
    return (
        <Frame
        width={120}
        height={120}
        backgroundColor="purple"
        whileHover={{ rotate: 20, backgroundColor: 'pink' }}
        />
    );
}

A hover effect that changes color and rotates.

# framer/demo/SpringBounce.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function SpringBounce() {
    return <Frame width={100} height={100} backgroundColor="cyan" animate={{ y: 100 }} transition={{ type: 'spring', stiffness: 150 }} />;
}

A box that uses a spring bounce animation on mount.

# framer/demo/Looping.jsx
import * as React from 'react';
import { Frame, useAnimation } from 'framer';

export function LoopingBox() {
    const controls = useAnimation();
    React.useEffect(() => {
        async function loop() {
        while (true) {
        await controls.start({ x: 150, duration: 1 });
        await controls.start({ x: 0, duration: 1 });
        }
        }
        loop();
    }, []);
    return <Frame width={100} height={100} backgroundColor="yellow" animate={controls} />;
}

A looping left-right animation.

# framer/demo/RotateCycle.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function RotateCycle() {
    return <Frame width={120} height={120} backgroundColor="teal" animate={{ rotate: 360 }} transition={{ repeat: Infinity, duration: 2 }} />;
}

A rotating square that loops forever.

# framer/demo/LayoutAnimation.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function LayoutAnimation() {
    const [big, setBig] = React.useState(false);
    return (
        <Frame
        backgroundColor="brown"
        layout
        width={big ? 200 : 100}
        height={big ? 200 : 100}
        onTap={() => setBig(!big)}
        />
    );
}

A layout-animating box that changes size on click.

# framer/demo/GestureCombo.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function GestureCombo() {
    return (
        <Frame
        width={140}
        height={140}
        backgroundColor="silver"
        drag
        whileHover={{ scale: 1.1 }}
        whileTap={{ rotate: 15 }}
        />
    );
}

Combines tap, hover, and drag gestures.