Lightbox
Image gallery with transitions
Select a transition type, then click any image. Use arrow keys or swipe to see transitions between images.
Image Transition
Open Animation
A lightweight, zero-dependency JavaScript library for creating elegant lightboxes and alert dialogs with smooth animations.
Built for simplicity and performance. No jQuery, no bloat.
Pure vanilla JavaScript. No frameworks, no extra packages to install.
Center, left, right, top, bottom, opacity, flip, rotate, bounce, elastic.
Fade, slide, zoomIn, zoomOut, flipX, flipY for smooth gallery navigation.
Touch swipe support and responsive design for all screen sizes.
Arrow keys for gallery navigation and Escape to close modals.
Colors, sizes, positions, buttons - everything is configurable.
Select a transition type, then click any image. Use arrow keys or swipe to see transitions between images.
Each card opens an alertbox with a different open animation. Click to try them all.
Animated alert boxes for success, error, and warning states. Supports light and dark themes.
Operation completed successfully with animated feedback.
Something went wrong. Display errors with a clear visual cue.
Heads up! Show warnings before critical actions.
Hover over elements to see auto-positioned tooltips. They flip automatically to stay in the viewport.
Stackable notifications with progress bar, pause-on-hover, and multiple positions.
Show a success toast notification.
Show an error toast notification.
Show a warning toast notification.
Simple API, powerful results.
// Lightbox with image transitions
let lightbox = new Anybox("lightbox", {
animation: { type: "bounce", duration: 700 },
imageTransition: "slide",
imageTransitionDuration: 350,
slider: { buttonColor: "#fff", information: true },
closeButton: { fill: "#fff", size: 22 }
})
// Alertbox with custom animation
let alert = new Anybox("alertbox", {
headline: { text: "Done!", level: 3 },
message: { text: "Your action was successful." },
buttons: true,
closeButton: { fill: "#333" }
})
// Show with different animations
alert.show("success", { type: "bounce", duration: 700 })
alert.show("fail", { type: "elastic", duration: 800 })