# Framer Animations
> Simple, programmatic `framer-motion` animations
- Demos: https://moveread.github.io/framer-animations/
## Loader/spinner
> Fully controlled loader/spinner
```jsx
import { useLoader } from 'framer-animations'
const { loader, animate } = useLoader()
async function request() {
animate('load')
try {
const r = await fetch()
// ...
animate('succeed')
}
catch {
// ...
animate('fail')
}
}
return (
// ...
{loader}
)
```
## Slideshow/full-page carousel
> Presence-based slideshow
```jsx
import { Slideshow } from 'framer-animations'
const [page, setPage] = useState('home')
const [dir, setDir] = useState('right')
const elem = (() => {
switch (page) {
case 'home':
return (
// ...
{ setPage('about'); setDir('right') }}>About
)
case 'about':
return (
// ...
{ setPage('home'); setDir('left') }}>Back
)
case '...':
...
}
})()
return (
{elem}
)
```
## Carousel
> Fully controlled, swipable carousel with animation to skip multiple pages
```jsx
import { useCarousel } from 'framer-animations'
const { carousel, goto, selected } = useCarousel({
numItems: 10, item: idx =>
Item {idx}
})
// or
const { carousel, goto, selected } = useCarousel({
mode: 'eager': items: [
Item 1
,
// ...
Item N
]
})
return (
{carousel}
goto(0)}>Start
Page: {selected}
goto(9)}>End
)
```
## Previewed Carousel
> Fully controlled, swipable carousel previewing the previous and next items
