---
title: "Bouncing pointer animated icon"
description: "Bouncing pointer animated icon (Annotation arrows). A bouncing arrow hops from its source dot to the target. Light: the stroke writes on in two hops, a big one and a smaller one, easing over each crest, then the head opens where it lands. Strong: the dot presses as the pen lands, the hops write fast and spring higher before settling back, and the head snaps open past its angle and settles. The preview reset fades the arrow back to the dot."
canonical: https://generativeicons.com/icons/annotation-bounce/
---

# Bouncing pointer animated icon

A bouncing arrow hops from its source dot to the target. Light: the stroke writes on in two hops, a big one and a smaller one, easing over each crest, then the head opens where it lands. Strong: the dot presses as the pen lands, the hops write fast and spring higher before settling back, and the head snaps open past its angle and settles. The preview reset fades the arrow back to the dot.

- Id: `annotation-bounce`
- Category: Annotation arrows
- Search terms: hopping arrow, hop arrow, leaping arrow, jumping arrow, skipping arrow, double arc arrow, hand drawn arrow, sketch arrow, doodle arrow, annotate
- Two states: prepared to result, played forward and back
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/annotation-bounce.lottie (dotLottie, 6474 bytes, sha256 4ca69487b34eaa6ac1a7f6fa7399bb5626ccaade3edc0695d5c3736a2071ea4d)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add annotation-bounce
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/annotation-bounce.mjs';

export function AnnotationBounceIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/annotation-bounce.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/annotation-bounce/ · https://generativeicons.com/api/icons/annotation-bounce