Yoyo animation
Also called alternate animation or ping-pong animation
A looping animation that plays forward and then backward, so it moves back and forth smoothly instead of jumping back to the start.
import { useRef } from 'react';
import { motion, useInView, useReducedMotion } from 'motion/react';
// 'reverse' plays up, then back down, instead of snapping to the start.
const FLOAT = {
duration: 3,
ease: 'easeInOut',
repeat: Infinity,
repeatType: 'reverse'
} as const;
export function FloatingIllustration() {
const ref = useRef<HTMLImageElement>(null);
const inView = useInView(ref);
const reduceMotion = useReducedMotion();
// Pause off screen, and stay still for reduced motion.
const floating = inView && !reduceMotion;
return (
<motion.img
ref={ref}
src='/images/rocket.svg'
alt='A rocket lifting off'
animate={{ y: floating ? -12 : 0 }}
transition={floating ? FLOAT : { duration: 0.3 }}
className='mx-auto w-80'
/>
);
}Make the hero illustration float: move it up 12px and back down on an endless yoyo loop (animation-direction: alternate), 3s each way with ease-in-out easing. Pause it while it is off screen and keep it still when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Yoyo animation?
A plain loop restarts from the first keyframe every time, so anything that moved snaps back to where it began. A yoyo loop reverses on every other run: out, back, out, back. The motion never breaks, which makes it the natural fit for floating, breathing, swinging, and pulsing effects.
In CSS, set animation-direction: alternate along with an infinite iteration count. Motion for React uses repeatType: 'reverse' with repeat: Infinity, and GSAP calls the option yoyo: true.
When an animation plays backward, its easing plays backward too, so an ease-in run comes back as an ease-out. A symmetric curve such as ease-in-out looks the same both ways and is the usual pick. Like any endless motion, pause it off screen and stop it for people who prefer reduced motion.
Often confused with
- Looping animation
- Every yoyo animation is a loop, but a plain loop restarts from the beginning each time instead of reversing.
Related terms
All termsLooping animation
An animation that plays more than once, either a set number of times or forever, set in CSS with animation-iteration-count.
Float animation
A slow up-and-down drift on a loop that makes icons, illustrations, or product shots look weightless.
Ease-in-out
An easing curve that starts slowly, speeds up in the middle, and slows down again at the end, tracing an S shape on a graph.
Pulse animation
A soft, repeating beat or expanding ring that draws the eye to a live status, a new notification, or something that needs attention.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.