JavaScript

images-in-motion is the JS entry. Import mountImagesInMotion and pass a host. Examples fill the available box. The host is 20rem by 20rem. The second argument is the options object. There is no <ImagesInMotion> component.

InlineOptions

import { mountImagesInMotion } from '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 shell = document.querySelector('#app')
shell.style.width = '100%'
shell.style.height = '100%'
shell.style.minHeight = '100dvh'
shell.style.display = 'flex'
shell.style.alignItems = 'center'
shell.style.justifyContent = 'center'

const stage = document.querySelector('#stage')
stage.style.width = '20rem'
stage.style.height = '20rem'

mountImagesInMotion(stage, {
  images,
  speedRange: [8, 18],
  angle: 12,
  tileWidth: 168,
  gap: 4,
})

import { mountImagesInMotion } from '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,
  speedRange: [8, 18],
  angle: 12,
  tileWidth: 168,
  gap: 4,
}

const shell = document.querySelector('#app')
shell.style.width = '100%'
shell.style.height = '100%'
shell.style.minHeight = '100dvh'
shell.style.display = 'flex'
shell.style.alignItems = 'center'
shell.style.justifyContent = 'center'

const stage = document.querySelector('#stage')
stage.style.width = '20rem'
stage.style.height = '20rem'

mountImagesInMotion(stage, iimOptions)

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

Open in StackBlitz

The same import also registers <images-in-motion>. See the custom element if you want attributes instead of a call.

update accepts a partial options object. destroy removes the sheet and listeners. getLayout() returns the last computed geometry.

Options are listed on the API page.

Expo loads this same mount through createImagesInMotionWebViewHtml. NativeScript hosts the custom element or this mount in a WebView.

JavaScript ​

JavaScript