Transitions & Effects
Transitions animate between consecutive items in playlists/slideshows. Effects control how individual layers appear or disappear.
Transitions
| Constructor | Description |
|---|---|
$.random() | Random from all available |
$.crossFade() | Cross-fade between slides |
$.fade() | Fade out old, fade in new |
$.slide() | Slide transition (directional) |
$.push() | Push old out, new in |
$.wipe() | Wipe effect (bar, box, iris, clock) |
$.page() | Page turn effect |
$.flip() | Card flip rotation |
$.cubeFace() | 3D cube rotation |
$.zoom() | Zoom in/out |
Common params: dur (duration), direction ('leftToRight', 'rightToLeft', 'topToBottom', 'bottomToTop')
$.playlist({
data: ['A.jpg', 'B.jpg', 'C.jpg'],
defaultTransition: $.crossFade(),
defaultDur: 5
}).addTo('svg');Effects
| Method | Description |
|---|---|
.fadeIn() / .fadeOut() | Fade opacity |
.slideIn() / .slideOut() | Slide from/to edge |
.flyIn() / .flyOut() | Fly with acceleration |
.pageIn() / .pageOut() | 3D page flip |
.wipeIn() / .wipeOut() | SMPTE wipe |
.cubeFaceIn() / .cubeFaceOut() | 3D cube rotation |
.zoomIn() / .zoomOut() | Zoom from/to point |
.blink() | Blink animation |
.nudge() | Attention nudge |
Combining Effects
$.textArea({ dur: 5, fontSize: 60 })
.text("Welcome")
.flyIn({ direction: 'bottomToTop', dur: '1s'})
.fadeOut({ dur: '0.5s'})
.addTo('svg');Related Pages
- Playlists & Slideshows — where transitions are used
- Animations — continuous custom animations
- Layers Overview — all layer types