JumpingText brings any headline or label to life by animating each character in a staggered, looping jump. Letters rise and fall in sequence to create a smooth wave, with spaces preserved as fixed-width gaps so your text wraps and auto-sizes naturally. It renders cleanly on static exports and thumbnails, and only plays once it scrolls into view for better performance.
use Framer’s extended Font control to pick project or custom fonts (size, weight, style, letter spacing, and line height all included), set your color, and dial in jump height, duration, and per-letter stagger. Choose Tween mode with named easings or a fully custom cubic-bezier curve, or switch to Spring mode with adjustable bounce. Loop infinitely or play once, add a pause between loops, and pick Loop or Mirror repeat behavior.
JumpingText brings any headline or label to life by animating each character in a staggered, looping jump. Letters rise and fall in sequence to create a smooth wave, with spaces preserved as fixed-width gaps so your text wraps and auto-sizes naturally. It renders cleanly on static exports and thumbnails, and only plays once it scrolls into view for better performance.
use Framer’s extended Font control to pick project or custom fonts (size, weight, style, letter spacing, and line height all included), set your color, and dial in jump height, duration, and per-letter stagger. Choose Tween mode with named easings or a fully custom cubic-bezier curve, or switch to Spring mode with adjustable bounce. Loop infinitely or play once, add a pause between loops, and pick Loop or Mirror repeat behavior.
