Custom element

Tag: images-in-motion. Importing images-in-motion defines it. You can also load the IIFE from unpkg or jsDelivr.

The tag reads HTML attributes only. It cannot take a JavaScript iimOptions object. Keep attributes, or mount from a script with the JavaScript API.

AttributesOptions

html

<div style="margin:0;width:100%;height:100%;min-height:100dvh;display:flex;align-items:center;justify-content:center">
  <images-in-motion
    id="mosaic"
    style="width:20rem;height:20rem"
    angle="12"
    speed-range="[8,18]"
  ></images-in-motion>
</div>
<script type="module">
  import 'https://unpkg.com/images-in-motion'

  const images = [
    'https://picsum.photos/800/1200?random=1',
    'https://picsum.photos/1200/800?random=2',
    'https://picsum.photos/800/800?random=3',
    'https://picsum.photos/1000/700?random=4',
    'https://picsum.photos/800/1000?random=5',
    'https://picsum.photos/700/1100?random=6',
    'https://picsum.photos/800/1200?random=7',
    'https://picsum.photos/1200/800?random=8',
  ]

  document.querySelector('#mosaic').setAttribute('images', JSON.stringify(images))
</script>

html

<div style="margin:0;width:100%;height:100%;min-height:100dvh;display:flex;align-items:center;justify-content:center">
  <div id="stage" style="width:20rem;height:20rem"></div>
</div>
<script type="module">
  import { mountImagesInMotion } from 'https://unpkg.com/images-in-motion'

  const images = [
    'https://picsum.photos/800/1200?random=1',
    'https://picsum.photos/1200/800?random=2',
    'https://picsum.photos/800/800?random=3',
    'https://picsum.photos/1000/700?random=4',
    'https://picsum.photos/800/1000?random=5',
    'https://picsum.photos/700/1100?random=6',
    'https://picsum.photos/800/1200?random=7',
    'https://picsum.photos/1200/800?random=8',
  ]

  const iimOptions = {
    images,
    angle: 12,
    speedRange: [8, 18],
  }

  mountImagesInMotion(document.querySelector('#stage'), iimOptions)
</script>

Snippets use random Picsum URLs. The mosaic on this page uses a shuffled Unsplash set.

Open in StackBlitz

jsDelivr: https://cdn.jsdelivr.net/npm/images-in-motion.

Attributes map to the same options as mountImagesInMotion (kebab-case): images, angle, speed-range, tile-width, tile-aspect-ratio, gap, overlay-opacity, overlay-color, image-order, motion-axis, tile-fit, gap-color, gap-opacity, paused, stop-on-hover, animate-on-hover.

images accepts a JSON array or a comma-separated list. speed-range accepts JSON [min,max] or min,max. Boolean flags (paused, stop-on-hover, animate-on-hover) are true when the attribute is present and not false. stop-on-hover and animate-on-hover cancel each other.

Examples fill the available box. The element is 20rem by 20rem.

NativeScript hosts this tag in a WebView. Expo can load the same IIFE that defines it.

Custom element ​

Custom element