Image Gallery
0
Used by 0Image Gallery
Animate images with straight or spiral motion, customizable entry and exit animations, density controls, and seamless looping to create engaging visual galleries.
KEY FEATURES
- — Straight and spiral animation modes
- — Customizable appear and disappear animations
- — Clockwise, anticlockwise or random spiral directions
- — Adjustable image scale and blank area
- — Control crowd density and spawn delay
- — Fully customizable easing and animation timing
- — Continuous looping image gallery
- — Responsive image support
- — Perfect for hero sections, portfolios and showcases
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
images
array
[{"src":"https://images.unsplash.com/photo-1547891654-e66ed7ebb968?w=600&q=80"},{"src":"https://images.unsplash.com/photo-1561214115-f2f134cc4912?w=600&q=80"},{"src":"https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?w=600&q=80"},{"src":"https://images.unsplash.com/photo-1578321272176-b7bbc0679853?w=600&q=80"},{"src":"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80"},{"src":"https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?w=600&q=80"},{"src":"https://images.unsplash.com/photo-1582719508461-905c673771fd?w=600&q=80"}]
Images prop.
type
enum
straight
Type prop.
direction
enum
both
Direction prop.
appear
object
{"style":"inToOut","ease":{"type":"tween","stiffness":800,"damping":60,"mass":1,"duration":2,"delay":2,"ease":"linear"}}
Appear prop.
disappear
object
{"style":"inToOut","ease":{"type":"tween","stiffness":800,"damping":60,"mass":1,"duration":1,"ease":"linear"},"fadeOut":100}
Disappear prop.
blankArea
number
5
Blank Area prop.
imageScale
number
2
Image Scale prop.
crowdDensity
number
10
Crowd Density prop.
crowdDelay
number
0
Crowd Delay prop.
background
color
#000000
Background prop.
