Skip to content

list of morphs

Jump to bottom
Pawel Przezwanski edited this page Jan 28, 2020 · 2 revisions

morph common options

Table of contents:

restructure

Restructure clears previous morphs related to specified target and specified property. This applies useful optimization technic for browsers animations called FLIP (first-last-invert-play) which uses that fact that browser performs better when coming back to 'transform: none' than to applying a transform. Thats why restructure is probably best morph to perform important animations.

Restructure has to be preceded by another morph to make some effect. Lets assume we used fragmentize morph which has by default target 'molecule' and property 'transform' and then we use restructure(1000, { target: 'molecule', property: 'transform' } - it will cause removal of fragmentize class from picture (because it has the same target and property) but also will update transitions on the target (in this case 'molecules) to include 'transform 1000ms'. If you see restructure(500) it means it uses default values of target: 'molecule', property: 'transform'.

fadein-gallery

A must have in morphs chain in 'present' phase of scenario since by default each picture is initially hidden. It is by default parallel and accepts only one argument - duration.

fadeout-gallery

Probably should be always included in morphs chain in 'hide' phase of scenario. It is by default parallel and accepts only one argument - duration.

transform

Transform set css transform. Target: unspecified (has to be specified in morph configuration.. Property: 'transform'.

import transform from 'louv/lib/morphs/transform' or import { transform } from 'louv'

Options:

translate

  • type: object[string]
  • default: { x: '0', y: '0', z: '0' }.
  • specifies css translate. Any properties can be supplied since it will deeply extend default value. For example we can write { x: '100px' } and it will result in { x: '100px', y: '0', z: '0' }

rotate

  • type: string
  • default: '0deg'.
  • specifies css transform rotate2d. However if we add rotateVector property it will rotate around this vector.

rotateVector

  • type: object[string]
  • default: null.
  • specifies css rotate3d first three value that descrive 3d vector around which rotation is made

scale

  • type: number | object
  • default: 1
  • if number specifies css transform scale, while if type of object it specifies transform scale3d. Any object's properties can be supplied since it will deeply extend default: { x: '1', y: '1', z: '1' }

skew

  • type: object
  • default: { x: '0', y: '0' }
  • specifies css transform skew. Any object's properties can be supplied since it will deeply extend default: { x: '0', y: '0' }

transformOrigin

  • type: string
  • default: 'center'
  • specifies css transform-origin property

fragmentize

Fragmentize has ability to scale pictures molecules and make a gap between them. Target: 'molecule'. Property: 'transform'.

import fragmentize from 'louv/lib/morphs/fragmentize' or import { fragmentize } from 'louv'

Options:

scale

  • type: number
  • default: 0.2
  • specifies how molecules will be scaled

absoluteGap

  • type: number
  • default: 0
  • specifies additional gap between molecules measured in pixels

scaledGap

  • type: number
  • default: 0
  • specifies additional gap between molecules set as percentage of its size

cornerOriented

  • type: boolean
  • default: false
  • specifies if molecules should be scaled and gaps applied relatively to top left corner instead of pictures center

cylinderize

Has ability to make 3d cylinder like shape from a picture (or a wave with sType option) Target: 'molecule'. Property: 'transform'.

import cylinderize from 'louv/lib/morphs/cylinderize' or import { cylinderize } from 'louv'

Options:

angleInRadians

  • type: number
  • default: Math.PI / 14
  • specifies the angle between adjacent columns

sType

  • type: boolean
  • default: false
  • if true two half of the picture are curved in opposite direction what result in wave effect.

offscreen

Moves the target to beyond the window in specified angle. Target: unspecified (has to be specified in morph configuration. Property: 'transform'.

import offscreen from 'louv/lib/morphs/offscreen' or import { offscreen } from 'louv'

Options:

Angle

  • type: number
  • default: 90
  • specifies the angle (in degrees) of shifting the target.
Clone this wiki locally