Animations/Transitions

[frank-actialuna]

Animations/Transitions

Within a page and between pages.

Animated to either time (automatic, with duration or unlimited) or position (interactive).

• sequence of images
• animated properties:
  • position, size, angle (affine transform matrix)
  • opacity
  • blur?

Triggers:

• scroll to position
• time after reaching position
• page turn (= scroll to first position of next page) -> enter page, exit page

Forward, reverse, bidirectional.

Define animations as resources for reuse within a document.

    "transformations": [
      { "attribute": "x",
        "tracker": "x",
        "curve": "linear",
        "start": 0,
        "end": 15000
      }
    ],
    "object": {
      "type": "multipart/related",
      "rel": "sequence",
      "children": [...],
      "width": 15000,
      "height": 1200
    }

[llemeurfr]

Related reads:

forwarded by Dave Cramer: https://github.com/jakearchibald/navigation-transitions

and forwarded by Jiminy Panoz : Barba.js / how it works: http://barbajs.org/how-it-works.html