---
title: "Core — useIntersectionProgress"
canonical: https://sky-ui.cf.sky.com/core/hooks/use-intersection-progress
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---
# Core — useIntersectionProgress
```js
import { useIntersectionProgress } from '@sky-uk/ui-core';
```
---
The `useIntersectionProgress` hook can be used to animate an element as it scrolls past the viewport.
---
```tsx
function Example() {
const ref = React.useRef();
const { intersectionProgress } = useIntersectionProgress({ ref });
const translateX = useTransform(intersectionProgress, [0, 1], [0, 300]);
return (
Hello World!
);
}
```
---
## Options
### type (optional)
The `type` option can be set to `filling` which will only increment the progress once the referenced element fills the viewport. This is useful when pairing this hook with the [Sticky](/animation/components/sticky) component.
```tsx
function Example() {
const ref = React.useRef();
const { intersectionProgress } = useIntersectionProgress({ ref, type: 'filling' });
const scale = useTransform(intersectionProgress, [0, 1], [1, 3]);
return (
Hello World!
);
}
```