---
title: "Time stretch animated icon"
description: "Time stretch animated icon (Motion design). The clip is stretched and its keyframes spread in proportion. Light: the clip's end is pulled out to its new length and stops dead a little past it; the nearer key follows, then the farther one, each landing in turn and settling. Strong: the clip first squeezes in (the keys bunch up), then is pulled out hard past its new length and settles in decaying beats, with the keys arriving in order behind it. The ruler never moves; the preview reset fades it back."
canonical: https://generativeicons.com/icons/time-stretch/
---

# Time stretch animated icon

The clip is stretched and its keyframes spread in proportion. Light: the clip's end is pulled out to its new length and stops dead a little past it; the nearer key follows, then the farther one, each landing in turn and settling. Strong: the clip first squeezes in (the keys bunch up), then is pulled out hard past its new length and settles in decaying beats, with the keys arriving in order behind it. The ruler never moves; the preview reset fades it back.

- Id: `time-stretch`
- Category: Motion design
- Search terms: retime, retiming, time remap, time scale, change duration, stretch duration, scale keyframes, spread keyframes, change speed
- 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/time-stretch.lottie (dotLottie, 6893 bytes, sha256 dc1bb214ea73d49fd620ee35f76b62a51fd3e44876d3538c98829e1f83db1ac6)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add time-stretch
```

## React

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

export function TimeStretchIcon() {
  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/time-stretch.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/time-stretch/ · https://generativeicons.com/api/icons/time-stretch