# Slideshow Animations — primitive for transitions (html)

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

Full-screen image slideshow with 32 transition styles, from parallax pushes to a photo eroding into sand

- **Install:** `git clone https://github.com/codrops/SlideshowAnimations`
- **Registry:** codrops · **Framework:** html · **License:** MIT (per demo repo)
- **Docs and preview:** https://tympanus.net/Development/SlideshowAnimations/
- **Source:** https://github.com/codrops/SlideshowAnimations
- **Example:** https://skills.varg.ai/previews/lib-codrops-slideshow-animations.mp4?v=56237 (From the library’s repo (Codrops — Manoela Ilic))
- **Time:** Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
- **Runs:** local render, free
- **Aspect:** any

## Prompt that renders it frame-exact

Cut between my full-bleed images with one of Codrops' Slideshow Animations (demo https://tympanus.net/Development/SlideshowAnimations/, article https://tympanus.net/codrops/?p=73708, code https://github.com/codrops/SlideshowAnimations, MIT). Pick a variation from index.html to index32.html: 1–16 are GSAP pushes, zooms, spins and coloured wipes, 17–22 are three.js effects (paper curl, print developing, two-tone, pixels rebuilding, sand erosion, liquid), 23–32 are pans, columns, doors and a cube. Copy that variation's js/demoN folder. Each slideshow.next() builds a GSAP timeline: create it paused at the cut point and seek it with the composition (HyperFrames: register on window.__timelines; Remotion: tl.seek(frame / fps)), and for the WebGL variations also set the shader's time or progress uniform from the same clock. Replace the images with mine at the frame's resolution and remove the wheel and keyboard handlers.

## Used in

- [Beat-synced slideshow](https://skills.varg.ai/video/beat-slideshow.md)
- [Music video](https://skills.varg.ai/video/music-video.md)
- [Kinetic manifesto](https://skills.varg.ai/video/manifesto.md)
- [News broadcast package](https://skills.varg.ai/video/news-package.md)
- [Photo memories](https://skills.varg.ai/video/memories.md)
- [Game trailer](https://skills.varg.ai/video/game-trailer.md)

## More transitions

- [Chromatic Aberration Wipe](https://skills.varg.ai/component/hf.chromatic-aberration-wipe.md) — `npx hyperframes add chromatic-aberration-wipe`
- [Colorama Wipe](https://skills.varg.ai/component/hf.colorama-wipe.md) — `npx hyperframes add colorama-wipe`
- [Cross Warp Morph](https://skills.varg.ai/component/hf.cross-warp-morph.md) — `npx hyperframes add cross-warp-morph`
- [Cut the Curve](https://skills.varg.ai/component/hf.cut-the-curve.md) — `npx hyperframes add cut-the-curve`
- [Directional Wipe](https://skills.varg.ai/component/hf.directional-wipe.md) — `npx hyperframes add directional-wipe`
- [Domain Warp Dissolve](https://skills.varg.ai/component/hf.domain-warp-dissolve.md) — `npx hyperframes add domain-warp-dissolve`