Nishvault / Sceneweave / Transition guide

Compare jQuery slider transitions with Sceneweave

A gallery’s transition should make the next image easy to follow. With Sceneweave, the free responsive jQuery slider and studio, you can try fade, slide and reveal on the same images, keep thumbnail navigation, and move the finished sequence into a standalone document or your site’s code.

This guide builds a Field Study transition comparison from the supplied Field Notes illustrations. They depict fictional landscapes: layered hills, trees, a winding path and a sun. They are original synthetic demonstration artwork, not real places, travel photographs or customer work.

Understand the two timing controls

Transition duration is how long the entry animation takes, in milliseconds. Slide interval is the automatic rotation delay, in seconds. They are separate settings. A duration of 250 milliseconds does not mean the gallery changes images four times a second.

Sceneweave supports an integer duration from 0 to 1500 milliseconds and an interval from 2 to 20 seconds. Its fade changes opacity, slide enters with a horizontal offset, and reveal uncovers the image with a clipping animation. These are entry effects; the previous image does not remain visible as a synchronized crossfade layer. A zero duration removes the transition’s time span.

Prepare three scenes in the studio

Open the free slider studio. Save any current custom work before choosing Load the Field Notes example, which replaces the active browser draft. For this exercise, keep the three sample scenes in order and use these captions and descriptions:

1. Set the slider title to “Field Study transition comparison,” choose Fade, enter 250 milliseconds, choose 16:9, set the interval to 5 seconds and leave autoplay unchecked.
2. Select the first thumbnail, enter its caption and description, leave the optional slide link blank, then choose Apply settings.
3. Repeat for the other two thumbnails, applying each scene before selecting another. Inspect the displayed captions as you go.
4. Use Next and Previous to compare Fade with Slide and Reveal. Apply the changed transition each time. Try 700 milliseconds to see a longer entry, then restore Fade at 250 milliseconds for the saved baseline.

Apply settings commits your edits. Save, export and the integration field use the applied project. Typing into the form and immediately copying code does not include that pending edit. After applying, inspect both the viewer and the read-only Integration HTML field.

For your own artwork, Add images appends PNG, JPEG or WebP files in chooser order. It does not clear the existing sample. Move earlier or later moves the selected scene with its text and link; Remove retains at least one image. The limits are 12 images, 4 MiB per image, 24 million decoded pixels per image and 32 MiB per embedded project. The plugin expects embedded raster data URLs; a remote image URL is not a substitute. Inspect the frame at 16:9, 4:3 or 1:1 because images fill it with cropping.

Compare two independent galleries on one page

The following local example puts Fade at 250 milliseconds above Reveal at 700 milliseconds. Both use the same three images, with autoplay off. Press Next in the first gallery: the second should stay on its current scene. Then navigate the second and confirm the first stays where you left it.

Extract the complete package and save this as field-study.html at its root. Keep the app/, vendor/ and samples/ folders together. This example deliberately reads the supplied embedded sample from samples/default.js; its image descriptions and captions are replaced with the practice text above.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Field Study transition comparison</title>
<link rel="stylesheet" href="app/sceneweave.css">
<h1>Field Study transition comparison</h1>
<h2>Fade: 250 milliseconds</h2>
<div id="fade-gallery"></div>
<h2>Reveal: 700 milliseconds</h2>
<div id="reveal-gallery"></div>
<script src="vendor/jquery-3.7.1.min.js"></script>
<script src="app/sceneweave.js"></script>
<script src="app/project.js"></script>
<script src="samples/default.js"></script>
<script>
const captions = [
  "Follow the pale path",
  "Read the layered ridges",
  "Notice the evening palette"
];
const descriptions = [
  "Fictional landscape illustration with dark green hills, a pale winding path and an orange sun.",
  "Fictional landscape illustration with layered green hills, a pale path and a yellow sun.",
  "Fictional landscape illustration with dark ridges, a pale path, lavender sky and a peach sun."
];
const options = SceneweaveProject.validate({
  ...SceneweaveSample,
  title: 'Field Study transition comparison', index: 0,
  effect: 'fade', duration: 250, aspect: '16:9',
  interval: 5, autoplay: false,
  slides: SceneweaveSample.slides.map((slide, i) => ({
    ...slide, title: captions[i], alt: descriptions[i], href: ''
  }))
});
jQuery('#fade-gallery').sceneweave(options);
jQuery('#reveal-gallery').sceneweave({
  ...options, title: 'Reveal comparison', effect: 'reveal', duration: 700
});
</script>
</html>

The exact example was executed locally with the current project validator, plugin and jQuery: the first gallery reached scene 3 while the second remained at scene 1, then the second reached scene 2 independently. These are local DOM checks, not a new browser rendering or physical-device certification. The included integration example also demonstrates destroy and reinitialize.

Choose the right output for your site

Save project downloads editable JSON with embedded images, captions, links, timing, aspect, autoplay and selected position. Reopen that JSON with Open project and check every thumbnail and setting. Keep the downloaded backup before replacing the sample or deleting scenes; browser storage alone is not a portable copy.

Export standalone HTML creates a complete document containing the images, jQuery, plugin and styles. Open the actual downloaded file and navigate its thumbnails. The unchanged Field Notes standalone example shows this output format with its original captions.

Copy integration HTML creates markup and an initializer with your embedded images, plus references to the package’s CSS and JavaScript files. Deploy the referenced app/sceneweave.css, app/sceneweave.js and vendor/jquery-3.7.1.min.js at matching paths, or adapt the references. If clipboard access is unavailable, select and copy the field. A large image payload can exceed a CMS input limit, and a CMS may strip scripts. Use your site’s supported integration method and existing content-security policy; do not disable CSP to make an inline export run.

Check navigation, motion and sharing

Focus the slider region itself for Left/Right, Home/End and Space; buttons and caption links keep their normal keyboard behavior. Hover, focus and a hidden document pause automatic rotation. Clicking Play while focused may leave playback paused until focus and hover leave the component. Reduced motion suppresses entry animation and initial autoplay, while deliberate Play remains possible. Test your finished placement; this component is not a complete WCAG, all-browser or physical-touch certification.

Downloaded studios and generated outputs contain no telemetry. The hosted page and studio use fixed anonymous diagnostics that respect Do Not Track and Global Privacy Control and exclude identifiers and project content. Diagnostic events are not proof of people, sales or rankings.

The complete plugin is free under the included use terms, including personal and commercial project use and finished outputs. Reselling the full product/source package or a competing rebrand is excluded. Keep the separate jQuery MIT notice, use artwork you have permission to share, and review the content embedded in each output. Guaranteed support and an update schedule are not included. See the README for setup, methods and limits, or open the studio to try your own transition comparison.