WildflowerJS Logo WildflowerJS

A sound on a cut

A whoosh plays over a push from one clip to the next. The push runs over the 0.6 s the second clip overlaps intro, and the whoosh starts at the same moment, intro - 0.6, for the same 0.6 s.

<div id="intro" class="layer" data-start="0" data-duration="3">…</div>
<div class="layer" data-start="intro - 0.6" data-duration="3.6" data-clip-transition="push from-right power3.inOut">…</div>
<audio src="whoosh.wav" data-start="intro - 0.6" data-duration="0.6" data-volume="0.7"></audio>

Both are timed from intro, so changing its length moves the cut and its sound together.

An audio clip never counts as the clip a transition replaces, so the whoosh beside the two clips leaves the push as it is.

These patterns grow a bar chart in, fill a pie from data, pulse a ring of bars on the beat, and time a sound effect to a cut.

  • Bars that grow in: Bars grow from the left one after another, the top one first, while the number beside each bar counts up.
  • A pie from data: A donut chart fills clockwise, its four slices growing out together.
  • A pulse on the beat: A disc swells on each beat, and a ring of bars around it ripples and grows taller.