impress / impress/impress.js

Refactor: Make core a general "3D animation API", move parsing of steps to plugin

Open
#742 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
38.2k
Forks
6.6k
PR merge metrics
No merged PRs in 30d

Description

This is an idea @bartaz has discussed with me as I became active in this project. I'm writing down this ticket now triggered by #649.

The basic idea is to simplify the core even more, so that core just moves the viewport to given coordinates. Even the parsing of `data-x/y/z` attributes would move out of core to some kind of step-positioning plugin.

As a first pass, I'm going to include the concept of a step as a core object though. It is common for animation software to build animations out of steps, so this seems justified. This will result in a more complex api, not less.

Core objects:

* a step
* an order between steps (array & current index)
* a camera (internally canvas + root objects)

The new API could therefore be:

addStep(element, coordinates, [index]) // default: append. This would be the `css()` part of current `initStep()`
removeStep(index)
getSteps() // return: array
getCurrentStep() // return: {index: ..., el: ..., coordinates: ...}

// Move camera to arbitrary coordinates
// Coordinates is essentially this object: https://github.com/impress/impress.js/blob/master/src/impress.js#L282
setCoordinates(coordinates)
getCoordinates()
panZoom(relativeCoordinates)

// The rest stay same as before, but goto() now becomes setCoordinates(getSteps()[target].coordinates))
goto(target) // as currently, target can be an index, step id
next()
prev()
init()
tear()
lib()

What could move out of core:

* `swipe()` can now move to `touch` plugin and just call `setCoordinates()` repeatedly to animate the swipe.
* Most of `initAllSteps()` and `initStep()` can become 1 or 2 new plugins, which parse DOM attributes and call addStep().
* I believe `addPreInitPlugin()` can then be removed and `rel` and `extras` can become normal plugins triggered by `impress:init`.
* A completely separate question is whether we should adopt the new import/export type modules. impress.js historically was always targeting state of the art JavaScript. But this ticket is valid either way.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with src/impress.js, especially the coordinate object around line 282 and the current initStep() and initAllSteps() paths. Map how steps, camera movement, swipe(), and plugins interact before deciding the API boundaries. Done would mean a general step-and-camera core API, with DOM step parsing and swipe behavior moved into plugins while existing navigation remains available.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.