Looping Animation - Framer Typing CST Test
Loading…
Looping Animation — Framer Code
A looping left-right animation.
# 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} />;
}Framer Language Guide
Framer is a modern web-based design and prototyping tool that allows designers and developers to create interactive, animated, and responsive UI prototypes with code or visual editing. It combines design, animation, and React-based components into a single workflow.
Primary Use Cases
- ▸Interactive UI/UX prototypes
- ▸Design-to-code workflows with React
- ▸Animated web and mobile components
- ▸Responsive and adaptive layout testing
- ▸Rapid testing of user interactions and gestures
Notable Features
- ▸Code-based and visual design in one tool
- ▸Responsive design and layout support
- ▸Animation tools including springs, tweens, and gestures
- ▸Component-based architecture with React support
- ▸Figma import and design system integration
Origin & Creator
Framer was created by Koen Bok and Jorn van Dijk in 2013 as a prototyping tool, originally named Framer Studio, and is now maintained by Framer B.V.
Industrial Note
Framer is widely used in UI/UX design, interactive web apps, high-fidelity prototypes, design systems, marketing landing pages, and developer handoff workflows that require both visual and code-driven components.